With the ever-expanding horizon of technology, the responsiveness of web design has evolved many folds with the introduction of more durable and easy-to-use CSS frameworks.
A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from the scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
Materialize
Source: Youtube
Materialize employs the design philosophies of Google’s Material Design. For those of you who are not familiar with this, the specification centers on the simple yet meaningful philosophy of modern UI design. It focuses on how user experience elements behave and interact visually. It came into existence in order to bring uniformity to Google’s UI on all platforms including the web, and not just Android.
The specification outlines the general principles relating to visual elements and discusses how physics, light, space, momentum are to be used. It then provides concrete examples and requirements for specific elements, e.g. buttons, lists, tabs, cards, etc.
Given that Materialize is an implementation of Google’s Material Design, elements are designed around a 3-dimensional space and utilize motion heavily. This means that along with having a width and height, elements have a depth and move in specific ways. This is key in assisting the user to understand the context of function using familiar visual cues.
While simple, these visual guests are effective – for instance, the ripple effect when interacting with elements is pretty neat, if you haven’t had a chance to see this in action I suggest you do. I also prefer the way form components behave as they provide better use of screen real estate. This again comes down to Materialize being built against the Material Design framework where this stuff really matters..
Materialize is shipped as a CSS + JavaScript framework, though the CSS portions are written in Sass.
Materialize implements a familiar 12 column grid system for element layout. The grid system for Materialize has 3 intervals (<=600px, <=992px and > 992px).
Looking at the UI components available, Materialize doesn’t have as many as Bootstrap. However, there are a few components Materialize has that Bootstrap doesn’t. These include:
- Toasts
- Modals that are fixed to the bottom of the window
- Parallax
Documentation and plugins are limited for Materialize; however, given that this is a fairly new framework, which was built by four guys from Carnegie Mellon University, it is to be expected. The framework is also fairly solid and I haven’t found any issues yet using most modern mainstream browsers.
In relation to browser compatibility, Materialize works with modern browsers, however in relation to Internet Explorer, it is limited to IE10+, which may be a serious consideration depending on your specific application requirements.
With the introduction of each framework, the developer is aided with the ability to customize and approach the whole process in a more planned and structured way with predefined classes.
Flexbox
Source: Webflow
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate all kinds of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
1140 CSS GRID
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors, it becomes fluid and adapts to the width of the browser. Beyond a certain point, it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
960 GRID SYSTEMS
Source: Webfx
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
SUSY
Source: Chromatix
Responsive grids for Compass. Susy is based on Natalie Downe’s CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, WordPress, and more. It even comes packaged as part of Middleman, to make your life easy.
GUMBY
Source: Gumby framework
Gumby Framework is a responsive 960 grid CSS framework that includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project’s lifecycle.
YAML-4
Source: Pinterest
A modular CSS framework for truly flexible, accessible and responsive websites. YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.
How to choose the right one?
Choosing the right framework for my site is far from simple, for several reasons:
1. Every site is different and will require different characteristics. Using a very complete framework for a single page site may give an adequate result, but surely misses out on many resources.
2. Currently there aren’t many significant differences: they’re all very complete and easy to use.
However, we’ll give you some pointers to keep in mind when it comes to choosing a suitable framework:
- Speed of installation: some are very simple to install and start using. Others require more time to configure.
- Ease of understanding: some are a bit of a pain to get to grips with, complicated. Others, by contrast, are comparatively more straightforward.
- Options: some frameworks are more complex than others and offer more configuration options, widgets and interface options. These will allow you to do better things with your site.
- Integration with other systems
Best long-term support: Some digital projects lack continuity in time and updates and support services stop. It’s always better to opt for those that offer continued support guarantees. Many of them are supported by companies that offer other professional products on the market.
Frameworks are a resource that can be extremely useful for many people, but that doesn’t mean they are necessarily useful for you. Now you know what they are, which ones are out there, and the advantages and disadvantages of using them.