20+ Best Web CSS Framework (2019)

Web CSS frameworks

 20+ Most Popular Web CSS frameworks 2019

This tutorial explains 20+ most popular and Best CSS frameworks. We also covered the benefits of using a CSS framework. CSS frameworks are comprised of components, modules, libraries, navigational elements, typography, media queries, tailor-made widgets, and grid layouts that make web design a breeze. We also gave you an overview of grid and FlexBox layouts.

 

When it comes to web design, Bootstrap, Foundation, and Materialize are probably the first frameworks that come to a designer’s mind, given their massive range of components and attributes.

 

However, when talking about light web projects, you do not usually need a comprehensive framework like Bootstrap or Foundation (again, depending on the complexity of your project).

 

Usually, to build a small website, lightweight frameworks can do the job effectively and cut down the bulk, or noise, associated with massive frameworks. For example, if your website merely needs something like a grid or some popular components commonly found in most frameworks, then you should consider a lightweight framework.

 

Moreover, developing websites and web applications from scratch is quite a tedious process as it involves writing a sizeable amount of code. Maintaining that code while the website evolves adds to the complexity.

 

Coding from scratch (as we like to call it) is quite an endeavor, and a framework can help you write a few lines of code and incorporate reusable sets of commonly used code that you can maintain quite easily. Clean coding and upkeep are tasks easily achieved using a framework.

 

Therefore, to simplify your web designing tasks, using Cascading Style Sheets (CSS) framework is a good option. As mentioned earlier, there are plenty of frameworks on the Web other than Bootstrap, Foundation, and Materialize.

 

These light frameworks are quite streamlined and remarkable, given their resourcefulness. The adage “Good things come in small packages” is applicable here.

 

In this blog, we explain what frameworks are and introduce the popular Bootstrap, Foundation, and Materialize. Then we will review five lightweight frameworks: Skeleton, Milligram, UIkit, Material Design Lite, and Susy.

 

 These frameworks will be used throughout the blog to build interactive and immersive web pages. In doing so, you’ll form a strong basis to select the one that best suits your development needs.

 

What Are Frameworks

What Are Frameworks

A framework is a premeditated set of concepts, modules, and standardized criteria that make the task of developing websites and web applications easier. It provides generic functionality with already written modules and tailored components created in a standard manner.

 

In short, it is a reusable software environment that allows web designers and developers to easily build their projects and solutions with minimal coding and without worrying about the low-level details. This reduces development time and provides easy upkeep and alterations whenever necessary.

 

Usually, there are two kinds of frameworks.

  • Front-end frameworks (CSS and JavaScript frameworks)
  • Back-end or server-side programming frameworks

 

While back-end frameworks are used by web developers and programmers to build applications on the server-side, front-end frameworks are used by web designers and developers for implementing the Cascading Style Sheets language.

 

Components of a CSS Framework

Components of a CSS Framework

The following are the basic components of a CSS framework:

  • Grids (structures that help organize the content and design the layout)
  • Typography elements
  • Cross-browser compatibility
  • Helper classes for positioning elements
  • Utility classes
  • Navigational elements
  • The source code is written in preprocessors such as Sass and LESS
  • Media elements (badges, tooltips, comments, and so on)

 

Advantages of Using a CSS Framework

Though some people have advocated not using CSS frameworks, mainly because of issues such as bloated structure, ingrained HTML markup, and a common aesthetic across framework-based websites, using a CSS framework has several benefits. You should try using a CSS framework for the following reasons:

  • Clean and consistent coding
  • Cross-browser compatibility
  • Grid-based design
  • The ability to incorporate healthy coding practices
  • Easy-to-build prototypes
  • Easy maintenance and upkeep
  • Allows reuse and clean homogenous code structure
  • Easy expandability and modifications
  • Solid documentation
  • Common ground for building immersive websites
  • Accessibility

 

A budding developer can find it difficult to build websites just based on pure HTML, CSS, and JavaScript. In addition, grid-based layouts help budding designers to position, structure, and design the layout quite easily.

 

You do not have to reinvent the wheel, meaning you can get some hands-­ on experience without the intricacies and dilemmas that you will come across when you code from scratch.

 

Good and clean coding practices are imperative when you grow as a web designer, and frameworks are all about awesome cohesiveness and consistent coding that will hold you in good stead in times to come.

 

Various Popular Frameworks

Various Popular Frameworks

In this section, you will look at the most popular frameworks used by web designers across the globe. The most popular frameworks for designing websites are Bootstrap, Foundation, and Materialize. Which one a developer chooses depends on the needs and requirements of a website and its design.

 

However, just because a framework is popular doesn’t mean it fits the bill when it comes to designing your projects. You need to consider several issues when it comes to selecting a framework; we’ll talk more about that later. Let’s now take a look at the various superlative frameworks that are in vogue today.

 

Bootstrap

bootstrap

Bootstrap is the most popular mobile-first framework in web design; it’s used extensively by developers across the globe. You can find more information on the official website at Bootstrap. 

 

Bootstrap adopts a mobile-first paradigm by which you can build responsive websites. It comes with components, modules, JavaScript functions, and media queries that help developers build immersive websites with ease.

 

Foundation

foundation

Foundation was the earliest responsive framework and is as massive and advanced as Bootstrap for building web products and services. Foundation comes with cool features such as Flex Grid and Motion UI.

 

The latest version, Foundation 6, is quicker, is lighter in size compared to its earlier versions, and is a solid front-end framework for designing beautiful websites, e-mails, and apps that look good on any device. You can find more information on the official website The most advanced responsive front-end framework in the world.

 

Materialize

materialize

Materialize is a modern front-end framework based on Google’s Material Design philosophy that helps developers build and design immersive websites. You can find more information on the official website at Documentation - Materialize.

 

Materialize has a superlative, creative user interface (UI) component library that incorporates cross-browser compatibility and device-agnostic capabilities for developing attractive and consistent websites.

 

Skeleton

skeleton

As mentioned earlier, sometimes you don’t need a large framework, especially if you are embarking on a small project.

 

Skeleton is a simple, responsive boilerplate and is extremely lightweight with 400 lines of code and with a mobile-based philosophy. You can find more information on the official website at Responsive CSS Boilerplate.

 

Milligram

A milligram is a minimalistic framework with just enough styles for small and interactive websites. Its zipped file size is only 2KB. It comes with a mobile-first philosophy and supports the modern browser versions of Chrome, Firefox, Safari, IE, and Opera.

 

Its cutting-­edge features include the FlexBox grid system, and it is a simple, top-notch framework from a usability point of view. You can find more information on the official website at Milligram - A minimalist CSS framework.

 

[Note: You can free download the complete Office 365 and Office 2019 com setup Guide for here]

 

UIkit

UIkit

UIkit is a light and modular front-end framework for developing faster and powerful web interfaces. It has a massive collection of HTML, CSS, and JavaScript components and modules that can be extended with themes.

 

It is flexible because it can be customized to give a unique feel to your websites. You can find more information on the official website at UIkit.

 

Material Design Lite

Material Design Lite

Google released its own front-end framework called Material Design Lite (MDL) that is based on its Material Design philosophy. MDL is a lightweight framework with few dependencies and is focused on simple websites such as blogs and landing pages.

 

It allows you to customize styles and websites designed using MDL degrade gracefully in legacy browsers. You can find more information on the official website at Material Design Lite.

 

Susy

susy

In today’s era of agile development and constant changes, the layout designs are crucial and cannot be restricted to a single framework, especially if your website is intricate design-wise. With Susy, the settings are not set in stone, meaning you can use its integrated Sass-­based libraries to create immersive layouts with potent structural designs.

 

Susy is not a typical framework but more of a UI utility as it simplifies and streamlines the task of designing intricate grid layouts. You can find more information on the official website at http://susy. Software for Humans.

 

Choosing a Framework

css

As you can see, we have covered many popular frameworksChoosing the right framework is quite important and depends on the needs and requirement of your projects. Some frameworks are bloated, meaning they have too many built-in styles, which might not be required for a small project.

 

The following are some of the factors that you should consider when choosing a framework:

  • An existing web project may already be using a particular framework that cannot be used with your desired framework.
  • Some projects may not need the clutter associated with heavyweight frameworks for performance-related issues.

 

  • You might need different preprocessor support such as for LESS or Sass, which is not integrated with your desired framework.
  • websites built with a particular framework may look similar if not customized to give them an authentic look and feel.

 

There are several other factors such as the ease of use, the speed of configuration, usability, features, widgets, components, long-term support, and reliability that you need to consider when choosing a framework.

 

In summary, you need to choose your framework based on the requirements and needs of the project; especially when choosing lightweight front-end kits for small projects, given the bloat and bulk associated with massive frameworks.

 

Concept of Grids

grids

A grid system allows you to structure and stack content horizontally and vertically in an easy manner. It is easily adaptable for any website or web application and has a lot of advantages.

 

It is usually responsive, meaning it adjusts itself based on the browser or device width. So, it displays the content appropriately in a mobile device, a laptop, a tablet, or a desktop depending on the size of the device. Plus, you have media queries, which help you define the grid layout based on the device width.

 

Grids are usually 12-column containers in many frameworks but can be customized using methods specific to the framework. You can have flexible layouts wherein you can divide the page into several regions and place content using the markup.

 

Another concept catching on in CSS designs is the FlexBox. The difference between a grid and FlexBox layout is that grid layouts are two-­ dimensional, while a FlexBox is usually one-dimensional wherein you can lay out content in a row or a column.

 

The choice of using a grid layout or a FlexBox depends on how you want to structure your content. With a FlexBox you space out the content and build a structure using that content.

 

Suppose you have certain items; it is up to you to decide how much space each item should take. Grid layouts, on the other hand, are content-agnostic. In grid layouts, you create a layout and place the content into rows and columns.

 

In most modern frameworks, both the grid and the FlexBox are supported. While the usability of the grid layout is awesome, a FlexBox can help you place things more aesthetically. 

 

For a detailed explanation of the grid concept, you can refer the Mozilla developer network website, specifically the following web page, for in-depth information: Web technology for developers Web/CSS/CSS_Grid_Layout.

 

Building a Landing Page with Skeleton

landing page

Skeleton is an intuitive framework for lightweight projects. It is extremely lightweight with a handful of HTML elements and was developed with a mobile-first philosophy.

 

In this blog, you will learn how to install a Skeleton. You will also learn about its grid system and attributes; Finally, we will build a landing web page with Skeleton.

 

