For this RWD roundup we will be taking a look through list of frameworks that you can choose from to start help you to start building a Responsive Website.
We all know that a framework is defined as a package which do comprised of a set of structured files and folders that has standardised code such as CSS,JavaScript HTML files and is utilized within supporting the development of websites, as it can be the basis process for you to begin building a site.
In this roundup you will see some frameworks that are complex than others but do offer more configuration options, widgets & interface options and most of these frameworks you may have not heard of yet.
1. Gumby Framework
Gumby Framework is a flexible responsive CSS Framework that is powered by SASS. With this framework you can create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit. It’s built with the power of Sass and as Sass is a powerful CSS preprocessor in which allows us to develop Gumby itself with much more speed and gives you new tools to quickly customize and build on top of the Gumby Framework.
Gumby is developed following the latest standards and specs. In order to stay on the cutting edge, Gumby supports modern web browsers like: Chrome, Firefox, Opera, Internet Explorer 8 – 10
.
2. Motherplate
Motherplate is a bare bones HTML/CSS framework, as this framework is what I’ll typically start off most web projects with. The MotherplateIt framework has included a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.It is not as in depth as something like HTML5 Boilerplate and doesn’t include styled components like Bootstrap.
This framework can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails).
3. Schema
Schema is a responsive front end framework which is easily& quickly can help you to jumpstart your process in building interfaces for the web right out the box.
Schema comes equipped with the capabilities of creating familiar experiences across many viewports. From a desktop monitor down to a mobile device as you will find that the Schema’s 12-column grid provides flexibility for any type of projects.
Schema leverages the power of LESS which means that it enables a clean structure of code that is easy to maintain, whether you’re trying to put a quick design for a prototype, or if you are working on a production ready application, Schema will provides the foundation and components to easily design any responsive web project.
4. Concise
The Concise framework has been built so that you can have a lot of options handed to you straight from the box.
As this framework comes with it’s being built from the ground-up to be mobile friendly framework as it includes a simple grid system, beautiful typography etc.
It is also been built to be a super lean framework that has a bit over 2,000 lines of CSS & a few hundred lines of JavaScript. Concise is specifically been built to be customised.
The whole goal for people using Concise is that they can use the framework to fuel their own creation. The framework comes with very few pre-defined styles, so overriding styles is never a hassle.
5. Crumpet
Crumpet is a simple SASS/SCSS responsive framework that keeps your HTML clean & will stays out of your way. Crumpet been built to make use of placeholder selectors to reduce the size of your HTML markup.
This framework will allow you to create website layouts fast & responsive in a breeze, it’s allows you to have the freedom to do what you want with your code.
Crumpet is easy and simple to hack about and make it your own as everything is straight forward and all of the code is commented which gives you instructions on how to use Crumpet, so you can spend all your time in the code editor.
6. Sculpt
Sculpt is a lightweight, mobile first, responsive HTML, CSS and SASS framework. Sculpt has been written to cater for devices with small screen sizes first, with more complexity being added through media queries as screen real-estate increases.
With three grid sizes (732px, 960px and 1140px) built in and active depending on your device’s screen size you can be sure your content will be well presented no matter the conditions.
7. Skyline
Skyline helps you create a design system for your website. As Skyline encourages a well thought-out CSS architecture & enables you to develop a reusable & maintainable codebase.
Skyline has a starter kit that provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.
This framework has a minimal scaffolding, it does not impose a visual style. It contains many layout and structural helpers, utilities, and basic element and module styles that you will build upon and is really a great starting point for you to get an organized set of files that allow you to create your own custom framework.
8. Material
Material-UI is a CSS framework that has a set of React components that implement Google’s Material Design specification, as Material-UI is available as an npm package. You can use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well.
The styles are separated into 2 less files which allows you to override any variables defined in custom-variables.less without having to modify material-ui source files directly.
9. Cardinal
Cardinal is a small mobile first CSS framework that has some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.
Cardinal provides a new approach to scaling web typography and layout across multiple devices as it’s places little emphasis on pixel-precision, but does’n restrict its usage, Instead, Cardinal leverages modular scale, unit-less line heights, and the power of the REM unit to make it simpler to resize the typography and layout of your entire application for different devices.
10. Pure
Pure is a set of small responsive CSS modules that you can use in every web project. As Pure is tiny as the entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use.
Pure is crafted with mobile devices in mind, it was important to Pure developers to keep the file sizes small & every line of CSS was carefully considered. If you decide to only use a subset of these modules, you can even save even more bytes.
Pure been built on Normalize.css & provides layout and styling for native HTML elements, plus the most common UI components. Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.
