Bootstrap

Bootstrap is a very popular CSS framework that's widely used. Check out this article for a more in-depth guide.

Semantic UI

Semantic UI is one of the most popular CSS framework for developing responsive, mobile first projects for the web.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Semantic UI library. We have used a CDN in this example, but you can checkout other ways of installing Semantic UI here.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Semantic UI Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
      </body>
    </html>

Learning Resources

  • The official documentation for Semantic UI is available here.
  • Checkout Semantic UI’s open source GitHub repository here.

Skeleton

Skeleton is a dead simple boilerplate to kickstart any responsive project.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS for the Skeleton library.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Skeleton Template</title>
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      </body>
    </html>

JSBin Demo

We have used a CDN in this example, but you can checkout other ways of installing Skeleton here.

Learning Resources

Official Documentation of Skeleton.

  • Checkout Skeleton’s open source GitHub repository here.
  • Here are some examples of how Skeleton was used on different websites.

Materialize

Materialize is a Responsive CSS framework based on Google’s Material Design Language.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.

    <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <h1>Hello World!</h1>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    </body>
  </html>

We have used a CDN in this example, but you can checkout other ways of installing Materialize here.

Learning Resources

  • The official documentation for Materialize is available here.
  • Checkout Materialize’s open source GitHub repository here.
  • Here is a handy tutorial on using Materialize.

UIKit

UIKit is A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS for the UIKit library.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

We have used a CDN in this example, but you can checkout other ways of installing UIKit here.

Learning Resources

  • The official documentation for UIKit is available here.
  • Checkout UIKit’s open source GitHub repository here.

Foundation

Foundation is an open-source, mobile first CSS framework created by Zurb.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Foundation library.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Foundation Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
      </body>
    </html>

This example makes use of a CDN that loads the default settings. If you’d like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation download page.

Learning Resources

  1. Foundation Documentation
  2. List of Foundation Tutorials
  3. Foundation Source Files on GitHub
  4. DevTips YouTube Series on Foundation Grid

Other info on CSS frameworks: