Top 3 CSS Frameworks for Front-End Development

Oct. 29, 2020, 4:57 p.m.

Top 3 CSS Frameworks for Front-End Development

By Jaysha

Last Modified: Nov. 17, 2020, 10:02 a.m.

What is a CSS web framework?

A CSS framework is a library providing pre-built CSS declarations and custom class attributes to web developers. 

 

What is the benefit of a CSS framework?

The main benefit of a CSS framework is quick web development through:

  • responsive designs
  • symmetrical layouts
  • pre-built class attributes

Frameworks simplify responsive web design by operating on a grid system that adapts to different viewpoints. 

Custom utilities change the color, padding, and margin of elements quickly.

And pre-made components such as tables, buttons, cards, and forms are ready to copy and paste from the documentation.

 

How do you use a CSS framework?

Many CSS frameworks are free open-source and downloaded directly in your project directory or added via a CDN.

CDNs are used in this article to encourage quick web development.

Download the framework to your project if you want to customize the CSS framework and override the CSS, SCSS, and/or JS files.

 

What are the top 3 CSS frameworks covered?

These three frameworks were chosen based on their popularity and ease-of-use. 

If you think another CSS framework should be added, please leave a comment below. 

 


 

Bootstrap

Version - 4.5.3

Bootstrap

Bootstrap is a free open source CSS framework built responsively with mobile-first components.

This is one of the most popular, if not the most popular, CSS web frameworks available. 

 

How to use Bootstrap - Getting Started

Download Bootstrap or add their minified CDNs to access their utilities and custom components.

Bootstrap CDNs:

  1. Minified Bootstrap CSS link
  2. Minified jQuery script
  3. Minified Popper.js script
  4. Minified Bootstrap JS script

HTML template with Bootstrap CSS, jQuery, Popper.js, Bootstrap JS

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Bootstrap CDNs - Get Started</title>
  </head>
  <body>
    <h1>Bootstrap CSS Framework</h1>


    <!-- jQuery and Popper.js -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
  </body>
</html>

To use Bootstrap's CDN, add the minified Bootstrap CSS as a <link> in the <head>. This is the only CDN required.

Add jQuery, Popper.js, and Bootstrap JS scripts, in that order, just before the closing </body> tag to use responsive components such as the navbar, collapse, and dropdown components.

 

How to use Bootstrap Default colors

HTML template - Bootstrap colors

    <!--Bootstrap Colors-->
    <div>
      <p class="text-primary">Blue</p>
      <p class="bg-primary">Blue Background</p>

      <p class="text-success">Green</p>
      <p class="bg-success">Green Background</p>

      <p class="text-danger">Red</p>
      <p class="bg-danger">Red Background</p>
    </div>

Eight default Bootstrap colors assign background colors and text colors to any component.

Text color format:

text-{ Bootstrap color }

Background color format:

bg-{ Bootstrap color }

 

Bootstrap colors as background colors

Bootstrap colors

 

How to use Bootstrap Padding and Margins

HTML template - Bootstrap padding and margins

    <!--Bootstrap Padding and Margins-->
    <div class="m-5 p-3">
      <h1>Bootstrap CSS Framework</h1>
    </div>

Bootstrap comes with padding and margin utility class attribute values to set the spacing and size of an element. 

Spacing format:

{ property }{ sides }-{ size }

 

How to use Bootstrap Containers

HTML template - Bootstrap containers

    <!--Bootstrap Container-->
    <div class="container">
      <h1>Bootstrap CSS Framework</h1>
    </div>

    <!--Bootstrap Container-fluid-->
    <div class="container-fluid">
      <h1>Bootstrap CSS Framework</h1>
    </div>

Bootstrap containers are required for using the default Bootstrap grid system.

Responsive boxes that automatically change widths in different viewpoints, Bootstrap container has pre-determined padding:15px and responsive margins.

Bootstrap container-fluid, on the other hand, sets the width:100%.

Every component should be placed in a container to maximize responsivity. 

 

How to use Bootstrap Rows and Columns

HTML template - Bootstrap rows and columns

    <!--Bootstrap Rows and Columns-->
    <div class="container p-4">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <h1>Column 1</h1>
          <p>Supporting paragraph text that will appear in the first column.</p>
        </div>
        <div class="col-lg-6 col-md-12">
          <h1>Column 2</h1>
          <p>Supporting paragraph text that will appear in the second column.</p>
        </div>
      </div>
    </div>

Bootstrap is built on a 12-column grid system.

Create columns using the class attribute value col.

