Website Part 4: CSS Stylekits
You’ve finished laying out your website, and it’s time to make it look good — so you pull out your CSS skills and make some cool transitions! Or maybe you like things simple,and just change the colors and fonts around little bit. Many people are happy to write their own complex stylesheets. However, others (including myself) prefer not to dive too deep into the realm of CSS styles, whether it be for time constraints or other reasons. So in this article, I will talk about how to use a CSS stylekit to make your your websites instantly look a lot more 21st century!
In the previous article, I talked about using Jekyll in your websites. Paired with stylekits, the Jekyll can help you quickly make brilliant webpages (take a look at our site at amadoruavs.com). However, the following content applies to any web framework you might be using, as well as raw HTML.
One of the most common stylekits available is Bootstrap 4. I have used it in the past, and I am a fan of the product. It is free to download and integrate to your projects — follow the instructions at its website. However, there are a few minor problems I was having with Bootstrap:
- Too uniform — Bootstrap-made websites all look very similar, to the point where one can tell while browsing the web if the site used Bootstrap.
- The themes that can change up styling generally cost money.
- Heavy — although it is unlikely to cause you slowdowns, Bootstrap integrates a lot of JS in addition to its CSS, making it on the heavy side of frameworks.
- The API keeps changing every time they release a new major version — porting my old Bootstrap 3 projects to 4 wasn’t hard, but definitely a bit annoying!
For these reasons, I decided to try something new for a change. While searching, I found Bulma. Bulma is conceptually very similar to Bootstrap — it uses the same column based layout to make your websites look great on all types of devices, as well as many of the same components. Outlined below are some of the biggest features of Bulma:
- Columns — You can arrange your divs and other elements in columns (up to 12 over the width of the page) that scale automatically to the size of the audiences’ screen.
- Mobile friendly — Bulma columns are designed to rearrange themselves for clean mobile support. This, along with other mobile-friendly features, makes developing for mobile very easy.
- Modern presets — Cleaner default fonts, margins, etc. make for a much more modern user experience with no extra developer work.
- Widget styles — There are a lot of built in classes for nicely styling navbars, forms, tables, and more!
- Easy naming schema — Like Bootstrap, the class names are very easy to understand, IMO even better than Bootstrap 4.
- No JS — Unlike Bootstrap, Bulma doesn’t ship with any Javascript. While JS makes for some cool features, it is also (relatively) heavy. This makes Bulma is a lighter framework than Bootstrap.
- Modular — Bulma also has an option to include only the parts of the framework that you need, making for an even lighter website!
Setup
Although I won’t go through the actual usage of Bulma (see https://bulma.io or the other hundreds of online tutorials), let’s see how to include it in your project! It is surprisingly simple.
NPM:
Node.js users can simply use Bulma by installing it through npm: npm install bulma
Web CDN:
Add the following link to your <head></head> element: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
Download source:
You can download the source from: https://github.com/jgthms/bulma/tree/master/css
That’s it. You can now start styling your webpages almost no work!