Installing Skeleton

To get started, go to the Skeleton website at Responsive CSS Boilerplate. You will see the Download button, which is highlighted in a red box.

  • Click Download to download the Skeleton .zip file. After unzipping the file, you will see the file structure.
  • The CSS folder is where you save your CSS files. By default, the CSS folder contains the Normalize and Skeleton style sheets.

 

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It makes browsers render all elements more consistently and in line with modern standards.

 

It precisely targets only the styles that need normalizing. You can find more information about Normalize on the official website at https://necolas. GitHub Pages.

 

You can also see the images folder where you can store your images.

By default, the images folder contains the favicon image for Skeleton. The index.html file is your default web page. When you edit the page in Notepad++ or any editor, you will see the code displayed in Listing

 

Basic Skeleton Example
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Your page title here :)</title> <meta name=description content> <meta name=author content>
<meta name=viewport content="width=device-width, initial-scale=1">
<!—FONT--> <link href="//fonts.googleapis.com/css?family= Raleway:400,300,600" rel=stylesheet type=text/css>
<!—CSS --> <link rel=stylesheet href=css/normalize.css> <link rel=stylesheet href=css/skeleton.css>
<!—Favicon --> <link rel=icon type=image/png href=images/favicon.png>
</head>
<body>
<div class=container>
<div class=row>
<div class="one-half column" style=margin-top:25%> <h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="Responsive CSS Boilerplate">Skeleton documentation</a>.</p>
</div>
</div>
</div>
</body>
</html>

 

In Listing 2-2, you define a <body> element within which you define a <div> with the container class. Inside that, you define the <div> with the row class. Within that <div>, you define two <div>s, one with a column width of one column and other with a column width of eleven columns.

 

Remember that the <div> with the column classes should be the immediate child of the <div> with the row class. To define one column, you use the one column class. Similarly, to define eleven columns, you use the eleven columns class. For two columns, the class is two columns.

 

Note that you use an inline CSS style of <style="text-align:center; border: 1px solid black;"> with each column to align the text in the center and dedicate a black border of 1px for each column. You use the <br> element for spacing between each row.

 

Basically, the code in Listing 2-2 defines different rows with a <div> class and defines columns of different widths.

 

Building a Landing Web Page with Skeleton

In this section, you will create a landing page for a freelance portal called RemoteDesk. The landing page shows the various things you can do on the freelance portal. You will design a web page that shows several aspects of the freelance portal along with company information and other basic features.

 

We will divide the process of building the web page into six Steps. After these six Steps, you will have a complete landing page.

 

Step 1 Defining the Content Area

content

You will define the <html> tags and then move on to include the necessary links for Skeleton and Normalize (included by default in Skeleton) and the custom style sheet in the <head> tags (more about that in the code explanation). Then you will define the <body> section after the <head> tags and within the <html> tags.

 

Inside the <body> tags, you will define the <div> class with the necessary rows and columns with the required content. Essentially, each content area will be encapsulated in an element with the row class. Depending on the content, you will divide the area into sections using elements with the columns class in that section’s parent row.

Defining the Content Area

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0"/>
<link href="https://fonts.googleapis.com/ css?family=Source+Sans+Pro" rel="stylesheet"> <link href="css/normalize.css" rel="stylesheet" type="text/css"/>
<link href="css/skeleton.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<title>Best Freelance management app</title>
</head>
<body class="container">
<div class="row">
<div class="two columns logo">http://RemoteDesk.com</div> <div class="eight columns">&nbsp;</div> <div class="two columns">
<a class="button button-primary" href="#">Sign up</a>
</div>
</div>
</body>
</html>

 

As you can see in Listing 2-3, you define the viewport size inside the head section. A viewport controls the way a web page is displayed on a mobile device.

 

If you do not use a viewport, a mobile device will render the page in a typical desktop screen width. Setting a viewport helps you exercise control over a page’s width and scaling on varied devices.

You can find more about viewports at https://developers.google.com/speed/docs/insights/ConfigureViewport.

 

Then, by default in Skeleton, you set the links for Normalize and Skeleton. Remember that if the path to your files is different, you need to specify so. For now, they should be in the root folder, so the default path is good to go. Then you define the path for the custom style sheet called as style.css, which you will place in the CSS folder.

 

You define a <body> tag and assign the container class to it. The container is the main centered wrapper. You define a <div> element and assign a row class to it.

 

Inside that <div> element, you define three <div>s. The first <div> contains the content http://RemoteDesk.com and spans two columns.

 

The next <div> spans eight columns, and you assign the &nbsp; value between the <div> tags. Essentially, &nbsp creates a nonbreaking space. It is used in programming and web design to create a space in a line that cannot be broken with word wrap. Using it will help create multiple spaces that are visible on a web page and not only in the source code.

 

(We are using this because there are no offset classes in Skeleton compared to other frameworks like Bootstrap and Foundation.)

The third <div> spans two columns and contains the Sign-Up button, which we create using the button-primary class.

 

Step 2 Completing the body Tag Content

Now, you will create the rest of the content within the <body> tags.

 

You will start by inserting an image, as shown in Listing 2-4. (Refer to the entire code in the code bundle to see the positioning of the various elements; we have included code in steps in the code bundle so that you can have a better understanding of each step. Finally, index.html contains the entire code for the landing page.)

 

Listing 2-4. Inserting the Header Image

<div class="row masthead"></div>

 

You have just used the row class and assigned a class called masthead to it. The image is defined in the code in the style sheet called Style.css. The image referred to, masthead.png, is located in the images folder where you will keep all the images.

 

In style.css, you define the code, as shown in Listing 2-5.

 Inserting Header Image
.masthead{
background: url("../images/masthead.png") no-repeat center;
height: 462px;
background-size: cover;
}

 

Remember that the code shown in Listing 2-5 is the code in the custom CSS style sheet called style.css.

You assign a height of 462px and center the image. You also assign the valve cover to the background-size property; this scales the background image to be as large as possible so that the background area is fully covered by the image.

 

Step 3 Defining the Freelance Portal

Defining the Freelance Portal

Next, you will create a later section of the page where you define the features of the freelance portal. To create this section, let’s look at the code snippet shown in Listing 2-6.

 Defining the Content Area for the “Rewarding” Section

<div class="row rewardingContent"> <div class="six columns">
<h3>Plenty of rewarding projects</h3>
<p>RemoteDesk is a great place to find more
clients, and to run and grow your own freelance
business.</p>
<ul>

 

<li><strong>Freedom to work on ideal projects.</strong> On RemoteDesk, you run your own business and choose your own clients and projects. Just complete your profile and we’ll highlight ideal jobs. Also, search projects, and respond to client invitations.</li>

 

<li><strong>Wide variety and high pay. </strong> Clients are now posting jobs in hundreds of skill categories, paying top price for great work.</li> <li><strong>More and more success. </strong> The greater the success you have on projects, the more likely you are to get hired by clients that use Upwork.</li>

</ul>

</div>
<div class="six columns">
<img class='lazy' data-src="images/medal.png" class="rewardingImg"/>
</div>
</div>

 

In Listing 2-6, you create another <div> with the row class. You also assign a rewarding content custom class to it. Then, you divide the section of the page into two rows each spanning six columns in width. The first <div> within the <div> with the row class is assigned a width of six columns using the six columns class. You assign a heading inside it.

 

You create a list using the <ul> tags and define the list items using the <li> tags. Then, you create the second <div> spanning six columns where you insert an image using the <img> tag.

 

You also add a custom rewarding class to it. Next, you can see what to do with the custom classes, rewardingContent and rewarding, in the style.css style sheet, as shown in Listing 2-7.


Defining Styles Related to the “Rewarding” Section
.rewardingContent {
margin-top:10px;
}
.rewardingImg {
width: 75%;
margin: 0 auto;
display: block;
}

 

In this code, you add a margin to the rewarding content class to set the whitespace around the border. You use the display: block for the rewarding Img so that it occupies the space of the parent element.

 

(You need to use the display: block property because Skeleton does not have any utility classes for responsive images.) You also define a width for the image and center it using margin: 0 auto.

 

Step 4 Completing the Sections

Next, you will create the remaining three sections using the code in Listing 2-8.

 

 Adding Content to the Remaining Sections
<div class="row hiredContent"> <div class="six columns">
<img class='lazy' data-src="images/hire-resources-icon.png" class="hiringImg"/>
</div>
<div class="six columns">
<h3>Get hired quickly</h3>
<p>RemoteDesk.</p> <ul>
<li><strong>Streamlined hiring.</strong> RemoteDesk.</li>
<li><strong>Top Rated and Rising Talent programs.</strong> Enjoy.</li>
<li><strong>Do substantial work with top clients.</strong> RemoteDesk.</li>
</ul>
</div>
</div>
<div class="row workEfficiency">
<div class="six columns">
<h3>Work efficiently, effectively.</h3>
<p>Thesis</p>
<ul>
<li><strong>Send and receive files. </strong> Deliver digital assets in a secure environment.</li>
<li><strong>Share feedback in real time. </strong> Thesis Scientist.</li>
<li><strong>Use our mobile app.</strong>Thesis.</li>
</ul>
</div>
<div class="six columns">
<img class='lazy' data-src="images/Messaging.png" class="messagingImg"/>
</div>
</div>
<div class="row getPaid">
<div class="six columns"><img class='lazy' data-src="images/paid.png" class="paidImg"/></div>
<div class="six columns">
<h3>Get paid on time</h3>
<p>All projects include Upwork Payment Protection — helping ensure that you get paid for all work successfully completed through the freelancing website.</p> <ul>
<li><strong>All invoices and payments happen through RemoteDesk.</strong> Count</li> <li><strong>Hourly and fixed-price projects. For hourly work, submit timesheets through RemoteDesk.</strong> Thesis Scientist. </strong>
<li><strong>Multiple payment options. </strong> Choose a payment method that works best for you, from direct deposit or PayPal to wire transfer and more.</li>
</ul>
</div>
</div>

 

As shown in Listing 2-8, you create three rows using three <div>s with the row class. In the first <div> containing the row class, you create two <div>s each spanning six columns.

 

In the first child <div>, you insert an image using the <img> tag, and in the second child <div>, you create a heading followed by creating a list using the <ul> and <li> tags. In short, you create the next three content blocks using a similar technique as you did in Step 3.

 