Assign breakpoints to the column by adding the viewpoint size followed by the direct column width.

Column breakpoint format:

col-{ breakpoint }-{column size}

 

How to use Bootstrap Navbar

HTML template - Bootstrap light navbar with dropdown menu and collapse functionality

    <!--Bootstrap Navbar-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
        Bootstrap
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="btn btn-outline-primary my-2 my-sm-0">Login</a>
          </li>
        </ul>
      </div>
    </nav>

The Bootstrap navbar is a responsive component designed to collapse in smaller viewpoints.

Be sure to add the three necessary JavaScript CDNs for it to function correctly. 

 

Bootstrap navbar

Bootstrap navbar on desktop

Bootstrap navbar moblie

Bootstrap navbar mobile dropdown

 

How to use Bootstrap Cards

HTML template - Bootstrap grid cards

    <!--Bootstrap Cards-->
    <div class="container py-4">
      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-4">
        <div class="col mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
        </div>
        <div class="col mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
        </div>
        <div class="col mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>
        <div class="col mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Bootstrap cards are built using card classes and are simple enough to use.

Often times, cards are placed in Bootstrap's responsive rows and columns.

Bootstrap 4.5 comes with row-cols classes designed to minimize code repetition by assigning each card the same amount of columns based on the desired viewpoint.

Row Column format:

row-cols-{ breakpoint }-{ column size }

 

Bootstrap cards

Bootstrap cards in rows

 

How to use Bootstrap Buttons

HTML template - Bootstrap buttons

    <!--Bootstrap Buttons-->
    <div class="container p-4">
      <a href="#" class="btn btn-primary">Button</a>
      <a href="#" class="btn btn-outline-primary">Outline Button</a>
      <a href="#" class="btn btn-primary btn-lg">Large Button</a>
      <a href="#" class="btn btn-primary btn-sm">Small Button</a>
      <a href="#" class="btn btn-primary btn-block">Block Button</a>
    </div>

Bootstrap buttons have a custom class attribute value, btn, and requires a color assignment. 

 

Bootstrap buttons

Bootstrap buttons

 

How to use Bootstrap Forms

HTML template - Bootstrap form fields

    <!--Bootstrap Form-->
    <div class="container">
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputFirstName">First Name</label>
            <input type="text" class="form-control" id="inputFirstName">
          </div>
          <div class="form-group col-md-6">
            <label for="inputLastName">Last Name</label>
            <input type="text" class="form-control" id="inputLastName">
          </div>
        </div>
        <div class="form-group">
          <label for="exampleFormControlSelect1">Select</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <div class="form-group">
          <label for="inputEmail">Email</label>
          <input type="text" class="form-control" id="inputEmail">
        </div>
        <div class="form-group">
          <label for="inputMessage">Message</label>
          <textarea class="form-control" id="inputMessage"></textarea>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck" checked>
            <label class="form-check-label" for="gridCheck">
              I agree to the Privacy Policy and Terms and Conditions of this site.
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-outline-primary btn-block">Send Message</button>
      </form>
    </div>

Bootstrap forms provide a clean layout for all of the basic form fields including textareas, selects, and checkboxes.

 

Bootstrap forms

Bootstrap forms

 

How to use Bootstrap Icons

HTML template - Bootstrap icons

    <!--Bootstrap Icons-->
    <div class="container py-4">
      <!--Alarm icon-->
      <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-alarm-fill text-primary" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
      </svg>

      <!--Archive icon-->
      <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-archive-fill text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15h9.286zM5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8H.8z"/>
      </svg>

      <!--Arrow icon-->
      <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-arrow-down-circle-fill text-danger" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
      </svg>

    </div>

Bootstrap icons are SVGs easy to style and can be added to any existing Bootstrap component. 

 

Bootstrap icons

Bootstrap icons

 

 


 

Materialize

Version 1.0.0

Materialize

Materialize is another responsive front-end framework that is free to use and open source.

Components scale responsively and are easily customizable. 

 

How to use Materialize - Getting Started

Download Materialize or add the CDNs to use any of the Materialize components and CSS.

Materialize CDNs:

  1. Minified Materialize CSS link
  2. Materialize icon link
  3. Minified jQuery script
  4. Minified Materialize JS script

HTML template with Materialize CSS, jQuery, and Materialize JS

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Materialize CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

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

    <title>Materialize CDNs - Get Started</title>
  </head>
  <body>
    <h1>Materialize CSS Framework</h1>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <!-- Materialize JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
  </body>
</html>

