CSS Boilerplates

In short, a CSS boilerplate is a css template – a file with premade css you can download and use. Typically assisted by a style guide or reference, that gives you a set of rules (classes, structures) – and when you follow these, you’ll quickly be able to produce well-formed, responsive design without having to worry about browsers and devices.

A CSS preprocessor is a framework for writing different (and smarter) CSS, which is then compiled into standard CSS. Much like a javascript library can give you some advanced features and methods.

The latter is a bit more complicated to use, so let’s start off with introducing some CSS boilerplates to get you going.

Skeleton CSS – responsive and super simple

The Skeleton boilerplate is supported by a github repository with an example.
Click here to download or fork.

Skeleton is one of many ‘dead simple’ css boilerplates. Basically it lets you get going with an HTML project without having to worry about your site being responsive and beautiful.

First download and unpack the Skeleton files in your HTML project. Next, in your html page’s <head> section, point to the skeleton stylesheet:

    <link rel="stylesheet" href="css/skeleton.css">

You will immediately see, that the Skeleton boilerplate affects the looks of your HTML – there are default styles for standard elements such as headings, paragraphs and the like. Skeleton is much more powerful however. Go to the CODE section of the Skeleton website, to see how you can use the boilerplate to generate beautiful layout.

The overall method here, is to follow the structure and classes presented in the reference. I.e Skeleton has a readymade responsive grid layout structure:

<div class="container">
	<div class="row">
		<div class="one column">One</div>
    	<div class="eleven columns">Eleven</div>
    </div>
    <div class="row">
    	<div class="one-half column">1/2</div>
        <div class="one-half column">1/2</div>
    </div>
</div>

Use the structure in your HTML, and Skeleton makes sure it renders to a responsive webpage across all browsers and devices. Simple and elegant.

Pure

Pure is a project from Yahoo developers, that is made up of a very small set of .css files (<4kb). Though it can be minified and g-zipped to an even tinier state, it is recommended to keep the files in a partly recognisable format – these guys know a bit about building css from scratch, so its worth to have a look.

Build a grid with pure.css

#1 include a pure link in an html file:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your page title</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
  </head>

<body>
    <!--
    Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
    -->
</body>
</html>

#2 Make a pure grid

Pure’s grid system is quite simple. Create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes:

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

There are some things to note here: pure-u-* is the standard prefix for all grid columns. 1-3 however means “1/3” or one third of the screen width. The pure grid layout allows you to define unit sizes in either a 5th’s or a 24th’s based grid. As you can imagine this gives you extensive freedom to follow a wireframe design.

This layout would render three column div’s on all devices. Try for a start to add this to your html file. However this layout is non-responsive. To make pure.css act responsively, you use a class convention: md for mobile devices, and lg for large screens:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3">Thirds large screen, full width small</div>
    <div class="pure-u-1 pure-u-md-1-3">Thirds large screen, full width small</div>
    <div class="pure-u-1 pure-u-md-1-3">Thirds large screen, full width small</div>
</div>

“md” is a media-query class, that stands for “medium”. Basically this class syntax mean “use one column full width as default, but for screens larger than medium size, use one-third width”

See the table further down to get an overview of all media-query classes (small-sm, medium-md, large-lg and extra-large-lg).

We can now apply this div/class structure, and see that the text columns actually act responsive. It still looks terrible however – to solve this, we will add our own styling and some more structure. First put a new div around the inner content, i.e class=l-box or similar:

    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="l-box">
                Thirds large screen, full width small
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="l-box">
                Thirds large screen, full width small
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="l-box">
                Thirds large screen, full width small
            </div>
        </div>
    </div>

Next, let’s add a custom stylesheet to the html file:

<link rel="stylesheet" href="css/styles.css">

And then, in this stylesheet, add some background color and padding to the inner boxes:

.l-box {
    background-color: lightgray;
    padding: 1em;
}

Good! We now have a responsive grid, and using the conventions from pure.css, we can rather easily create responsive grid layouts. Refer to the following spec to apply responsiveness to grids.

KeyCSS media queryAppliesClassname
NoneNoneAlways.pure-u-*
sm@media screen and (min-width: 35.5em)≥ 568px.pure-u-sm-*
md@media screen and (min-width: 48em)≥ 768px.pure-u-md-*
lg@media screen and (min-width: 64em)≥ 1024px.pure-u-lg-*
xl@media screen and (min-width: 80em)≥ 1280px.pure-u-xl-*

Task: build this grid

This task will give you a small feel for what it is like to work with a CSS boilerplate. Take a look at the following …

The Bulma css boilerplate

Bulma is a relatively new css framework that aims at replacing the super extensive “Bootstrap” project, by using pure CSS to support great features without opinionating too much on your graphical preferences.

To get started with Bulma, use the HTML template below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Now, as you can see Bulma consist of a stylesheet and some fonts. You can already get a feel of how it functions by taking a peek at the structure within the body tag. section.section and div.container are central to how Bulma works. If you were to remove the <section> tag, you would get a page without padding – so basically in Bulma, most content lives in sections.

Mobile first, responsive first

Bulma is responsive “out of the box”. It means you have very simple class structures, that will provide you with a useful webpage without having to write any css at all. Let’s take a look at the Bulma grid layout for example. Try to include the following in your page:

<section class="section">
<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>
</section>

Now, try resizing your webpage. As you can see, the columns act responsively – simply because they live inside a container – <div class=”columns”> and have the .column class individually. Try adding or removing a column – as you can see the webpage architecture adapts.