Similarly, you create a similar structure for the remaining two <div>s with the row class by inserting two children <div>s, each spanning six columns. You also insert an image and create an unordered list similar to the previous <div>s.

 

Then, you define the CSS styles for the custom CSS code in the style.css stylesheet just like you did in Step 3. Listing 2-9 shows the CSS style sheet code.

 

Listing 2-9 Adding Styles for the Remaining Sections

.rewardingContent,.hiredContent,.workEfficiency,.getPaid{ margin-top:10px;
}
.rewardingImg,.hiringImg,.messagingImg,.paidImg { width: 75%;
margin: 0 auto;
display: block;
}

 

Step 5 Designing a Sign-up Form

 

sign up

In this Step, you will create a small sign-up form. Listing 2-10 shows the code for the form.

 

 Sign-up Form

<h3 class="row">Ready to get hired?</h3> <div class="row quickSignup">

<div class="five columns"><input type="text" name="fullName" class="fullName u-full-width" id="fullName" placeholder="Enter your full name"/></div>

<div class="five columns"><input type="text" name="emailId" class="emailId u-full-width" id="emailId" placeholder="Enter your email"/></div> <div class="two columns"><a class="button button-­ primary" href="#">Sign up</a></div>

</div>

 

In Listing 2-10, you create a <div> and assign the row class to it. You then add three <div>s with the columns class within the <div> with the row class. You then add inputs in the first two <div>s for the full name and e-mail.

 

Here you use a utility class provided by Skeleton; for example, u-full-width is used so that the fields occupy the full width of the container. You then place a Sign-Up button in the last <div>.

 

Step 6 Creating a Footer

footer

Finally, you will create the footer. Listing 2-11 shows the code for the footer section.

 

 Footer
<div class="row footer">
<div class="four columns">
<h4>Company Info</h4>
<a class="column">About us</a>
<a class="column">Customer Stories</a> <a class="column">Press</a> <a class="column">Career</a>
<a class="column">RemoteDesk Blog</a> <a class="column">Terms of service</a> <a class="column">Privacy Policy</a>
</div>
<div class="four columns"> <h4>Additional Services</h4>
<a class="column">Enterprise Solutions</a> <a class="column">Enterprise Summit</a> <a class="column">Business resources</a>
</div>
<div class="four columns">
<h4>Browse</h4>
<a class="column">Freelancers by skills</a> <a class="column">Freelancers by region</a> <a class="column">Find Jobs</a>
<a class="column">Hiring Resources</a> </div>
</div>

 

In Listing 2-11, you create a <div> tag and assign a row class to it. Within that <div>, you create three children <div>s, each spanning four columns using the four columns class.

 

The first child <div> contains anchor links, <a>, for the company information. The second child <div> contains anchor links for the additional services, whereas the third child <div> contains anchor links for the Browse section. You have just designed a landing page for the RemoteDesk freelance portal using Skeleton!

 

Summary

Skeleton is a simple framework that beginners can adapt quickly. It has a clean and concise code base.

However, Skeleton does have its drawbacks.

  • It lacks several CSS features that other frameworks
  • provide. Because of this, the development time while using Skeleton is higher compared to its counterparts.

 

The maximum width supported by the 12-column fluid grid is 960px.

 

Another drawback is the lack of community support. The last update to this framework was done three years ago. Moreover, a lot of pull requests and issues are still open, meaning all the discrepancies have yet to be fixed along with substantial updates.

Therefore, when it comes to massive, immersive websites, Skeleton falls short. Nevertheless, it is a handy utility suitable for web projects, meant mainly for smaller screens. In the next section, you will design a product page with Milligram, another intuitive lightweight framework.

 

Building a Product Page with Milligram

Product Page with Milligram

A milligram is a lightweight framework for designing interactive websites. This intuitive framework has a minimal set of styles, is apt for building web pages with high performance, and adopts the paradigm of clean and consistent coding.

 

Its zipped file size is only 2KB, making it extremely lightweight for creating small websites. In this blog, you will learn how to install Milligram and about its grid feature. Then you will build a product page with the framework.

 

Installing Milligram

There are different ways you can install Milligram. In this section, you will learn how to install Milligram by downloading the Milligram files.

Go to the Milligram website at Milligram - A minimalist CSS framework. and click the Download Milligram button. The zip file will be downloaded.

 

The CSS files (both the usual ones as well as the minified versions) are present in the dist folder.

You can also download the Milligram files or install it using Bower, NPM, or Yarn.

For installation through Bower, NPM, and Yarn, you need to use the following commands from the command-line prompt:

$ bower install milligram
$ npm install milligram
$ yarn add milligram

Once you download Milligram, add the tags for the files in the head section of your HTML code.

 

There is a preferred way of using Milligram that we will be showing in this blog, which is to use a content delivery network (CDN). A CDN is basically a system of distributed networks delivering web pages and other web content according to the geographic location of the users, the source of the web pages, and the location of the CDN server. There are many benefits of using CDN.

  • Decreases the server load
  • Enables fast content delivery
  • Ensures high availability
  • Facilitates high network backbone capacity for
  • concurrency
  • Offers better control of asset delivery

 

You can add the CDN code for Milligram using the following lines of code:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/ 1.3.0/milligram.min.css" rel="stylesheet" type="text/css"/>

The first line of code is the CDN link for the Google Roboto font. The second line of code is for the Milligram CSS minified file.

 

Overview of the Milligram Framework

In this section, you will get an overview of the various attributes of Milligram before you learn how to build a product page with the framework.

 

Milligram adheres to CSS3’s rem units ideology for its typography wherein a single font size is defined for the root element and then all the other rem units are a percentage of that root, thereby providing easy maintainability and cleaner code. By the way, Milligram uses the Roboto font family as the default font for its typography.

 

Milligram, just like Skeleton, uses mobile-first queries that target the minimum width. Styles outside of a query apply to all devices. This is done to prevent small devices such as mobiles and tablets from parsing loads of unused CSS. Milligram uses the following media query sizes based on the device size:

  • Larger than mobile device/screen: 40rem (640px)
  • Larger than tablet device/screen: 80rem (1280px)
  • Larger than desktop device/screen: 120rem (1920px)

 

Grid System in Milligram

grid

Grids in Milligram use the CSS Flexible Box Layout module standard wherein the grid is fluid, shrinking based on the browser at smaller sizes. The entire grid system is responsive with a maximum width of 112rem (1120px).

 

See Listing 3-1 to understand the grid system in Milligram.

 

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title> Grid system</title>
<meta name=description content> <meta name=author content>
<meta name=viewport content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/

1.3.0/milligram.min.css" rel=stylesheet type=text/css>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel=stylesheet>
</head>
<br>
<div class=container>
<div class=row>
<div style="text-align:center;border:1px solid black" class=column>One</div>
<div style="text-align:center;border:1px solid black" class=column>Two</div>
<div style="text-align:center;border:1px solid black" class=column>Three</div>
<div style="text-align:center;border:1px solid black" class=column>Four</div>
</div>
<br>
<div class=row>
<div style="text-align:center;border:1px solid black" class=column>One</div>
<div style="text-align:center;border:1px solid black" class="column column-50 column-offset-25">Two</div>
</div>
</div>
</html>

 

In the code, you use the CDN links for the Google fonts and the Milligram minified CSS file. You also define the viewport.

 

Just like Skeleton, the entire code is wrapped in an <div> element with a container class. All columns are defined within a row just like in many grid-based frameworks.

 

However, Milligram is different from other frameworks in that you can add any number of columns within a row. You are not restricted to 12 columns like with many popular frameworks.

 

In Listing 3-1, initially, you define a row within the <div> with the container class. Then, you define four columns within that row using the column class. You use inline styles for assigning a border and aligning the text to the center for each column.

 

Then you define another row and a column using a column class. Then you define another column within that row and use the column-50 class along with the column-offset-25 class.

 

What the column-50 class does is assign a column width of 50 percent to the column, which will allocate 50 percent of the column contained within the parent row. The column-­ offset-25 class moves the column to the right by 25 percent column space for that parent row.

 

Building a Product Page with Milligram

Now that you have a brief idea about Milligram, you will learn how to create a product page with Milligram. The Product page contains information about a Virtual Private Network (VPN) along with its features and pricing.

 

Step 1 Defining the Header

header

Let’s look at the code in Listing 3-2 to start the first step of building the secure VPN product page.

 

<!DOCTYPE html>
<html>
<head>
<title>Secure VPN</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ milligram/1.3.0/milligram.min.css" rel=stylesheet type=text/css>
<link href="https://fonts.googleapis.com/

css?family=Roboto" rel=stylesheet>
<link href=css/style.css rel=stylesheet type=text/css>
</head>
<body class=container>
<div class="row contactArea">
<div class="column column-50 column-offset-50"> <div class=contactColumn>Your IP:
115.166.129.152</div>
<div class=contactColumn>Your Location:
Unknown</div>
<div class=contactColumn>Your Status:
UNPROTECTED</div>
</div>
</div>
</body>
</html>

 

In Listing 3-2, you define the viewport and add the CDN links for the fonts and the Milligram CSS minified file. Then you introduce a link for the style.css custom CSS file.

 

After defining the links in the <head> tag, you create a <body> element with the container class in it. Then you define a <div> with the row class. You assign another custom class called contactArea to it, which you will use to define the custom CSS code.

 

Next, you define a <div> with a column of 50 percent width within the parent row and offset it by 50 percent within that row by using the column-50 and column-offset-50 classes.

 

Within that <div>, you create three <div>s wherein you define the content that comprises the IP address, location, and status. Then, you define the custom CSS code using the contact area and contact column classes in the custom style.css file.

 

Listing 3-3 depicts the code in the style.css custom CSS file using the contact area and contact column classes for the corresponding <div>s.

 Defining CSS for the Header
.contactArea{
background: #666;
color: #fff;
text-align: right
}
.contactColumn{
font-size: 12px;
display: inline-block;
margin-right: 10px;
}

 

In Listing 3-3, you define the background as gray and the color of the words as white for the contact area class. You align the text to the right.

 

For the <div> that is defined by the contact area class, you define the font size as 12px and use a margin. You use the display: inline-block property, which essentially creates a grid of boxes that fill the browser width and wraps it.

 

Here, it helps the content blocks of the header to retain their block-level characteristics and helps them appear next to each other without using a float attribute.

 

Step 2 Defining the Navigation

Let’s now look at the code in Listing 3-4 to proceed with step 2.

 Defining the Navigation
<div class="navigation row">
<div class="column column-25 logo"> <img class='lazy' data-src="images/logo.png"/>
</div>
<div class="column column-50 column-offset-25"> <a>Home</a>
<a>Pricing</a>
<a>Support</a>
<a>Login</a>
</div>
</div>

 

In Listing 3-4, you create a <div> and assign a row class to it. You also assign a custom navigation class to it, wherein you will define the custom CSS code in the style.css style sheet.

 

You then create a <div> within the <div> with the row class and assign a column width of 25 percent to it by using the column-25 class. You also add a logo custom class to it. You then insert an image for that <div> using the <img> element.

 

The path to the images is set to the images folder, with the logo.png as the image name. Within the same row, you create another <div> and assign a column width of 50 percent to it using the column-50 class for that parent row, and you offset that column by 25 percent to the right. You define the content in an anchor link, <a>, tags.

 

Listing 3-5 shows the custom CSS code linked to the code in Listing 3-4.

 

Defining the CSS for the Navigation
.logo {
text-align: left;
}
.logo img {
width: 25%;
margin: 10px 0;
}
.navigation{
background: #ffc400;
text-align: right;
padding: 10px 0;
font-weight: bold;
}
.navigation a{
color: #000;
padding: 5px;
border: 2px solid #000;
}

As you can see in Listing 3-5, you define an image width of 25 percent and set a margin for it. In the navigation class, you define dark orange as the background color and align the text to the right.

 

You set the padding and define the bold font weight for it. To the anchor links containing the Home, Pricing, Support, and Login links, you assign the black color and a black border with padding of 5px.

 

Step 3 Defining the Banner Area

Defining the Banner Area

Let’s look at the code in Listing 3-6 to see the next step in the coding process for the secure VPN product page.

 HTML for the Banner Area

<section class="mastHead row">
<div class="column column-60">
<h2>Secure your data. Protect your privacy</h2> <h4>Protect your IP address and surf the web anonymously</h4>
</div>
</section>

 

In Listing 3-6, you define the <section> tags and assign the row class as well as the custom mastHead class to it. Inside that row, you define a <div> with a column of 60 percent width for the row for the <section> tag.

 

Listing 3-7 shows the corresponding code for the mastHead class in the custom style.css style sheet.

 CSS for the Banner Area
.mastHead {
height: 450px;
overflow: hidden;
background: #ffc400;
color: #000;
}
.mastHead h1,.mastHead h2,.mastHead h3,.mastHead h4,.mastHead h5,.mastHead h6{
color: #000
}

 

What you have done is set the height of the <section> with the mastHead class to 450px and set the background to dark orange, the same color as in step 2. Then, you define a black color to the content in that section. You also set the color of all the headings in that section to black with the mastHead class.

 

Now you will split the sprite image shown in Figure into three parts for the App Store, Google Play, and Windows Phone Store. The rest of the image for the Mac App Store and Windows PC will not be displayed on the page.

You define the code for the unordered list in Listing 3-8 within which you assign a column width of 60 percent, after the headings.

 

Listing 3-8. Adding Store Information to the Banner Area

<section class="mastHead row">
<div class="column column-60">
<h2>Secure your data. Protect your privacy</h2> <h4>Protect your IP address and surf the web anonymously</h4>
<ul class="srote-badges">
<li><a class="store-ios" title="Available on the App Store"></a></li>
<li><a class="store-android" title="Get it on Google Play"></a></li>
<li><a class="store-winphone" title="Download from Windows Phone Store"></a></li>
</ul>
</div>
</section>

 

As you can see from the code in Listing 3-8, you define the unordered list and assign the custom store-badges class to it. You define the list in the anchor tags and assign the store-ios, store-android, and store-­ win phone custom classes to it.

The corresponding custom CSS code in the style.css style sheet for the unordered list will look like Listing 3-9.

 Adding the CSS for Store Icons
ul.srote-badges{
list-style: none;
}
ul.srote-badges li a, .srote-badges a { display: inline-block;
background: url(../images/store-badges-70x245.png)
no-­repeat 0 0 #fff;
width: 245px;
height: 70px;
border-radius: 4px;
}
.srote-badges a.store-ios {
background-position: 0 0;
}
.srote-badges a.store-android { background-position: 0 -70px;
}
.srote-badges a.store-winphone { background-position: 0 -140px;
}

 

In Listing 3-9, you set list-style as none to remove the bullets. Further, you set the background as the sprite image by assigning the link to that image. Then, you define the width and height for it.

 

You also assign a border-radius setting of 4px to the image. Next, you split the image into the first three parts and set the background position to 0 for the first part, -70px for the next part, and -140px for the third. The rest of the image cannot be seen.

 

You assign a column width of 40 percent for the parent <section> tag and add the masthead image class to it. Listing 3-10 shows the code within the entire <section> tags after incorporating everything from the sprite images into this Android image.

 

 Adding the Application Image to the Banner Area

<section class="mastHead row">
<div class="column column-60">
<h2>Secure your data. Protect your privacy</h2> <h4>Protect your IP address and surf the web anonymously</h4>
<ul class="srote-badges">
<li><a class="store-ios" title="Available on the App Store"></a></li>
<li><a class="store-android" title="Get it on Google Play"></a></li>
<li><a class="store-winphone" title="Download from Windows Phone Store"></a></li>
</ul>
</div>
<div class="column column-40 mastHeadImage"></div> </section>
Listing 3-11 shows the corresponding custom CSS code for the <div> element with the last mastHeadImage class.
Listing 3-11. Adding the CSS for the Application Image in the Banner Area
.mastHeadImage{
background: url("../images/android-device1.png") no-repeat;
background-size: cover;
background-position: 0 15px;
}

 

In Listing 3-11, you refer to the background and assign the image link. Then you set background-size to cover and set background-position as 15px.

 

Step 4 Designing the Content Area

content area

Moving Forward, you will design the content area.

Listing 3-12 shows how to proceed with building the “benefits” section.

 

<section class="info">

<div class="row">
<h3 class="column">BENEFITS OF USING VPN IN TOUCH</h3>
</div>
<div class="row">
<div class="column column-50">
<h4>Unblock Websites</h4>
<p>Bypass internet restriction.</p>
</div>
<div class="column column-50">
<h4>Secure Your Data</h4>
<p>Encrypt your private data before sending it from your computer, smartphone or tablet over the internet.</p>
</div>
</div>
<div class="row">
<div class="column column-50"> <h4>Bypass content restrictions</h4> <p>Watch Netflix and BBC iPlayer, no matter where you are. Use Skype, Viber and all Voip services without restrictions.</p>
</div>
<div class="column column-50"> <h4>Protect Your Privacy</h4> <p>Hide your IP address, protect your online identity while browsing and surf the web anonymously.</p>
</div>
</div>
<div class="row">
<div class="column column-50"> <h4>Wifi Hotspot Security</h4> <p>Prevent sniffers and hackers from stealing your private data while using public hotspots.</p>
</div>
<div class="column column-50">
<h4>Data Saving and Ad Blocker on Mobile</h4> <p>Save more bandwidth on your mobile 3G/4G data plan. Clear your mobile screen of obtrusive ads with Ad Blocking mode.</p>
</div>
</div>
</section>

 

In Listing 3-12, you use a <section> tag and enclose a <div> with a row class. Within that parent row, you use the <h3> heading to define the content for the level 3 heading. After that <div>, you create a <div> with the row class.

 

You create two <div>s each with a column width of 50 percent of the parent <div> using the column-50 class. You define a level 4 <h4> and a paragraph element, <p>, with their respective content within each child <div>.

 

Repeat the process three more times, wherein you create two <div>s within a parent <div> with a row class. Similarly, define <h4> and <p> under each child <div> with their respective content.

 

Step 5 Creating the Pricing Area

Price

Next, you will create a pricing table wherein you will list the subscription price for the monthly, half-yearly, and yearly timeline.

 

Let’s look at the code in Listing 3-13.

 

 HTML for the Pricing Area
<section class="pricingInfo">
<div class="row">
<h3 class="column">Pricing Overview</h3> </div>
<div class="row">
<div class="column">
<table>
<tbody>
<tr>
<td><strong>pricing</strong></td>
<td>1 Month</td>
<td>6 Months</td>
<td>1 Year</td>
</tr>
<tr>
<td><strong>Price</strong></td>
<td>$9.98/month</td>
<td>$2.99/month</td>
<td>$2.49/month</td>
</tr>
<tr>
<td><strong>Save</strong></td>
<td>0%</td>
<td>50%</td>
<td>75%</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

 

In Listing 3-13, you define the <section> tags within which you define the tables. Initially, you define a <div> with a row class where you use a heading of <h3> with the column class to define the content, i.e., Pricing Overview.

 

Then, you create a <div> with the row class after the preceding <div> and assign another <div> with the column class within it. Moving forward, you define the table headings and the table rows with the list of items in the table, which is quite similar to the way you create tables in HTML. Place the content within the <section> tags.

 

Step 6 Creating the Footer

Finally, you will create a footer for your product page.

Let’s look at the code in Listing 3-14 to understand how you design the footer of the web page.

 

 HTML for the Footer
<footer>
<div class="row">
<div class="column column-25 logo"> <img class='lazy' data-src="images/logo.png"/> <p>&copy; Copyright 2017</p> <p>All rights reserved</p>
</div>
<div class="column column-25">
<h6>LEARN MORE</h6>
<a>Pricing</a><br>
<a>How To Setup</a><br>
<a>Servers</a><br>
<a>Blog</a><br>
<a>FAQ</a><br>
</div>
<div class="column column-25">
<h6>LEGAL</h6>
<a href="/legal#terms">Terms & Conditions </a><br>
<a href="/legal#privacy">Privacy Policy </a><br>
<a href="/legal#refund">Refund Policy </a><br>
</div>
</div>
</footer>

 

In Listing 3-14, you define the footer content within the <footer> tags. Inside the <footer> tags, you initially define a <div> with the row class. Then, you create three children <div>s each with a column with a width of 25 percent of the parent row so that each child <div> takes a quarter of the parent row space.

 

In the first child <div>, you assign a logo class to it. You then insert the logo image with the <img> tag. Then you enter the copyright information with the <p> tags.

 

For this first child <div>, you define the custom CSS code in the style.css file, as shown in Listing 3-15.

 CSS for the Footer

