The CSS Grid Layout vs CSS Frameworks Debate

With cutting-edge CSS standards like CSS Grid Layout and Flexbox, coding a webpage layout is no longer such a pain.

If you add to this that browser support for both Grid and Flexbox is pretty good too, then the question is bound to come up: Why should I learn and use a CSS framework in my development work?

In this article I will focus on Bootstrap, since it’s arguably one of the most popular among all the CSS UI libraries available out there.

In my view, there are still a number of reasons why it does still make sense to learn and use Bootstrap today.

Here’s a few of them for you.

What Is CSS Grid?

Rachel Andrew, a well-known speaker and writer on all things CSS Grid-related, defines it as follows:

Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it look like you have a grid, you actually have a grid!

The implementation of this CSS standard gives developers the much needed ability to build page layouts with native CSS code, with no dependency from the HTML markup except for the presence of a wrapper element that works as your containing grid. Just imagine the flexibility and the potential for creativity in web design!

For instance, you don’t need custom classes or extra rows in your markup to build this simple layout:

Here’s the HTML:

[code language=”html”]

Header content

Main content

Footer

[/code]

As for the CSS, this is where you’re going to build your visual layout. All it takes in this simple case is a few lines of code:

[code language=”css”]
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 150px 50px;
}

header, footer {
grid-column: span 12;
}

main {
grid-column: span 8;
}

aside {
grid-column: span 4;
}
[/code]

That’s it, you’re done! Not bad.

What Is Bootstrap?

At the time of this writing, 3.6% of the entire Internet uses Bootstrap:

Bootstrap usage.

On the Bootstrap’s website, you’ll find this definition:

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

In other words, Bootstrap gives you ready-made components that allow you to whip up a beautiful webpage in no time.

Just write the appropriate markup, and your app looks great out of the box.

Bootstrap makes it also super easy to customize its look & feel to your liking and lets you pick and choose the bits you need for your project.

Why Bootstrap When We Have Grid?

The biggest complaint about Bootstrap has always been code bloat. The reasoning was that it included lots of extra CSS code that remained unused in your projects. The second biggest complaint was that Bootstrap components were styled in every detail and this could present some problems when it came to override some CSS rules.

Starting with the latest version of this popular front-end component library, both criticisms fall to pieces: Bootstrap is totally modular, therefore you just include what you need. Also, the Sass files are structured in such a way as to make it very convenient to customize the original styles to your needs.

Today, the main reason against using Bootstrap is the fact that with CSS Grid, CSS has a grid system of its own, which doesn’t have any external dependencies and once learned enables devs to build all sorts of layouts with relative ease.

Although I’m a CSS Grid fan, I think Bootstrap has still its place in front-end development and will have for some time to come.

Here are at least three reasons why.

Continue reading %The CSS Grid Layout vs CSS Frameworks Debate%

Powered by WPeMatico