Add the Materialize CSS <link> and Materialize icons <link> to the <head> then go down the closing </body> tag and add a minified jQuery and Materialize JS <script>.

 

How to use Materialize Default colors

HTML template - Materialize colors

    <!--Materialize Colors-->
    <div>
      <p class="text-blue text-lighten-1">Light Blue</p>
      <p class="blue lighten-1">Light Blue Background</p>

      <p class="text-green text-darken2">Dark Green</p>
      <p class="green darken-2">Dark Green Background</p>

      <p class="text-red">Red</p>
      <p class="red">Red Background</p>
    </div>

Materialize colors assign background colors and text colors to any component.

Text color format:

text-{ color } text-{ Materialize shade }

Background color format:

{ color } { Materialize shade }

Materialize colors (listed as background colors)

Materialize Colors

 

How to use Materialize Containers

HTML template - Materialize containers

    <!--Materialize Container-->
    <div class="container">
      <h1>Materialize CSS Framework</h1>
    </div>

Materialize containers are responsive boxes automatically scaled to account for different viewpoints.

 

How to use Materialize Rows and Columns

HTML template - Materialize rows and columns

    <!--Materialize Rows and Columns-->
    <div class="container">
      <div class="row">
        <div class="col l6 m12">
          <h1>Column 1</h1>
          <p>Supporting paragraph text that will appear in the first column.</p>
        </div>
        <div class="col l6 m12">
          <h1>Column 2</h1>
          <p>Supporting paragraph text that will appear in the second column.</p>
        </div>
      </div>
    </div>

Materialize is also built on a 12-column grid system.

Create columns using the class attribute value col. Assign breakpoints to the column by adding the viewpoint size followed by the direct column width. 

Column breakpoint format:

col { breakpoint }{ column size }

 

How to use Materialize Navbar

HTML template - Materialize navbar with dropdown menu and sidenav

    <!--Materialize Navbar-->
    <nav>
    <div class="nav-wrapper" style="background-color:#263238">
      <a href="#!" class="brand-logo" style="padding-left:20px; font-size:18px">Navbar</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Contact</a></li>
        <!-- Dropdown Trigger -->
        <li><a class="dropdown-trigger-1" href="#" data-target="dropdown1">Features<i class="material-icons right">arrow_drop_down</i></a></li>
          <!-- Materialize Dropdown Navbar -->
          <ul id="dropdown1" class="dropdown-content">
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
            <li class="divider"></li>
            <li><a href="#!">three</a></li>
          </ul>
      </ul>
    </div>
  </nav>

  <!-- Materialize CSS Mobile SideNavbar -->
  <ul class="sidenav" id="mobile-demo">
    <li><a href="#">Contact</a></li>
    <!-- Dropdown Trigger -->
    <li><a class="dropdown-trigger-2" href="#" data-target="dropdown2">Features<i class="material-icons right">arrow_drop_down</i></a></li>
    <!-- Materialize Dropdown Navbar -->
    <ul id="dropdown2" class="dropdown-content">
      <li><a href="#!">one</a></li>
      <li><a href="#!">two</a></li>
      <li class="divider"></li>
      <li><a href="#!">three</a></li>
    </ul>
  </ul>


    <!-- jQuery -->
    ...

    <!-- Materialize JS -->
    ...

    <!-- Materialize Navbar JS -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".dropdown-trigger-1").dropdown();
        $(".dropdown-trigger-2").dropdown();
        $('.sidenav').sidenav();
      });
    </script>

The Materialize navbar is a responsive component designed to collapse and display a side navbar in small viewpoints.

You will need to add a custom jQuery function for the dropdowns and sidnav.

 

Materialize navbar

Materialize navbar

Materialize Navbar mobile

Navbar mobile sidenav

 

How to use Materialize Cards

HTML template - Materialize grid cards

  <!--Materialize Cards-->
  <div class="container">
    <div class="row">
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content">
            <h5 class="card-title">Card title</h5>
            <br>
            <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content">
            <h5 class="card-title">Card title</h5>
            <br>
            <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content">
            <h5 class="card-title">Card title</h5>
            <br>
            <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content">
            <h5 class="card-title">Card title</h5>
            <br>
            <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Materialize cards come with custom class attribute values for the title and content.

By default, they also have a slight shadow.

 

Materialize cards

Materialize cards in rows

 

How to use Materialize Buttons

