CSS

All about styling with CSS

Todo: add more subjects

Animation

Make use of the folowing properties, to prevent paints and ensure GPU acceleration:

  • Opacity
  • Translate
  • Rotate
  • Scale

Tools

Reset or Normalize

Box-sizing, use it!

Just use box-sizing, on everything. It's available in all new browsers and it's awesome! Block elements (like divs) will be way more predictable when you apply it to all elements and is recommed by Paul Irish and Chris Coyier. You know how hard it is to align forms? When you use this, it won't! Just do it already!

*, *:before, *:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

More resources about the subject:

Using em for everything

  • Using ems, use it for everything.
  • Using ems for mediaqueries.

In pure CSS it can be a little time consuming, calculating everything. But with Sass it can be quite easy using this function:

@function em($target, $context: 16) {
    @return ($target / $context) * 1em;
}

h1 {
    font-size:em(30);
}

It's also possibly to use this approach inline like this:

h1 {
    font-size:(30 / 14) * 1em;
}

More information about Calculating EMs with SCSS.

Vertical rhythm, the basics

Or baseline, is very important for the balance and readablity of a webpage. Below you can find a little example (which only works in combination with reset or normalize, of course):

body {
    font-size: 100%; 
    line-height: 1.5em; 
}

h1 {
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 0.5em;
}

p {
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

Todo: add more notes and information.

Also check out Modular Scale, which also has a Sass implementation: Modular Scale Calculator.

Some technical information about collapsing margins and some tricks to use can be useful.

Modulair CSS

Several approaches are available to write modulair CSS (it's a way of working, not a tool):

Grids

CSS Grid

Using a framework

There's a lot of choice, below a little overview with well-known frameworks you can build upon:

Building your own grid

Some interesting approaches for settings up your custom grid:

Some background information about grids and using types:

A nice micro clearfix hack:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Created by Nicolas Gallagher

Preprocessors

Sass

Todo: add some more information about Sass. For now, read this: Sass Style Guide on CSS-Tricks.

Nice libraries:

  • Bourbon Lightweight mixin library for Sass.
  • Bourbon Neat Lightweight semantic grid framework for Sass.
  • Bourbon Refills Prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.
  • Jeet Grid system
  • Plumber adding vertical rhythm to your page.

AbsurdJS

This preprocessor is quite different from the others. Most other preprocessors are written for CSS alike formats. AbsurdJS uses a JSON format, which is what makes it so powerful. You can use JavaScript! Besides styles in JSON and JavaScript functions support it also renders very very clean CSS. For big projects this can make a lot of difference.

LESS

It's a very basic preprocessor, when you're a performance user you'll probably be better of with Stylus or Sass. When you're not, probably too, Sass is okay, Stylus is awesome.

Stylus

CSS preprocessor built on NodeJS, so quite easy to install and intergrate in your workflow. Nice tutorial on tutplus.

Modernizr

Working with Modernizr can also be quite helpful when you need to support prehistoric browsers. With this tool you can detect functionalities/features, like SVG-support, media-queries or even box-sizing. When it doesn't, you can load a shiv (some javascript) to implement a fallback.

Misc.

Parallax

Icons

CSS3

Optimize

Fun

Spinners and loaders

Last modified on August 14 - 2020, 12:01:50.