Stylus CSS Grid System

Stack 🔧

  • Pug
  • Stylus
  • Bootstrap 4
  • Gulp

Year 📅

Demo 🎮

Go to the site

Repository 📁

GitHub

This is a grid system based on CSS Grid and Bootstrap. Previously Bootstrap uses only CSS Flexbox.

There is a screenshot of a page with a new grid system based on Bootstrap 4. In the left part of the page is a sticky navigation menu. On the right are headings, text content, and code snippets.

Project Purpose and Goal

The project is an experiment. I wanted to see the difference between CSS Flexbox and CSS Grid and try something new with Stylus.

I used basic classes and functions of the Bootstrap 4 grid system, but changed it and customized it with Stylus variables, mixins, and other preprocessor features. I created a landing page with a visualization of the new grid system and with comments.

Web Stack and Explanation

The stack includes Stylus and Pug for templates. The project is built on Gulp.

The example of module blocks. There is a description of how to use the system under them.

Problems, Thought Process, and Interesting Features

Sometimes I've faced problems because there isn't so good and full Stylus documentation. But Google is a good way to fix it.

There aren't something interesting and extraordinary features on the project page. But in a codebase, you can find a function for the generation of columns in random colors.

What I've learned

This was an interesting and slightly programming experience with Stylus. I've known more about how it works under the hood. And I've learned about a lot of hidden features of the preprocessor.