HTML template - Materialize buttons

  <!--Materialize Buttons-->
  <div class="container"><br><br>
    <a class="waves-effect waves-light btn">Button</a><br><br>
    <a class="waves-effect waves-light btn-large">Large Button</a><br><br>
    <a class="btn-floating waves-effect waves-light"><i class="material-icons">add</i></a><br><br>
    <a class="btn-floating waves-effect waves-light btn-large"><i class="material-icons">add</i></a><br><br>
  </div>

Materialize buttons also have a slight shadow and come raised by default.

 

Materialize buttons

Materialize buttons

 

Materialize Forms

HTML template - Marterialize form fields

  <!--Materialize Navbar-->
  <div class="container">
    <form>
      <div class="row">
        <div class="input-field col s6">
          <input id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
        <div class="input-field col s12">
          <select>
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
          <label>Materialize Select</label>
        </div>
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" data-length="120"></textarea>
          <label for="textarea1">Message</label>
        </div>
        <p>
          <label>
            <input type="checkbox" checked="checked" />
            <span>I agree to the Terms & Conditions.</span>
          </label>
        </p>
      </div>
      <a href = "#" class="waves-effect waves-light btn-large" role="button">Send Message</a>
    </form>
  </div>

<!-- jQuery -->
...

<!-- Materialize JS -->
...
    
<!--Materialize Form Select JS-->
<script>
  $(document).ready(function() {
    $('select').formSelect();
  });
</script>


Materialize forms have a JS function attached to each field that creates an animation on click.

If you would like to use form selects, be sure to initialize it in a jQuery function. 

 

Materialize forms

Materialize form

 

How to use Materialize Icons

HTML template - Materialize icons

<head>
  <!-- Required meta tags -->
  ...

  <!-- Materialize CSS -->
  ...

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

  <title>...</title>
</head>

<body>

  <!--Materialize Navbar-->
  <div class="container">
      <!--Alarm icon-->
      <i class="material-icons">alarm</i>

      <!--Archive icon-->
      <i class="material-icons">archive</i>

      <!--Upload icon-->
      <i class="material-icons">cloud_upload</i>
  </div>

You may have noticed the use of Materialize icons in some previous components. 

Materialize icons are called in an <i> element with the class attribute value material-icons followed by the name of the icon within the <i> tags.

Be sure to have the Materialize icon CDN loaded in the <head> or icons will not appear. 

Icon format:

 

<i class="material-icons">{ icons_name }</i>

 

Materialize icons

Materialize icons

 


 

Tailwind CSS

Version 1.9.0

Tailwind

Tailwind CSS markets itself as an alternative to predesigned components. 

Utility classes, rather than pre-built components, are provided as minimal building blocks meant to be overridden by custom CSS.

 

How to use Tailwind - Getting Started

Download Tailwind or add the CDNs to your template. However, the document recommends downloading the CSS framework rather than using the CDN.

Tailwind CSS is meant to help you build a custom design and the CDN limits these Tailwind features.

We will be showing you how to use the CDN just to quickly get started with default Tailwind components. But if you do decide to use Tailwind, download the framework. 

Tailwind CDNs:

  1. Minified Tailwind CSS link

HTML template with Tailwind CSS

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


    <title>Tailwind CSS CDN - Get Started</title>
  </head>
  <body>

    <h1>Tailwind CSS Framework</h1>


  </body>
</html>

Tailwind only offers one CDN that is added to the <head> element. 

 

How to use Tailwind Default Colors

HTML template - Tailwind colors

      <!--Tailwind Colors-->
      <div>
        <p class="text-blue-400">Light Blue</p>
        <p class="bg-blue-400">Light Blue Background</p>

        <p class="text-green-900">Dark Green</p>
        <p class="bg-green-900">Dark Green Background</p>

        <p class="text-red-600">Red</p>
        <p class="bg-red-600">Red Background</p>
      </div>

Tailwind, like Materialize, has a variety of default colors that can be added as a background or text color. 

Text color format:

text-{ color }-{ Tailwind shade }

Background color format:

bg-{ color }-{ Tailwind shade }

 

Tailwind colors

Tailwindcss colors

 

How to use Tailwind Padding and Margins

HTML template - Tailwind padding and margins

      <!--Tailwind Padding and Margin-->
      <div class="m-5 p-3">
        <h1>Tailwind CSS Framework</h1>
      </div>

Tailwind offers 18 sizes for both the margin and padding property. The format is identical to Bootstrap's spacing. 

Spacing format:

{ property }{ sides }-{ size }

 

How to use Tailwind Container

      <!--Tailwind Container-->
      <div class="container">
        <h1>Tailwind CSS Framework</h1>
      </div>