There is only two responsive features though – as you can feel by dragging the websites width, the columns either come in four or one column. We will solve that shortly, but first let’s add some more styling to the columns, so we can get a better overview of how Bulma class lingo works.

Put a new div around the content of the first column, using the following classes:

      <div class="column">
        <div class="notification is-warning">
          First column
        </div>
      </div>

As you can see, the column now get a background color and rounded corners. This is because of the “notification” and “is-warning” classes.

Adjusting column widths

Try adding “is-half” to the class of one of the columns. As you can see this column now fills half the screen on desktop – but still conforms to mobile when resized.

Here are the options you can use for controlling the width of columns:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Responsive columns

Columns responsiveness is controlled with the is-* operator. is-mobile, is-tablet, is-desktop and is-widescreen will allow you to control when and how your columns should stack or align horizontal.

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:

<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

You can also add the -{mobile, tablet, desktop, widescreen} at the end of dividers:

  <section class="section">
    <div class="columns is-multiline">
      <div class="column is-three-quarters-tablet is-half-desktop">
        <div class="notification is-warning">
          First column
        </div>
      </div>
      <div class="column">
          <div class="notification is-success">
          Second column
        </div>
      </div>
  </section>

Give it a try and experiment with column layouts – btw, should you have class declarations that add up to more than full screen width (three-quarter, one-half), use the .is-multiline class on the

Nesting Columns

One other cool feature in Bulma, is that columns can be nested:

  <section class="section">
    <div class="columns">
      <div class="column is-half">
        <div class="notification is-warning">
          A column with some children
          <div class="columns">
            <div class="column">
              <div class="notification is-success">
                Second column
              </div>
            </div>
            <div class="column">
              <div class="notification is-info">
                Third column
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>

Learn more about Bulma column layout in the reference.

Click here to see a list of all color helpers

Tiles

In fact Bulma columns are not the least fun compared to tiles! Check out the following structure:

<div class="tile is-ancestor">
  <div class="tile is-4 is-vertical is-parent">
    <div class="tile is-child box">
      <p class="title">One</p>
    </div>
    <div class="tile is-child box">
      <p class="title">Two</p>
    </div>
  </div>
  <div class="tile is-parent">
    <div class="tile is-child box">
      <p class="title">Three</p>
    </div>
  </div>
</div>

The lingo is a bit hard to learn though. But it goes like this:

The tile element has 16 modifiers:

  • 3 contextual modifiers
    • is-ancestor
    • is-parent
    • is-child
  • 1 directional modifier
    • is-vertical
  • 12 horizontal size modifiers
    • from is-1
    • to is-12

You nest tiles into each other by specifying whether your tile is an ancestor (surrounding container) a parent (including one or more children) or a child (being inside a parent).

You need at least 3 levels of hierarchy:

tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child

But you can, however, nest tiles deeper than that, and mix it up!

tile is-ancestor
|
├───tile is-vertical is-8
|   |
|   ├───tile
|   |   |
|   |   ├───tile is-parent is-vertical
|   |   |   ├───tile is-child
|   |   |   └───tile is-child
|   |   |
|   |   └───tile is-parent
|   |       └───tile is-child
|   |
|   └───tile is-parent
|       └───tile is-child
|
└───tile is-parent
    └───tile is-child

Check out much more tile features in the Bulma reference.

Wrap-up Bulma

Bulma is a full featured, strong CSS framework. the next level of using Bulma is to take advantage of the npm module – and to use SASS to define your own defaults and mixin’s. But that’ll be in some other tutorial. For now, go ahead and try making a website with the standard features.

Other minimal CSS boilerplates

Pure CSS
Milligram
Mini CSS

…and surely many more – look around, see what suits your needs.

Materialize.css

The Materialize boilerplate is supported by a github repository with an example.
Click here to download or fork.

While Skeleton seeks out to be as minimal, simple and easy to use as possible, other CSS boilerplates aims to give you more features. Materialize which builds loosely on Google’s material design guidelines is such a framework.

https://materializecss.com/

Materialize comes with an extensive set of features. On top of the CSS boilerplate, Materialize also has a javascript library that needs to be installed in order for more complex features to work. First, include the following links into your html page:

 <!-- Compiled and minified CSS - lives inside the html <head> tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript - goes right before the ending </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            

Hence Materialize gives you more freedom and features, it also suffers from being a bit more tricky to use. As an example let’s take a look at the built in layout “cards”:

<div class="container">
  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

All content elements must reside in a “container” div. From there on the layout structure is organised in rows and columns. If you take a peek at line 3, you will see a lot of weird classes there:

<div class="col s12 m6">

“col” is straightforward, but what about “s12” and “m6”? As it turns out, Materialize gives you a naming convention that renders into the CSS viewport structure – “s” stands for small screen (mobile device <= 600px) while “m” is for (tablet device 992 <> 600px). The basic grid in Materialize is made up of 12 columns, so “s12” basically means “let column be full width for devices less than 600px”. While “m6” will result in tablet devices displaying the content in 50% width.

As mentioned, Materialize is comprehensive. But dive into the reference get inspired, and you will be surprised of the many cool features, such as image carrousels, parallax effects, footer, navigation and menu structures and much more.

Alternatives to materialize.css

Bootstrap
Foundation
Bulma

And surely many more – check out this post for instance

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *