Backgroud of HTML and CSS

We’ve slowly built up our knowledge by learning:

• The basics of how HTML and CSS work together to build layouts.
• The way these layouts can be made responsive with the help of media queries.
• The concept of the CSS column grid—the traditional approach to streamlining web layouts.
• How to build a responsive CSS column grid.

We are equipped with enough knowledge to build web layouts mostly on our own.

This is the way that most web developers use to develop their sites.

However, as they got better at their craft, they started noticing that certain sections in the websites they built kept on appearing repeatedly.

For example, each website needed to have navigation, and the usual place for the main navigation on most websites turned out to be the horizontal bar at the very top of the page.

Similar to the navigation, some other components on web pages appeared again and again:

• Alerts
• Carousels
• Modal windows
• User-friendly buttons
• Hideable content (accordions)

Some of these developers realized they’d be able to build their website projects faster if they had some prebuilt HTML and CSS code (sometimes, this code even involved some JavaScript). This is, more or less, how front-end CSS frameworks were born.

Benefits of CSS frameworks

A CSS framework comprises a number of predeveloped code snippets that gives its users a number of predefined components, such as a navigation bar, a drop-down button, or a number of HTML form inputs, all styled so that they fit together into a cohesive whole.

Some of the benefits of using a CSS framework include:

• Not having to write everything from scratch each time a new project is started

• An easy time understanding other people’s code (if they used that framework) this is great for teams.

• Faster development times and increased productivity

• Code consistency

• Having numerous tutorials on dealing with difficult-to-solve issues

Disadvantages of CSS frameworks

Some of the disadvantages of CSS frameworks include:

• Lots of redundant code (code bloat)
• Slower download times
• Hard to produce unique designs
• Learning curve

If a layout needs to be unique, sometimes you need to override the framework’s styles and add your own.