Doughnut 2 has been served up!

Doughnut 2 now comes with 2 toppings to suit your needs better! Glazed or Sprinkles.

  • Glazed will be your plain simple Doughnut. Glazed uses pre-defined column names and requires no additional tools to get started or compiling.
  • Sprinkles will give you more flexability on your naming of column classes (as with the original version of Doughnut). Sprinkles will requires some additional tools.

Why Doughnut?

Doughnut is a simple, easy to use, responsive CSS boilerplate, built using Sass, which can help kickstart any project into life

Generally most projects don't need all the complexities of the larger frameworks, which makes Doughnut a great solution for you. Based around our grid system, Doughnut only styles a small selection of common HTML elements as this is more than often enough to get you started. This also allows you full flexibility over your design.

Getting Started

To get the most out of Doughnut you will need to a way to compile Sass. I use Jekyll to buld a lot of sites, but we have also found Prepros to be a fantastic stand alone app which works on Mac and Windows. Microsoft also provides a Web Compiler for Visual Studio which works a treat. If you don't want to compile Sass, I have included the "glazed" version of Doughnut which includes preset column names.

So, you're happy to compile Sass, now you will need to get your hands on Doughnut.

  1. Once downloaded you will need to add the _sass folder to your project.
  2. To get you started I have included a main.sass file in the assets folder.
  3. Use this main.sass file to create all your styles, or...
  4. ... create separate files using the _components.filename.scss for each component.

Using the _components.filename.scss method will allow you to create a much more maintainable codebase. Find out more...

Grids the basics

.col.main

To get started create yourself a .container, then add a .row finally slap in our columns. It really is as easy as 1-2-3!

        
          <div class="container">
            <div class="row">
              <div class="col main">
                 <!-- add content here -->
              </div>
              <div class="col sidebar">
                 <!-- add content here -->
              </div>
            </div>
          </div>
      

Next you will need to build up you CSS classes and this is where doughnut really shines. By using [email protected]` and one of our predefined placeholders in you class, you can create meaningful layout classes, and only use the sizes you need. You are also able to hide classes across the different breakpoints.

        
          .main {
            @extend %col-10;

            @include desktop {
              // add your desktop specific decelerations here.
            }

            // add your decelerations here.
          }

          .sidebar {
            @extend %col-6;

            // add your decelerations here.
          }
      

Doughnut has been created with "Mobile First" development in mind. This basically means all styles outside of media queries will apply to all devices, larger screen sizes are then targeted for enhancement. This helps to prevent smaller devices having to parse tons of unused CSS.

Nesting

.col
.col
.col
.col
.col
.col
.col
.col

Nesting grids is possible within Doughnut, and is just as simple as using the rest of Doughnut. As you can see from the code snippet below, and the actual example above, it is as simple as adding in the columns into the columns.

I wouldn't recommend nesting too many columns though.

        
          <div class="container">
            <div class="row">
              <div class="col half">
                <div class="col">
                   <!-- add content here -->
                </div>
              </div>
              <div class="col half">
                <div class="col half">
                   <!-- add content here -->
                </div>
                <div class="col half">
                   <!-- add content here -->
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col half">
                <div class="col">
                   <!-- add content here -->
                </div>
              </div>
              <div class="col half">
                <div class="col half">
                  <div class="col half">
                     <!-- add content here -->
                  </div>
                  <div class="col half">
                     <!-- add content here -->
                  </div>
                </div>
                <div class="col half">
                  <div class="col half">
                     <!-- add content here -->
                  </div>
                  <div class="col half">
                     <!-- add content here -->
                  </div>
                </div>
              </div>
            </div>
          </div>
      

Flow

.col.half.flow
.col.half

Add the class .flow to columns when you want content to display first on mobile but appear on the right on larger screens.

        
          <div class="container">
            <div class="row">
              <div class="col half flow">
                 <!-- add content here -->
              </div>
              <div class="col half">
                 <!-- add content here -->
              </div>
            </div>
          </div>
      

More examples...

.col.c3
.col.c13
.col.monkey / 4 column
.col.banana / 12 column
.col.ying
.col.yang
.col.callclasses
.col.anythingyouwant

Above are some additional examples, which show you can call your classes anything you really want.

This allows you to move away from presentational names like .half because they become meaningless if the layout changes in the future. Think of it like this: a .half column is no longer a half on mobile.

It would be far better to name your classes something more descriptive like .main or .sidebar. By removing presentational classes like .half from the markup and replacing them with a more semantic and structured approach, we end up with a much more maintainable our CSS library.

Typography

CSS3 introduces the rem unit, which stands for "root em". The `rem` unit is relative to the font-size of the root element `<html>.

Architecture and namespaces

Dougnut has been build with a modular concept in mind, which not only imporves a sites maintainability, but can also speed up page load times.

Settings

CSS custom properties, custom media queries, and other pieces of code which do not directly output CSS classes themselves. Things like brand colors, modular spacing increments, and breakpoints are defined as variables here.

Elements

Styles that target bare HTML elements. This mostly consists of normalize.css, and core typographic styles for things like headings, body text, and links which will rarely, if ever, change. No classes are defined here.

Objects

Context-agnostic classes that serve to define high-level structure and layout; this includes grid objects (containers, rows, and columns) and the media object.

Components

Context-specific classes that generate distinct components of an interface (for example, buttons). This is largely limited to buttons and (lightly styled) custom form inputs. Components use the `c-` namespace.

Utilities

Structure- and layout-related classes that do one thing extremely well. These styles are highly granular, and can be combined with surface classes (see below) to construct ‘generic’ UI objects. Utilities use the `u-` namespace.

Class naming structure

Class names in Doughnut are defined with a simple structure. The class name should start with the appropriate namespace, followed by the name of the class. Child classes repeat the parent’s class name, and append a single hyphen, followed by the child name. Modifier classes are appended with two hyphens and are rarely used.

<namespace>-<className>[-<childName>||--<modifierName>]

For example, the below button is a component so starts with "c-":

        
          .c-btn {
            border-radius: 3px;
            cursor: pointer;
          }

          .c-btn-icon {
            padding-right: 0.5em;
          }

          .c-btn--round {
            border-radius: 50%;
          }
      

Browser support

Browser testing no longer means attempting to make a website look the same in browsers of different capabilities or on devices with different size screens. It does mean ensuring that a person’s experience of a design should be appropriate to the capabilities of a browser or device.

With this we have designed Doughnut to work in current versions of the major desktop and stock mobile browsers. We have even checked Microsoft Internet Explorer 11 (Windows).