footer{
color:#fff;
background: #666;
padding: 10px 0;
}
footer .logo img,footer .logo p{ margin-left: 10px; display: block;
}
footer .logo p{
margin-bottom: 0;
}
footer a{
color: #fff;
}
footer h6{
font-weight: bold;
border-bottom: 1px solid #fff;
}

 

As you can see in Listing 3-15, you define the color, padding, and background for the <footer>. You define the left margin space and display block; property for the footer and the image with the logo.

 

Then, you assign the color to the anchors in the footer followed by defining the bold font and solid border for the footer and <h6> heading.

 

Back in Listing 3-14, you define the second child <div> and define the <h6> heading with the content, along with the links, which you define in the anchor tags.

The third child <div> contains the conditions and policy links defined between the <h6> and anchor <a> tags. That sums up the code.

 

Introducing UIkit

Introducing UIkit

UIkit, compared to Skeleton and Milligram, is quite expansive and comes with plenty of features that are handy for building interactive sites.

 

It comes with bountiful HTML, CSS, and JavaScript components and can be easily customized to give a different feel to your websites. Being lightweight and modular, its default styles help you build powerful interfaces adhering to the semantic protocols for web design.

 

It also comes with custom themes that can be downloaded from the Customizer section of the website. A plethora of options helps you get immersive web pages up and running in no time that works on all the modern browsers.

 

In this blog, we will shed light on the installation and grid concept before moving on to various features such as animations, icons, and accordions to help you get to grips with the flexibility that UIkit offers.

 

Installing UIkit

Go to the official website at https://getuikit.com/. The Download button is on the upper-right side of the screen, as shown in Figure.

After clicking Download, the zipped file gets downloaded.

You can also install UIkit with prebuilt JavaScript, CSS, and Fewer source files with NPM, or you can clone the repo to get all the source files including build scripts.

 

To clone the repo, you need to use the following command:

git clone http://git://github.com/uikit/uikit.git

 

Another easy way to include the compiled files of all UIkit versions is to use the CDN files on the Cloudflare content delivery network. You include all the necessary files in your markup as shown in Listing 4-1.

 

Including UIkit in Your Web Page


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/ libs/uikit/3.0.0-beta.28/css/uikit.min.css" />

<script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/ jquery/3.2.1/jquery.min.js"></script>

<script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/ uikit/3.0.0-beta.28/js/uikit.min.js"></script> <script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/ uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>

Grids, Cards, Flex, and Width

 

UIkit has a flexible grid system. UIkit’s grid items are all stacked by default. To add a grid, you need to add the uk-grid attribute to the <div> element. Usually, we use the card component to demonstrate the grid functionality; the card element contains the card, the card body, and an optional card title.

 

Listing 4-2 depicts the code for the normal card component.

Card Component of UIkit


<html>

<head>

<!-- UIkit CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/ libs/uikit/3.0.0-beta.28/css/uikit.min.css" />

<!-- jQuery is required -->

<script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/ jquery/3.2.1/jquery.min.js"></script>

<!-- UIkit JS -->

<script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script> <script class='lazy' data-src="https://cdnjs.cloudflare.com/ajax/libs/ uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script> </head>

<body style="padding:10px 10px 10px 10px;">

<div class="uk-card uk-card-default uk-card-body uk-width-1-2"> <h3 class="uk-card-title">Cloud Computing</h3>

<p>Cloud Computing is a computing infrastructure</p>

</div>

</body>

</html>

 

In this code, you include the links for the UIkit framework in the <head> section. You include the jQuery code, the UIkit JavaScript code, and the UIkit icon files in the links. Then, you create a <body> tag and assign padding of 10px all over.

 

Next, you create a <div> and assign the uk-card, uk-card-default, and uk-card-body classes in addition to assigning a width of the half for the parent container using the uk-width-1-2 class. The uk-card class defines the card, while the uk-card-default class is the default styling for the card. The uk-card-body class defines the body for the card.

 

Material Design Lite Explained

Material Design Lite

Material Design Lite is an intuitive and lightweight framework compared to Bootstrap, Materialize, and Foundation. It adheres to the Material Design language launched by Google.

 

MDL has ingrained UI Components that are easy to use and implement. It provides the styling and animations that help in constructing aesthetic and responsive websites. It takes into consideration several aspects such as browser portability and responsiveness, all within a compact footprint.

 

Material Design, created by Google, is a design philosophy that is inspired by real materials and helps create sleek and interactive websites. It follows Google’s device-agnostic paradigm and stresses the need for websites to look the same irrespective of the platform.

 

In other words, it creates uniformity across all devices, whether it’s a tablet or a phone or a laptop. This is a distinct concept that helps create a consistent and unified experience that gives a real-world look and is aesthetically pleasing.

 

MDL is a unique framework with ample UI components, based on the Material Design philosophy. Though it may not possess a wide array of components compared to frameworks such as Bootstrap, it is quite resourceful and competent in its own way and provides a plethora of combinations and features to build responsive websites.

 

The name “Lite” in this framework means it caters to the web designer’s need to build immersive websites in a lightweight manner, without the bulk or clutter associated with massive frameworks.

 

Installing MDL

MDL can be downloaded in several ways. One of the easiest ways is to go to https://getMDL.io/started/index.html#download. You will see a Download MDL button.

Click the button to download a zipped file containing the various CSS and JavaScript files. The figure shows the tree structure of the unzipped components.

 

The preferred way of including MDL in your document is to use the CDN links for the icons, CSS, and JavaScript files, as shown here:

<link rel="stylesheet" href="https://fonts.googleapis.com/ icon?family=Material+Icons">

<link rel="stylesheet" href="https://code.getMDL.io/1.3.0/ material.indigo-pink.min.css">

<script defer class='lazy' data-src="https://code.getMDL.io/1.3.0/material.min.js"> </script>

 

Just include the three lines of the preceding code in your HTML page and you are good to go. We already defined the advantages of using CDN links in the previous blogs, and the creators of MDL also recommend using the CDN links.

 

Alternatively, you can download and build MDL from the GitHub portal or by using Node or Bower.

In this blog, we will stick to showing the preferred way (in other words, using CDN-hosted files in your markup file) to demonstrate various examples.

 

MDL Layout

In this section, you will look at some of the layout components of MDL so you can understand the MDL grid and other important attributes such as the footer and the tabs. Initially, you will look at the header and drawer concepts in MDL by way of some simple examples.

Listing 5-1 shows a fixed header and a normal drawer in MDL.

 

Fixed Header with Normal Drawer in MDL
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/ icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getMDL.io/1.3.0/ material.indigo-pink.min.css">
<script defer class='lazy' data-src="https://code.getMDL.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="MDL-layout MDL-js-layout MDL-layout--fixed-­ header">
<header class="MDL-layout__header"> <div class="MDL-layout__header-row">
<span class="MDL-layout-­title">SUPERMAI L007</span>
<div class="MDL-layout-spacer"></div>
<nav class="MDL-navigation">
<a class="MDL-navigation__link" href="" style="color:white">INBOX</a>
<a class="MDL-navigation__link" href="" style="color:white">SPAM</a>
<a class="MDL-­navigation__link" href="" style="color:white">TRASH</a>
</nav>
</div>
</header>
<div class="MDL-layout__drawer">
<span class="MDL-layout-title">SUPERMAIL007</span> <nav class="MDL-navigation">
<a class="MDL-navigation__link" href="">INBOX</a>
<a class="MDL-navigation__link" href="">SPAM</a>
<a class="MDL-navigation__link" href="">TRASH</a>
</nav>
</div>
<main class="MDL-layout__content">
<div class="page-content">Come Undone</div> </main>
</div>
</body>
</html>

 

In Listing 5-1, you can see the code for the fixed header and a normal drawer. Let’s look at each line of code to understand how it works.

 

In the head section, you include all the CDN files for the MDL framework. Then, you create a body tag in which you will define the functional markup for the fixed header example.

 

Then, you code a <div> and assign the MDL-layout, MDL-js-layout, and MDL-layout--fixed-header classes to it. The MDL-layout class identifies the container as an MDL component and is part of the outer container element.

 

The MDL-js-layout class adds MDL behavior to the layout and is part of the outer container element. The MDL-layout--fixed-­ header class makes the header always visible, even on small screens.

 

Then, you define the HTML <header> tag wherein you assign the MDL-layout__header class to it. The assigned class identifies the container as an MDL component.

 

Within the <header> tag, you code a <div> and assign the MDL-layout__header-row class to it. The MDL-layout__header-row class identifies the container as an MDL header row and is mandatory on a header content container.

 

Inside the <div>, you create a <span> tag and assign the MDL-layout-title class to it that identifies the layout title text and that is needed on the layout title container. You use SUPERMAIL007 as the title content for the header.

 

You then code another <div> to which you assign the MDL-layout-spacer class, which results in filling the remaining space and is usually used to align the elements to the right.

 

Then, you create the navigation element with the <nav> tag and assign the MDL-navigation class to it, which identifies the container as an MDL navigation group.

 

You create three anchor links using the <a> tag and assign the MDL-navigation__link class that identifies the anchor as an MDL navigation link. You then use the words INBOX, SPAM, and TRASH as the content for the anchor tags. You complete this header section with a closing <header> tag.

 

Continuing, you create a <div> element and assign the MDL-layout__ drawer class to it, which identifies the container as an MDL drawer.

 

Then, you create a <span> element within that <div> and assign the MDL-layout-­ title class to it, which identifies the title text to the container. You use the content SUPERMAIL007, which is the same as the content for the header title in the <header> section.

 

Then, you create the navigation element with the <nav> tag and assign the MDL-navigation class to it, which identifies the container as an MDL navigation group.

 

You create three anchor links using the <a> tag and assign the MDL-navigation__link class to it, which identifies the anchor as an MDL navigation link. You then use the words INBOX, SPAM, and TRASH as the content for the anchor tags.

 

Next, you create a <main> tag to define the layout’s primary content and assign the MDL-layout__content class to it. The MDL-layout__content class is mandatory for defining the container as the MDL layout content.

 

You then use the closing tags.

As you can see, you have created a fixed header that is visible on smaller screens too. For a fixed drawer, all you need to do is to introduce the MDL-layout--fixed-drawer class to the first <div> within which the whole functional markup is defined.

The <div> line of code looks like this: <div class = "MDL-layout MDL-js-layout MDL-layout--fixed-drawer MDL-layout--fixed-header">

 

Suppose you want a scrollable header that scrolls with the content. In such a scenario, you can remove the MDL-layout--fixed-header class from the first parent <div>. In the <header> tag, you need to introduce the MDL-layout__header—scroll class.

 

The rest of the code is the same, except that you need to put comprehensive content within the layout content <main> tag. The output will be similar, but when you scroll, the header will not be fixed but will scroll with the content. Kindly refer to the code bundle for the entire code and output.

 

In Listing 5-2, you will look at the code for a fixed header with scrollable tabs.

 Fixed Header with Scrollable Tabs
<div class="MDL-layout MDL-js-layout MDL-layout--fixed-­ header">
<header class="MDL-layout__header">
<div class="MDL-layout__header-row">
<span class="MDL-layout-title">SUPERMAIL007 </span>
</div>
<div class="MDL-layout__tab-bar MDL-js-ripple-­ effect">
<a href="#scroll-tab-1" class="MDL-­layout__ tab is-active">INBOX</a>
<a href="#scroll-tab-2" class="MDL-­layout__ tab">SPAM</a>
<a href="#scroll-tab-3" class=­"MDL-­layout__ tab">TRASH</a>
</div>
</header>
<div class="MDL-layout__drawer">
<span class="MDL-layout-title">SUPERMAIL007 </span>
<nav class="MDL-navigation">
<a class="MDL-navigation__link" href="">INBOX</a>
<a class="MDL-navigation__link" href="">SPAM</a>
<a class="MDL-navigation__link" href="">TRASH</a>
</nav>
</div>
<main class="MDL-layout__content">
<section class="MDL-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content"> Lorem ipsum dolor sit amet... (content) </div>
</section>
<section class="MDL-layout__tab-panel" id="scroll-tab-2">
<div class="page-content"> Lorem ipsum dolor sit amet, ...(content)</div>
</section>
<section class="MDL-layout__tab-panel" id="scroll-tab-3">
<div class="page-content"> Lorem ipsum dolor sit amet....(content) </div>
</section>
</main>
</div>

 

In Listing 5-2, you define the parent <div> and assign the MDL-layout, MDL-js-layout, and MDL-layout--fixed-header classes to it. You then create a <header> tag to which you assign the MDL-layout__header class.

 

Then, you create another <div> within the <header> tags to which you assign the MDL-layout__header-row class. You proceed to code a <span> tag to which you assign the MDL-layout-title class. You define the title content as SUPERMAIL007.


Next, you create the tabs. You create a <div> element to which you assign the MDL-layout__tab-bar and MDL-js-ripple-effect classes. The MDL-layout__tab-bar class identifies the container as an MDL tab bar, whereas the MDL-js-ripple-effect class is used for the immersive ripple effect.


You then create three anchor links to which you assign the #scroll-­ tab-1, #scroll-tab-2, and #scroll-tab-3 href attributes, respectively.

 

You also assign the MDL-layout__tab classes to each anchor link. In the first anchor link, you assign the is-active class because it should be active by default. Use the <header> closing tag to wrap up this section of the code.

 

You then proceed to create a drawer similar to the example in Listing 5-1. Next, you define the layout content within the <main> tags and assign the MDL-layout__content class to the <main> tag.

 

You then create the first <section> tag and assign the MDL-layout__tab-panel class to it. Only for this <section> tag, you introduce the is-active class. Then you assign an

 

ID whose value is the href attribute to the first anchor tag created in the <header> tag (i.e., scroll-tab-1). Next, you create a <div> and assign the page content class to it and define the content.

 

Similarly, you create two more sections similarly, the only difference being the ID assigned to them. You assign scroll-tab-2 and scroll-­ tab-3 as the value of the ID for the second and third sections, respectively.

 

Moving forward, you complete the code with the necessary closing tags.

(We have used random content of Lorem Ipsum… in the code to illustrate this example, for the entire code with the massive content, refer to the code bundle for this blog.)

 

Next, you will learn about the grid system in MDL. The grid system in MDL is quite easy and helps lay out the content for multiple devices based on different screen sizes. By default, a grid in MDL has 12 columns for the desktop screen, 8 for tablets, and 4 for phone sizes, and cells are laid out sequentially in a row.

 

As written on the MDL website, there are two exceptions in MDL grid system.

  • If a cell doesn’t fit in the row in one of the screen sizes,
  • it flows into the following line.
  • If a cell has a specified column size equal to or larger
  • than the number of columns for the current screen size,
  • it takes up the entirety of its row.

 

Listing 5-3 uses the following classes:

MDL-grid: Identifies the <div> as an MDL grid component
MDL-cell: Identifies the <div> as an MDL cell
MDL-cell--1-col: Sets the column size for the cell to 1 cell of the 12 cells on a desktop screen
MDL-cell--4-col: Sets the column size for the cell to 4 cells of the 12 cells on a desktop screen
MDL-cell--8-col-tablet: Sets the column size for the cell to 8 cells on a tablet screen
MDL-cell--6-col-tablet: Sets the column size for the cell to 6 cells on a tablet screen
MDL-cell--4-col-phone: Sets the column size for the cell to 4 cells on a phone screen

 

If you see the code, you have used the MDL-grid class for the first parent <div>.

You move on to create 12 child <div>s for 12 cells, and you use inline CSS styles for the borders of each cell. You assign MDL-cell and MDL-cell--1-col to each cell in the code, defining a total of 12 cells.

 

Next, you create another parent <div>, and similar to the first <div>, you assign the MDL-grid class to it. Then, you create three child <div> cells and assign MDL-cell and MDL-cell--4-col classes for it.

 

In the next parent <div>, you create a grid with three cells and define screen sizes for each child <div> cell by customizing the size of each cell on the default desktop, tablet, and phone. Now that you have gained insight into some of the components of MDL, let’s look at an example: how to build a web page with MDL.

 

Building an Intuitive Web Page Using MDL

In this section, you will take a look at the process of building a web page for Thesis Scientist, co-author of this blog. It is a simple example. We will divide it into several steps and then apply the finishing touches to create an aesthetic page.

 

Step 1 Creating the head Section

 

head

 

Listing 5-4 shows step 1, wherein you create the <head> section of the web page and include all the JavaScript and CSS files.

 

 <head> Section with All the JavaScript and CSS Files
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Website Using Material Design Lite</title> <meta name=viewport content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts. http://googleapis.com/css?family=Roboto:400,100,500,300italic, 500italic,700italic,900,300'>
<link rel=stylesheet href="https://code.getMDL.

io/1.3.0/material.brown-orange.min.css" />
<link rel='stylesheet prefetch' href='https://fonts. http://googleapis.com/icon?family=Material+Icons'>
<link rel=stylesheet href=style.css>
</head>
<body>
<script class='lazy' data-src='https://storage.googleapis.com/code.getMDL. io/1.0.6/material.min.js'></script>
<script class='lazy' data-src='http://cdnjs.cloudflare.com/ajax/libs/ jquery/2.1.3/jquery.min.js'></script> </body>
</html>

 

In Listing 5-4, you include the viewport attribute and the MDL files.

You also add a custom style sheet, i.e., style.css.

 

Step 2 Creating a Fixed Header with a Drawer

In this section, you will add a code snippet between the <body> tags wherein you will define a fixed header and the header tile along with the drawer.

 Defining a Fixed Header and the Header Tile Along with the Drawer

<div class="MDL-layout MDL-js-layout MDL-layout--fixed-header MDL-layout--fixed-tabs">
<header class="MDL-layout__header"> <div class="MDL-layout__header-row">
<span class="MDL-layout-title">Thesis Scientist</span> </div>
<div class="MDL-layout__tab-bar MDL-js-ripple-effect"> <a href="#fixed-tab-1" class="MDL-layout__tab is-­ active">About</a>
<a href="#fixed-tab-2" class="MDL-layout__tab">Moments</a> </div>
</header>
<div class="MDL-layout__drawer">
<span class="MDL-layout-title">Thesis Scientist</span> <div class="avatar">
<img class='lazy' data-src="https://s3-us-west-2.amazonaws.com/s.cdpn. io/234228/cat.jpg" alt="Kaptain Kitty" class="avatar-img">
</div>
<div class="drawer-text">
Thesis
</div>
</div>

 

In Listing 5-5, initially, you define the <div> element to which you assign the MDL-layout, MDL-js-layout, MDL-layout--fixed-header, and MDL-layout--fixed-tabs classes.

 

Then, you define the <header> tag to which you assign the MDL-layout__header class. Within the <header> tags, you create another <div> to which you assign the MDL-layout__header-row class, followed by creating a <span> element where you define the layout title using the MDL-layout-title class.

 

Close the <div> tag and code another <div> for the fixed tabs to which you assign the MDL-layout__tab-bar and MDL-js-ripple-effect classes. Once you define the name of the tabs and close the concluding </header> tag, you define the code for the drawer.

 

You code a <div> and assign the MDL-layout__drawer class to it. You create the layout title for the drawer and then code another <div> to which you assign a custom avatar class. Then you introduce an image with the help of the <img> tags. Next you code another <div>, and you define the content for the drawer text.

 

Next, you define the custom CSS styles in the style.css file, as shown Listing 5-6.

 

Defining the Custom CSS styles

.MDL-layout__drawer-button,
.MDL-layout__drawer-button i {
color: white;
}
@media (max-width: 900px) {
.MDL-layout__drawer-button {
width: 100%;
margin: 0;
background-color: transparent;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
.avatar {
height: 200px;
width: 200px;
margin: 0 auto 2em;
}
.avatar-img {
height: 200px;
width: 200px;
margin: 0 auto;
border-radius: 50%;
}
.drawer-text {
padding: 1em;
text-align: center;
}

 

In Listing 5-6, you define the color of the drawer button as white and define the background color for it. Then, you define the style for the image, i.e., the maximum width along with the height and display attributes.

 

You define the styles for the avatar class and for the avatar-img classes, in other words, for the height, width, and margin (and the border-radius for the image). Finally, you use custom styles to center the drawer text.

 

If you click the favicon to display the sliding drawer, you can see the drawer image and content.

 

Step 3 Creating the About Section

about

You will now define the content for the About section, as shown in Listing 5-7.

About Section Code

<main class="MDL-layout__content">
<div class="MDL-layout__tab-panel is-active" id="fixed-­ tab-1">
<div class="page-content">
<div class="hero-section">
<div class="hero-text MDL-typography--text-center">
<h1 class="MDL-typography--display-2">I'm Thesis Scientist</h1>
<p class="MDL-typography--display-1"> I'm a passionate mobile photographer
</p>
<a class="MDL-button MDL-js-button MDL-button--fab MDL-js-ripple-effect MDL-button--accent kitty-hero__text-button" href="#intro">
<i class="material-icons">keyboard_arrow_down</i> </a>
</div>
</div>
<div id="intro" class="MDL-grid intro-section">
<div class="about-kitty MDL-cell MDL-cell--12-col">
<p class="MDL-typography--headline">
Welcome to my web page!
</p>
</div>
<div class="about-kitty MDL-cell MDL-cell--12-col"> <p>
Various mobiles and gadgets with which i have performed photography.
</p>
</div>
<div class="about-kitty MDL-cell MDL-cell--5-col MDL-­ cell--1-col-tablet MDL-cell--hide-phone">
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="about-kitty MDL-cell MDL-cell--7-col MDL-­ cell--6-col-tablet MDL-cell--4-col-phone">
<div class="topics-container">
<div class="topic">Xiaomi MI3</div>
<div class="topic">OnePlus 2</div> <div class="topic">Sony DSC QX100</div>
</div>
</div>
</div>
</div>
</main>

 

In Listing 5-7, you code a <main> tag to which you assign the MDL-layout__content class. You create a <div> and assign the MDL-layout__tab-panel and is-active classes to it.

 

You also assign an ID of fixed-tab-1 to it, which is the href attribute for the anchor tag for the About section content. Within this, you code another <div> to define the page content.

 

You create another section within and assign the custom class hero-section to it. Within this, you create another <div> to which you assign the custom hero-text class along with the MDL-typography--text-center class.

 

This centers the text. You then define the content using different typography classes such as MDL-typography--display-2 and MDL-typography--display-1, which decides the font weight of the content.

 

Next, you create a button, a circular one also called the fab button, by defining the MDL-button, MDL-js-button, MDL-button—fab, MDL-js-­ ripple-effect, and MDL-button—accent classes to define the look of the button. You used a drop-down MDL arrow and embed it in the button.

 

After the hero section, you define a new parent <div> and assign the grid functionality to it. You then define the content for this introduction section.

 

You define the MDL-cell MDL-cell--12-col class to it so that the content occupies 12 columns on a desktop. After you jot down the content, you then create three circles by using MDL-cell, MDL-cell--5-col, MDL-cell--1-col-tablet, and MDL-cell--hide-phone.

 

This defines the cells based on the screen size such as tablets and phone, especially MDL-cell--hide-­ phone, which hides the content on a small phone. Next, you create the topic container section wherein you define the content that will eventually be placed next to the circles.

 

Now you create custom styles for the section, as shown in Listing 5-8.

 Custom Styles

.hero-section {
height: 100vh;
/* IE11 doesn't like min-height */
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(121,85,72, 0.6); background-image: -webkit-linear-gradient(rgba(121,85,72, 0.3), rgba(121,85,72, 0.3)), url(https://pacdn.500px. org/ cover_2048.jpg?2);
background-image: linear-gradient(rgba(121,85,72, 0.3), rgba(121,85,72, 0.3)), url(https://pacdn.500px.org.jpg?2); background-position: center center; background-repeat: no-repeat;
background-size: cover;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
}
.hero-text {
color: white;
margin: auto;
}
@media screen and (max-width: 580px) {
.hero-text p {
white-space: pre-line;
}
}
.kitty-hero__text-button, .MDL-button--fab.kitty-hero__text-­ button {
position: absolute;
bottom: -28px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* ABOUT KITTY INTRO + CARDS */
.intro-section,
.cards-section {
max-width: 960px;
}
/* ABOUT KITTY INTRO */
.intro-section, .MDL-grid.intro-section { padding: 5em 2em 5em;
}
.about-kitty p {
max-width: 640px;
margin: auto;
}
.circle-container {
width: 100%;
min-height: 100px;
padding: 2em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.circle-container .circle {
height: 16px;
width: 16px;
background-color: #c51162;
border-radius: 50%;
margin: 0 3px 9px;
}
.topics-container {
padding: 2em 0;
}
.topics-container .topic {
font-size: 20px;
margin: 0 2px 5px;
}
@media screen and (max-width: 480px) {
.topics-container .topic {
margin-bottom: 0.5em;
}
}
.embedded-img {
max-width: 150px;
max-height: 150px;
margin: 0.5em;
border-radius: 50%;
}

 

In the custom style sheet, you are essentially defining the background image, height, width, color, and flex characteristics for the hero section. You thereon define the text for the content with the custom hero-text class.

 

You then define the maximum width of the intro-section followed by assigning the margin and padding for the paragraphs as well as for the element defined with the about-kitty class (which incidentally defines the circles and their respective topics).

 

Next, you define the styles for the circle container and the subsequent circles. Moving forward, you define the styles for the topic container and topics along with the media query.

 

Finally, you define the maximum width and height along with the border-radius for the embedded image.

 

Step 4 Inserting an Image with Content

 

Now you will develop both the About and Moments tabs, as shown in Listing 5-9.

Code for About and Moments Tabs

<div class="MDL-grid MDL-grid--no-spacing fullwidth-­ panel">
<div class="MDL-cell MDL-cell--12-col MDL-typography-- text-center quote-panel">
<blockquote>
<p>
Taking an image, freezing a moment, reveals how rich reality truly is.
</p>
<footer>
— <cite>Anonymous</cite> </footer>
</blockquote>
</div>
</div>
</div>
</div>

 

In Listing 5-9, you code a <div> and assign the MDL-grid, MDL-grid--no-spacing, and fullwidth-panel classes. While the MDL-grid--no-­ spacing class modifies the grid cells to have no margin between them, the fullwidth-panel class creates a panel that has a size of the entire grid.

 

Within that <div>, you create another <div> and allocate space of 12 columns using the MDL-cell--12-col class. You assign the typography class to the content and center the text. You also use the quote-panel styling for the content using the quote-panel class.

 

You then create a quote using the HTML <blockquote> tags. Moving forward, you assign custom styles for the panel and insert a background image in the custom CSS style sheet, i.e., style.css, as shown in Listing 5-10.

 

Assigning Custom Styles

/* FULLWIDTH BACKGROUND SECTION */
.fullwidth-panel {
color: white;
background-color: rgba(156, 39, 176, 0.6);
}
.fullwidth-panel p {
max-width: 640px;
margin: auto;
}
.quote-panel {
background-image: -webkit-linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url('https://udemy-images. http://udemy.com/course/.jpg'); background-image: linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url('https://udemy-images.udemy.com/ course/750x422/_7.jpg'); background-position: center 5%; background-repeat: no-repeat;
background-size: cover;
padding: 4em 2em 2em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: start;
align-content: flex-start;
}
@media screen and (min-width: 800px) {
.quote-panel {
background-position: center 0;
padding: 6em 2em;
}
}
@media screen and (min-width: 1200px) {
.quote-panel {
background-position: center 8%;
padding: 10em 2em 8em;
}
}

 

In Listing 5-10, you assign the white color and define the background color to the section containing the fullwidth-panel class. You also define the maximum width and set an auto margin to it.

 

Then, for the section pertaining to the quote-panel class, you insert a background image and define its position and size along with the padding. Using media queries, you assign the background position and padding for both the 800px and 1200px screen sizes.

 

Step 5 Developing the Content for the Moments Tab

Next, you will create the content for the second fixed tab, called Moments, which is next to the About fixed tab, as shown in Listing 5-11.

Code for Second Set of Fixed Tabs
<div class="MDL-layout__tab-panel" id="fixed-tab-2"> <div class="page-content">
<div class="MDL-grid cards-section">
<div class="MDL-cell MDL-cell--6-col MDL-cell--12-­ col-­tablet MDL-card MDL-shadow--2dp home-bringing-card">
<div class="MDL-card__title">
<h2 class="MDL-card__title-text">Roses everywhere</h2>
</div>
<div class="MDL-card__supporting-text"> Roses everywhere in flower market
</div>
</div>
<div class="MDL-cell MDL-cell--4-col MDL-cell--4-col-­ tablet MDL-cell--4-col-phone MDL-card MDL-shadow-- 2dp play-card">
<div class="MDL-card__title">
<h2 class="MDL-card__title-text">Random flower</h2> </div>
<div class="MDL-card__supporting-text"> Random flower
</div>
</div>
<div class="MDL-cell MDL-cell--6-col MDL-cell--8-col-­ tablet MDL-cell--4-col-phone MDL-card MDL-shadow-- 2dp litter-card">
<div class="MDL-card__title">
<h2 class="MDL-card__title-text">Lilac</h2> </div>
<div class="MDL-card__supporting-text">

 

Lilacs are a beloved, fragrant shrub that produces clusters of light-purple flowers.

</div>

</div>
<div class="MDL-cell MDL-cell--6-col MDL-cell--8-col-­ tablet MDL-cell--4-col-phone MDL-card MDL-shadow-- 2dp diet-card">
<div class="MDL-card__title">
<h2 class="MDL-card__title-text">Beautiful sunset at aguada beach</h2>
</div>
<div class="MDL-card__supporting-text"> Beautiful sunset at aguada beach in Goa
</div>
</div>
</div>
</div>
</div>

 

Initially, you code a <div> and assign the grid class to it. You then jot down the code for four cards.

 

For the first card, you use the MDL-card class and assign the space of 6 columns for the desktop and 12 columns for the tablet size using the MDL-cell, MDL-cell--6-col, and MDL-cell--12-col-­ tablet classes. Then, you define a shadow for aesthetics using the MDL-­ shadow--2dp class.


Next, you code a <div> and assign a title for the card using the MDL-­ card__title class. Thereon, you define the title text using the ­MDL-card__ title-text class. Next, you assign the supporting content to the title using the MDL-card__supporting-text class.

 

Similarly, you create three more cards using different names for the content. In Listing 5-12, you assign the padding for the section containing the cards-section class. 

 

You then define the minimum height and the white color for the card title section. Thereon, you define the custom styles and insert a background image for each of the four cards.

 

Moving on, you define the minimum height of the card for smaller screens in addition to defining the color, height, and minimum height for the smaller screen-sized cards and the section containing the card title. 

 

You also define the font size, margins, height, background color, and border-radius for the styling of the cards on smaller screens, as well as the title text.

 

Step 6 Designing the Footer Section

Finally, you will design a form and the footer section, as shown in Listing 5-13.

 

 Form and the Footer Section
<div class="MDL-grid MDL-grid--no-spacing">
<div class="MDL-cell MDL-cell--6-col MDL-cell--8-col-­ tablet MDL-cell--4-col-phone contact-panel form-panel MDL-color--brown-50">
<form action="#">
<div class="MDL-textfield MDL-js-textfield MDL-­ textfield--floating-label">
<input class="MDL-textfield__input" type="text" id="name">
<label class="MDL-textfield__label" for="name">Your name</label>
</div>
<div class="MDL-textfield MDL-js-textfield MDL-­ textfield--floating-label">
<input class="MDL-textfield__input" type="email" id="email">
<label class="MDL-textfield__label" for="email"> Your email</label>
</div>
<div class="button-container clearfix">
<button class="MDL-button MDL-js-button MDL-button--raised MDL-js-ripple-effect MDL-button--accent subscribe-button">
Join my fans
</button>
</div>
</form>
</div>
<div class="MDL-cell MDL-cell--6-col MDL-cell--8-col-­ tablet MDL-cell--4-col-phone contact-panel address-panel MDL-typography--text-center MDL-color--brown-100">
<p class="MDL-typography--title-color-contrast MDL-­ typography--text-nowrap MDL-typography--font-thin"> <i class="material-icons">email</i> <a href="mailto:info@amp.com">info@amp.com</a> </p>
<p class="MDL-typography--title-color-contrast MDL-­ typography--text-nowrap MDL-typography--font-thin"> <a class="MDL-button MDL-js-button MDL-button--raised MDL-js-ripple-effect" href="http://twitter.com">twitter</a> <a class="MDL-button MDL-js-button MDL-button-- raised MDL-js-ripple-effect" href="plus.google. com">Google+</a>
<a class="MDL-button MDL-js-button MDL-button--raised MDL-js-ripple-effect" href="http://faceblog.com">Faceblog</a>
</p>
</div>
</div>
<footer class="MDL-mini-footer MDL-color--brown-200"> <div class="MDL-mini-footer__left-section">
<ul class="MDL-mini-footer__link-list"> <li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li> </ul>
</div>
</footer>

 

In Listing 5-13, you code a <div> and assign the grid class along with the no spacing class. You then define the space occupied by the grid columns on a tablet, phone, and desktop screen sizes.

 

You assign custom classes to it so that you can use custom styles in the style.css sheet. You also assign the brown shade to this section using the MDL-color-- brown-50 class.

 

Moving forward, you define the form within the <form> tags. Inside the <form> tags, you create a <div> and assign MDL-textfield, MDL-js-textfield, and MDL-textfield--floating-label to design the text fields and use the MDL behavior for those fields.

 

You create the Name and Email fields by adding the MDL-textfield__input to the input tag and MDL-textfield__label to the <label> tags apart from defining the type of the text fields.

 

You then create a button. First, you create a container for the button by using the button-container class. Then, you define another <div> element within that <div> and assign the MDL-button, MDL-js-button, MDL-button—raised, MDL-js-ripple-effect, and MDL-button—accent classes. This creates the button, assigns the MDL behavior, and creates the required effects and color to the button.

 

Then, you create a form. Once you are done with the form, you create the contact panel section to the right side of the form. You define another <div> and assign the column space for the cells depending on the screen size. 

 

You then define the typography, color contrast, and font using the MDL-typography--title-color-contrast, MDL-typography--text-­ nowrap, and MDL-typography--font-thin classes. Thereon, you define the e-mail icon using the material-icons class to the enclosed <i> tags.

 

Then, you create another paragraph tags and create three anchor tags and define the button classes for the Twitter, Google+, and Facebook buttons using the MDL-button, MDL-js-button, MDL-button—raised, and MDL-js-­ ripple-effect classes.

 

Finally, you define the footer by using the <footer> tags to which you assign the MDL-mini-footer and MDL-color--brown-200 classes for the footer type due to which it will inherit the footer type and brown color.

 

Within this section, you define the position of the footer using the MDL-­ mini-footer__left-section, which will align it to the left. You then define the link list using the <ul> and <li> tags.

 

Moving on, you define the custom styles for the preceding code, as shown in Listing 5-14.

 

 Custom Styles for Listing 5-13
.contact-intro {
color: rgba(255, 255, 255, 0.87);
}
.contact-panel {
padding: 6em 4em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
}
.MDL-textfield {
display: block;
width: 100%;
padding: 20px 0;
}
@media screen and (min-width: 800px) {
.subscribe-button {
float: right;
}
}
.address-panel {
background-color: #dbdef1;
color: rgba(255, 255, 255, 0.87);
}
.address-panel .material-icons { position: relative;
top: 0.2em;
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
background-color: #ff4081;
padding: 0.5em;
border-radius: 50%;
}
.MDL-mini-footer,
.MDL-mini-footer .MDL-logo,
.MDL-mini-footer--link-list a,
.MDL-mini-footer__link-list a {
color: rgba(0, 0, 0, 0.54);
}
ul {
list-style-type: none;
}
/* UTILITIES */
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
.float-left {
float: left;
}

 

In Listing 5-14, you define the color for the contact and assign the padding and display properties for the contact-panel section. You also define the display type, width, and padding for the text fields in the form.

 

You shift the submit button of the form to the right of the form section. For the same button, you use the clearfix and float properties to automatically clear the child elements without using any additional markup.

 

You move on to define the background color of the panel along with the panel color. You also define the position, height, inline-block display, padding, and border-radius for the material icons. You set the color to the logo and link list of the footer. You remove the listing bullets from the list using the list-style-type: none; property.

 

Susy Explained

susy

So far, you have seen quite a few frameworks that can be used to make interactive websites. We, as web designers, know that a grid layout is essential to position the elements effectively. Most frameworks, including the ones covered in this blog, have a concept of a grid system.

 

Even though with the Flex Grid and the CSS Grid module radically changing the dynamics of grid layouts, creating a layout can be quite a juggling act. Enter Susy- a lightweight utility for creating fast, responsive, and customizable grids that also helps keep the content and styling separate.

 

With Sass gaining ground in the world of web design, we have decided to give you an overview of this Sass-based framework that is used solely for building awesome grid layouts.

 

To understand Susy, you need to have at least a basic knowledge of Sass, but it’s quite easy to learn Susy once you are through with that. The benefit of Susy (or any Sass-inspired framework) is that you can choose only the attributes you need, eliminating the need to include other properties.

 

It abstracts away the time-consuming nature of building complex grid layouts and allows you to focus on more important things in your core web design projects. It also allows you to fine-tune your grid layouts quickly instead of spending a lot of time on coding grids.

You will now learn how to create a 4×3 grid layout using Susy.

 

Creating a 4×3 Responsive Grid Layout

There are many ways to install Susy, but for this example, we will be using Node Package Manager (NPM) and a task runner called Grunt to get going.

 

We will walk you through each phase in this example. Follow these steps:

\ 1.\ Create a project directory.

 

\ 2.\ Execute the npm init command inside the created directory. This initializes a node project inside the directory and creates the necessary files and directories for executing the project.

 

\ 3.\ Install Susy through NPM using the following command: npm install susy

However, if you are using a Linux or a Mac, you need to use sudo to perform the installation. Since in this example we are using a Mac, we will use the following command: sudo npm install susy

 

\ 4.\ You will install a task runner (a build automation utility) called Grunt. Grunt is quite useful when you need to perform repetitive tasks such as minification, compilation, unit testing, and linting, to name a few. It simplifies the tasks to a great extent and is quite a nice toolkit in your arsenal for real-­ time web design projects.

For the steps to install Grunt, refer to the following website: https://gruntjs.com/installing-grunt. npm install –save-dev grunt

 

\ 5.\ Install the Sass plug-in for Grunt. This can be done with the following command: npm install grunt-contrib-sass --save-dev

However, if you are using a Mac or Linux-based system, you need to add sudo before the preceding command.

 

\ 6.\ Create Gruntfile.js in the root directory of the project. This file needs to contain all the Grunt task runner information, as shown in Listing 6-1.

 Configuration for Grunt Task Runner

module.exports = function(grunt) {
// Project configuration. grunt.initConfig({
sass: { dist: {
options: {
style: 'expanded',
require: 'susy'
}, files: {
'css/style.css': 'scss/style.scss'
}
}
}
});
// Load the plugin that provides the "sass" task. grunt.loadNpmTasks('grunt-contrib-sass');
// Default task(s). grunt.registerTask('default', ['sass']);
};

 

The grunt.initConfig section contains the Grunt configuration necessary for the project. Next, you load the Sass plug-in for Grunt needed for the project from https://github.com/gruntjs/grunt-­ contrib-sass.

 

You can follow the installation procedures for installing the Sass plug-in at the previously mentioned website. After loading the plug-ins, you can define tasks that need to be automated. Refer to the same website to see the detailed procedure.

 

\ 7.\ Create your Sass file in the sass directory. For this project, you will create a 4×3 grid layout used typically for displaying a photo gallery. Listing 6-2 shows the HTML code for the grid.

 

Creating a 4×3 Grid

<!DOCTYPE html>
<html>
<head>
<title>Susy example</title>
<meta name=viewport content="width=device-width, initial-­ scale=1">
<link rel=stylesheet type=text/css href=css/style.css>
</head>
<body>
<div class="container clearfix"> <section>
<ul class=blocks>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
<li class=block__item></li>
</ul>
</section>
</div>
</body>
</html>

 

As you can see, we have created a list of 12 blocks and defined the style sheet for the code.

 

\ 8.\ Define the Sass code in the file style.scss in the scss folder. The code for this file is shown in Listing 6-3. You begin by importing Susy into your Sass file by using the @import component of Sass.

 

This is followed by defining the Susy configuration, which is specified in susy(). This configuration will contain values for a number of columns, gutters, maximum widths of the container, and so on.

 

You then define colors and breakpoints for media queries using Sass variables. Moving forward, you define styles for the classes container and block_item. You use the mixins container(), gutter(), and gallery() that are available in the Susy framework.

 

The container() mixin sets the container position to center along with the maximum width specified within the configuration. Similarly, gutter() sets the gutter space.

The gallery() mixin is used to create the desired block layout. This mixin accepts the desired number of columns as a parameter.

Recommend