The Tailwind container has a width:100% by default. 

 

How to use Tailwind Grid and Columns

HTML template - Tailwind grid and columns

      <!--Tailwind Grid and Columns-->
      <div class="container mx-auto py-3">
        <div class="grid grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-2">
          <div>
            <h1>Column 1</h1>
            <p>Supporting paragraph text that will appear in the first column.</p>
          </div>
          <div>
            <h1>Column 2</h1>
            <p>Supporting paragraph text that will appear in the second column.</p>
          </div>
      </div>

Tailwind uses a 12-column grid system.

To specify the columns in the grid, add the grid class attribute value followed by the number of grid columns and the gap between each column. 

To make the grid responsive, prefix the breakpoint followed by the grid column size. 

Column breakpoint format:

{ breakpoint }:grid-cols-{ number of columns }.

 

How to use Tailwind Navbar

HTML template - Tailwind navbar

      <!--Tailwind Navbar-->
      <nav class="flex items-center justify-between flex-wrap bg-teal-400 p-6">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
          <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
        </div>
        <div class="block lg:hidden">
          <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
        </div>
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
          <div class="text-sm lg:flex-grow">
            <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Docs
            </a>
            <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Examples
            </a>
            <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
              Blog
            </a>
          </div>
          <div>
            <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
          </div>
        </div>
      </nav>

Tailwind does not have a navigation bar component but the documentation does offer an example of a responsive navbar.

 

Tailwind navbar

Tailwind desktop

Tailwind navbar in mobile

 

How to use Tailwind Cards

HTML template - Tailwind grid cards

      <!--Tailwind Grid Cards-->
      <div class="container mx-auto py-3">
        <div class="grid grid-cols-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-4">
          <div class="rounded overflow-hidden shadow-md">
            <div class="px-6 py-4">
              <div class="font-bold text-xl mb-2">Card title</div>
              <p>
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
          <div class="rounded overflow-hidden shadow-md">
            <div class="px-6 py-4">
              <div class="font-bold text-xl mb-2">Card title</div>
              <p>
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
          <div class="rounded overflow-hidden shadow-md">
            <div class="px-6 py-4">
              <div class="font-bold text-xl mb-2">Card title</div>
              <p>
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
          <div class="rounded overflow-hidden shadow-md">
            <div class="px-6 py-4">
              <div class="font-bold text-xl mb-2">Card title</div>
              <p>
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              </p>
            </div>
          </div>          
      </div>
    </div>

Tailwind offers a basic example of a card built using responsive columns and shadow outlines.

Checkout out 17 Tailwind CSS Card Examples for more card templates.

 

Tailwind cards

Tailwind cards

 

How to use Tailwind Buttons

HTML template - Tailwind buttons

      <!--Tailwind Buttons-->
      <div class="container mx-auto py-3">
        <!--Basic button-->
        <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
          Button
        </a>

        <!--Pill button-->
        <a class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-full">
          Button
        </a>

        <!--Outline button-->
        <a class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
          Button
        </a>

        <!--3D button-->
        <a class="bg-blue-500 hover:bg-blue-400 text-white py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
          Button
        </a>
    </div>

Tailwind does not have a custom btn class attribute. You will need to build these component class attributes yourself.

But to get started, here are some basic button examples.

 

Tailwind buttons

Tailwind buttons

 

How to use Tailwind Forms

HTML template - Tailwind forms

      <!--Tailwind Buttons-->
      <div class="container mx-auto py-3">
        <form>
          <div class="grid grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-2 mb-4">
            <div>
              <label class="block text-gray-700 text-sm font-semibold mb-2" for="firstname">
                First Name
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="firstname" type="text">
            </div>
            <div>
              <label class="block text-gray-700 text-sm font-semibold mb-2" for="lastname">
                Last Name
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="lastname" type="text">
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-semibold mb-2" for="select">
              Select
            </label>
            <div class="relative">
              <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
              </div>
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-semibold mb-2" for="email">
              Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="text">
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-semibold mb-2" for="message">
              Message
            </label>
            <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="message"></textarea>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700">
              <input class="shadow border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" type="checkbox">
              <span class="text-sm font-semibold">
                I agree to the Terms & Conditions.
              </span>
            </label>
          </div>
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Submit
          </button>
        </div>
      </form>  
    </div>

Here is an example of a contact form based on the example forms provided in the documentation.

You may have noticed that there is a large amount of repetition in the code.

To minimize this, create custom Tailwind CSS class attributes.

 

Tailwind forms

Tailwind Form




0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments