CSS Frameworks

Those of you who are more organized may have developed your own set of base CSS files to use as foundation for your projects. This method works, but let’s face it, this is not the most efficient way to do things.Creating a CSS framework that is flexible, follows latest standards and is thoroughly tested takes days of work and could become a project in itself. Most of us don’t have time to do this.

To make matters worse, with the rise of mobile devices, making responsive websites and keeping up with the latest technologies is time consuming.

Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization. Thanks to hundreds of hours spent by some developers and companies, we now have dozens of CSS Frameworks to choose from.

Among all the available CSS frameworks out there, Bootstrap is my favorite and also one of the most widely used. It's included by default in Joomla 3, and is wildly popular amongst WordPress and Drupal users. In the last 3 years, Bootstrap's popularity grew over 1,000% and has become by far the most popular CSS framework.

bootstrap

Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps.

Responsive design makes it possible for a web page or app to detect the visitor’s screen size and orientation and automatically adapt the display accordingly; the mobile first approach assumes that smartphones, tablets and task-specific mobile apps are employees' primary tools for getting work done and addresses the requirements of those technologies in design.

Bootstrap includes user interface components, layouts and JS tools along with the framework for implementation. The software is available precompiled or as source code.

Mark Otto and Jacob Thornton developed Bootstrap at Twitter as a means of improving the consistency of tools used on the site and reducing maintenance. The software was formerly known as Twitter Blueprint and is sometimes referred to as Twitter Bootstrap.

gantry5

Gantry 5 (G5 herein), however, represented a new direction. As of the launch of G5, the Gantry platform became more or less two distinct platforms. G4, as far as I can tell via various RocketTheme blogs and mentions, will remain supported by RocketTheme, and perhaps even developed further. I sense they may well kind-of wish they could leave it behind and just go on with G5 solely. But, as G4 powers such a massive number of web sites, they likely continue with it for a good long time.

We’re still building out new web sites using G4, as it’s still a superb, incredibly stable platform. But, as RocketTheme has devoted its theming efforts exclusively to G5-based themes (with a fine assortment of attractive G5 themes available as of this writing and scores of G4 ones), it’s only natural that clients are beginning to gravitate more toward these newer themes as desired starting points for their web sites.

What I’d like to do is offer a run-down (fairly brief) of many of the more exciting features of G5, with various commentary suitable for users and developers alike. I’ll try to include some commentary about how any of this differs from G4.

So, what we have in the world of Gantry are two distinct design platforms, G4 and G5, that share a few core similarities (e.g., in terms of how configuring module positions work), but with significant changes in many other areas. Some of the changes are in kind of “Ajaxifying” or visualizing the same sorts of things we had before — and that’s always very nice. The new visual menu editor is a great example of that one, as it’s super-handy to now have this tool to use and should save everyone involved a lot of hair-pulling.

Materialize

MUI is a lightweight CSS framework that follows Google's Material Design guidelines. It was designed from the ground up to be fast, small and developer friendly.

The goal of the project is to provide a basic set of components and helper methods that developers can use to build sites that are fast and user-friendly. MUI distinguishes itself from other CSS/JS frameworks by focusing on the following features:

  • CSS-namespace to separate framework and app markup
  • Small payload size
  • No external dependencies
  • Automatically attaches event handlers to new DOM nodes
  • JavaScript library can be loaded asynchronously
  • Cross platform support (e.g. HTML Email, React, WebComponents)
  • Extreme hackability

we'll one over 10 Years of experience you always the best guidance

Contact Us