### Respond-to

I am so thankful for this mixin by Snugug: it's a great way to configure your global breakpoints and the best part is that you give each breakpoint its own name. Differentiating things with names is so much better than with pixels. This also gives you a good overview of all widths used and a central place to change the behavior.

## Setup Basic Variables

### Create Color-Sheme

Handling variables in a scalable front-end is often a philosophical question. In my case I have a workflow for it that suits me well. First we create a color palette with all available colors and give them normal identifying names.

### Point out the Corporate Colors

After we have a good palette with all available colors we should point out the corporate or main colors of the project. With this step it's possible to create a brand new theme for the project without wasting time adapting the colors in your whole files.

### Setup

Setup some basic configuration like global font-size, font-families or the basic font-color in a configuration file - for example in a file called _config.scss, which is in your folder _basic.

## Layouts

### Flexible Grid

There are many many grid systems in the world, but the grid by PureCSS is, in my eyes, one of the best. I took up the idea behind it, did some magic with Sass that let’s me create column classes quickly and build a grid for small, medium and large viewports.

#### Why have grids for different viewports?

It’s super easy to change the responsive behavior of an element. You define the behavior once for the module, but if you have other behavior at some point, than you create a modifier like .m-text-with-asset--large

At mobile you will get a full-width column, beyond 480px viewport a half column and over 768px a third column.

### Layout-Helpers

Most websites (sweeping statement) have a centered container. This isn’t always the case though, so because of this it's useful to create a helper:

#### Clearfix

If you don't use flexbox as your layout-engine of choice, then you will use floats. It's imperative to clear floats, because otherwise the whole layout can be ruined.

#### Handling specific distances

Where I see consistent spacing in a layout design I use helper classes for keeping measurements true.

## Setup Icons

### Create an Icon Font

Do you prefer a online font-generator or do you use a command-line interface for generating fonts? I prefer an online solution, the tool of my choice being fontastic.me. There is a great overview of all your fonts, you can choose how the class- or character-mapping should be.

### Setup Class for Each Icon

Now let's start to create classes for your icons. I won't show you the basic styles of each icon. You can handle that by yourself, but this can help you with the basic icon-setup.

## Don’t Build Pages. Build Modules.

Do you know what I mean? When I first began as a CSS developer I built everything based on the designer’s page, but what if you need one module on another site? Because of this it's important to build closed modules without the layout around it.

### Give Your Module a Good Structure

Create a file for your module and put it in the folder _modules. At the top of the file you have a configuration area, where you define colors or other aspects that will affect the theme.

Under the configuration you will define the module with all styles. Use comments well, in order to simplify the module.

## Conclusion

Feel free to fork the repository which holds all the code seen in this article. I hope that it helps you to build a better scalable front-end in real-world projects Please share your thoughts and ideas with me in the comments.