Blog

I write on blua.blue, dev.to and groups.hyvor.com

CSS Grid or CSS framework - are they really exclusive?

If you search for a CSS Grid-based framework, you are out of luck...

Instead, you will find articles centering around the question of when to use one over the other. But why? In order to understand that, let's look a little into history: In a few days twitter bootstrap will celebrate its 7th birthday. From the very first version on, the CSS framework quickly became the most influential candidate when choosing to design web-layouts. At that time the word responsive was coined and everybody wanted to get in on it. However, browsers weren't really up to par with the growing mobile usage. How did bootstrap do it? In version 1: not at all. In version 2: With float! This meant "hacking" custom margins into first and last children and clearing using the pseudo-class after on the level of the parent. And breakpoints: how about one single breakpoint?

It was solid and browser compatible at the time, but it seems to have set a particular markup in stone: the "row" is a necessary container, the elements themselves decide their size/behavior:

<p>Bootstrap 2.0</p>
<div class="row">
   <div class="span6">col 1</div>
   <div class="span6">col 2</div>
</div>

With version 3 declarative breakpoints entered, making it possible to define behavior for various screen sizes:

<p>Bootstrap 3.3</p>
<div class="row">
   <div class="col-xs-12 col-md-8">col 1</div>
   <div class="col-xs-6 col-md-4">col 2</div>
</div>

This form of markup never changed. The CSS world has moved to flexbox and more breakpoints dictate more capabilities, but all frameworks you will find will likely use similar markup, creating HTML like this:

<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-4">col 1</div>
  <div class="col-xs-12 col-md-6 col-lg-4">col 2</div>
  <div class="col-xs-12 col-md-12 col-lg-4">col 3</div>
</div>

And we all think that's normal and are used to fighting with our HTML on multiple class-declarations when making changes to our column-behavior.

Enter CSS grid

With modern capabilities, one would think meanwhile a couple of revolutions would have occurred. But no, we still write grids like that. CSS grid works way easier than that. So easy, that people seem to either supplement frameworks with native CSS grid or avoid CSS frameworks all together. However, aren't there way too many things in modern CSS frameworks you wouldn't want to live without? Why aren't there any frameworks built around this concept?

Revelation 1: Tailwindcss

Tailwind

If you haven't heard of tailwind, you are behind. The concept has such an impact on the way we design the web, many of the utility class concepts are now part of popular other frameworks. And if you understand how to use tailwind, it is already 80 % of what we want to talk about today: a framework-builder rather than a framework. Why? Because utilizing plugins and preprocessors the right way let you build whatever you need. So combining tailwind with CSS-grid and using your own compositions (in tailwind referred to as base styles) should do the trick? Kinda. The problem is more from a practical perspective: Plugins, Webpack, postCSS, and additional markup is a lot of work for starting a project while using it "out-of-the-box" a rather tedious task due to the amount of classes you write. It's still the coolest thing out there, but unfortunately not approachable for the casual user or beginner.

Revelation 2: Gaudiamus-css

Gaudiamus-css

The concept of Gaudiamus is to expose relevant variables to enable a relatively simple way to modify and even create utility classes. While not as powerful as tailwind, it has two features that stick out:

Grid

We talked about this a couple of paragraphs above: the way we define grid-systems is painful. Integrating CSS-Grid into a framework enables you to convert the "bootstrap-way" of writing this:

<div class="row">
   <div class="col-xs-12 col-md-6 col-lg-4">col 1</div>
   <div class="col-xs-12 col-md-6 col-lg-4">col 2</div>
   <div class="col-xs-12 col-md-6 col-lg-4">col 3</div>
   <div class="col-xs-12 col-md-6 col-lg-4">col 4</div>
</div>

Into this:

<div class="grid-12 md:grid-6-6 lg:grid-4-4-4">
   <div>col 1</div>
   <div>col 2</div>
   <div>col 3</div>
   <div>col 4</div>
</div>

Class constructor

Secondly, it is very simple to create your own CSS with the use of provided sass-maps. You want a particular color to be named "danger" and generate utilities for it? No problem, setting to variables will generate classes like

  • text-danger (color)
  • bg-danger (background color)
  • b-danger (border)
  • hover:raise-1-danger (on hover, provide "danger"-colored dropshadow with a depth of one spacing-unit)
  • ...

In the last step, we can create compositions based on regular SASS:

.btn {
   @extend .b-1, .b-rounded, .p-x-2, .p-y-1;
}
.btn-danger{
   @extend .btn, .text-white, .bg-danger;
}
// you can also use the generate-classes mixin to generate 
// all variations of all colors & states, but let's keep it simple here

The result is easy to use and requires only basic knowledge of SASS (here scss to be precise). Check it out!

image

CSS Grid or CSS framework - are they really exclusive?

Grid-based or framework - there are many articles about this choice. But why is that even a thing?

image

Scaffolding REST APIs with JWT authentication

Ever had the need for your own backend while developing your web-app?

image

What is composer?

Composer has become PHP's package & dependency manager. Why you should use it.

image

MySQL: ERROR1364 fix

The painful realization of why people use containers.

image

Cyber wars: Defending your server

Maintaining your own server can be a thrill. High security standards can protect you from data leakage, injection attacks and DDoS attempts. But what about adaptive brute force?

Git: globally change GitHub-remotes from git@ to https

Does your IDE or composer set remote repositories to ssh rather than https? Or are repositories you are using set up that way? You are not alone. Let's fix it once and for all!

VueJS & neoan3: a love story.

Setting up neoan3 to play nice with Vue isn't hard. Here is how the two frameworks are combined to support fast, dynamic and rapid development.

image

MySQL in PHP - how to deal with databases

How I handle MYSQL database transactions in PHP

Install PHP 7.4 on Ubuntu

Finally PHP 7.4 is out! You have read about the new features, you have followed externals, you have gathered ideas on how new capabilities will save time. Let's get it running.

How to install global npm packages without sudo on Ubuntu

Running npm on a server can be painful. Privileges are there for a reason, and so is sudo. Running npm with sudo is not the solution.

image

Static content pages - still the fastest web-experience

Tutorial: How to utilize blua.blue to generate static content for your website.

image

blua.blue PHP SDK

Create your own blog.

image

dev.to plugin for headless CMS blua.blue (part 2)

A solution to supplying plugins to blua.blue

image

Cross publishing to dev.to

How to publish your content to dev.to from blua.blue - hopefully

Transformer - falling in love with PHP's magic methods all over again

PHP's magic functions have been around for a long time. But there were always good reasons to avoid them. Transformer is a practical and reliable way to make use of the most common operations we program: CRUD operations.

The Uselessness of Pre-Assessment

After almost two decades in the industry, new jobs will still ask you for "assessment tests". A little rant...

image

SEO strategies for blua.blue

How to get your content listed where you want it to.

image

How to Build an Express App in Node That Reads From a Headless CMS

A headless CMS lets you design your own front-end, sometimes your own back-end. Let's set up a small application to get us started. Beginner friendly. Approx. 20 min. to reproduce / follow along

image

Help us document neoan3

Over 4000 brave developers are exploring the framework on their own.

image

When politics kill innovation

How misunderstood diversity killed the PHP Central Europe Conference for good.