CSS Frameworks

What are CSS Frameworks?

• These are code libraries that facilitate front-end web development.
• CSS plays a large role in these frameworks, because there is always a prominent layout component. Each framework has its own extensive library of classes defined, so you'll spend a lot of time reading the documentation and learning what classes to apply.
• The layouts are invariably responsive grids, with a varying number of columns (the number depends on the framework) and various breakpoints (for different viewport sizes). Bootstrap 5, for example, has 12 columns and 6 breakpoints. Earlier major releases had fewer breakpoints.
• There can also be a JavaScript component, with pre-built interactions such as functioning hamburger menus (for mobile), lightboxes/modals, etc.
• These frameworks do not concern themselves with server-side communication. This sets them apart from React, Angular, Vue, and other frameworks that are heavily JavaScript-based and are focused on continuous server-side communication. In an odd twist, those are often called "front-end frameworks", when in fact the frameworks that are exclusively front-end (not dealing with the server at all) are the CSS frameworks. A more accurate label for React, Angular, and Vue are to call them JavaScript frameworks, because that is their focus.

Why use a CSS framework?

• Support for common use cases. Developers like the frameworks because they offer pre-built functionality and predictable layouts.
• An expected job skill. Employers will usually expect some experience with these frameworks, especially Bootstrap.
• Not having to write so much of it yourself. They are helpful for speeding up development.
• Lower barrier to getting something created. They allow non-programmers and novice coders to create more sophisticated web layouts and experiences.

What are the CSS framework drawbacks?

• You are adding to the page weight. These frameworks end up adding at least 200k of additional code, and possibly much more than that (depending on the framework and how many of the files / options you are loading). If you are just using a small part of the framework, you should seriously consider whether it is worth it. That extra code has an outsize negative impact on mobile devices, especially lower-end phones.
• You are "locking in" the website to that framework. Once you have developed the entire site in that framework, how easy is it to switch to something else? The answer: not very easy.
• Updating existing code to the latest framework version is rare. Frameworks are continually being updated, and developers seldom update the framework to a more recent version. Security holes go unpatched, for example (these would be vulnerabilities in the JavaScript). Mostly this is because it isn't a priority - what they have works, so there is not a pressing need to update. There can also be a fear of a "breaking change", which means that the update breaks something on your site.
• You are still going to be writing your own media queries. No framework will match every situation, every layout quirk or demand, that you throw at it. You'll need to write your own CSS that will override the framework in some cases.

When have you gone too far with CSS frameworks?

• If you ever find yourself using more than one CSS framework in the same website or web application, you need to take a step back and reconsider your approach.
• If you find that a project you inherited is doing that, you should try to clean up the mess and consolidate down to one framework.

Popular Frameworks

• Bootstrap is by far the most popular framework.
• Our focus will be on Bootstrap 5.
• Other frameworks also have their fans, and they are all struggling to chip away at Bootstrap's lead in the market. They include the following (this is a short list; there are many more out there):
  • Bulma
  • Foundation
  • Semantic UI

Bootstrap 5 Example

• A sample layout really needs a full browser window width to show the columns rendering as desired.
• Rather than embed the code, these links will open in new tabs:
  • View the Bootstrap 5 example full-screen
  • View the Bootstrap 5 example in code editing mode
• Resize your browser window as you are viewing the example to see it reflow to less columns or more columns.
• The Bootstrap CSS is called from the head region (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css)
• Although the JavaScript capabilities are not used in this layout, the Bootstrap JavaScript (https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js) is called from the bottom of the file.