Write your own CSS

When I don't want to use a front end framework like Bootstrap for a project, I usually just take chunks of code from different open-source repositories and put them all into one stylesheet. I often prefer to work this way because I know in my mind that everything in my CSS to one extent or another is being used or will be somewhere on the page, and I feel like everything's a bit more optimized.

I'm going to show you how I build up a stylesheet like this, first off by listing some essentials you'll want to include before anything else:

Normalize

It doesn't have to be normalize.css, any CSS reset will do, that's just the one I use and prefer. But what's a reset you ask? It's a collection of styles that render elements more consistently across different browsers. The most basic example of a style you'd find in a CSS reset is one that removes the default margin that a lot of broswers set by default:

body {
    margin: 0;
}

A good alternative to Nicolas Gallagher's normalize.css is Eric Meyer's reset.css, which is a smaller, but more bare-bones.

Reboot

Reboot is a module used in Bootstrap's new version 4 alpha:

Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

If you're not a big fan of using rems (which Reboot sets as a default for the Bootstrap framework), and you'd prefer to use pixels, you can simply write your own. The most important part of this file anyway, is setting the box model for all elements to border-box:

html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

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

Grid

There are plenty of great grids out there, so really it's up to you to decide which to use based on what you need, but here's a couple that I really like:

Bootstrap v4

I know it's still in alpha, but it's really only individual components that are unfinished, the base of the framework is just as good as in version 3 and that includes the grid, which has been vastly improved and simplified in terms of syntax.

The grid is solid and works, that's all that really matters.

Toast

A great alternative to the Bootstrap grid, is Toast, the "Insane, no-nonsense CSS grid". With Toast you can combines as many different set of columns as you want: 6 columns, 8 columns, 12 or even 16 if you're feeling particularly adventurous.

Some other great features include fixed width gutters (set in pixels), customizable namespaces, nested grids and switchable pulls and pushes.

That's it?

Yep, everything else is completely up to you. Remember the point of this post is not to show you how to build a front end framework, but put together a stylesheet that's hopefully optimized for a specific project that you may be working on.

Also, there's nothing wrong with using a front end framework, they have solid, well-tested code and are also dropping in size. Bootstrap v4 for example, is 30% smaller that the previous version. In fact, I predict that I'll be using Bootstrap 4 a great deal when it's finished. This is clearly just my weird obsession with keeping everything small and speedy.

Part two may come soon, I'll probably list some more component specific projects that I use, but we'll just have to see.

Resources

This article is my 2nd oldest. It is 583 words long