In the world of web development there are front-end frameworks, which enable creating useful and innovative websites and web applications much easier and faster. Such framework as Bootstrap is definitely one of the most prominent ones. It’s popular, well-known, and really helpful in creating beautiful and responsive web designs.
There is a list of reasons why Bootstrap is so popular among developers:
easy to get started
superb grid system
rapid development process because of numerous templates available
Nextended base styling package with most HTML elements (typography, buttons, icons, forms, images, tables, and much more)
easy integration with other frameworks and platforms
helpful and extensive documentation.
However, when you want to create something simple and straightforward you don’t need to use the whole package of utilities Bootstrap offers. What you need is something less complex. If you are looking for a framework like that – here’s a list of 10 options for you.
Skeleton is lightweight CSS framework and is excellent for some small projects when there is no need to use all the utilities Bootstrap offers. It defines itself as “dead simple, responsive boilerplate”. Skeleton has its well-structured grid system and some basic styles for common HTML elements, such as buttons, lists, tables, and forms. It provides truly responsive design as well as mobile-first approach.
Skeleton offers CSS best practices, code limited to around 400 lines with comments, 12-column fluid grid, and easily customizable base styles. It is not UI framework and it provides only basic UI elements but is able to adapt to any style or design. Surely, Skeleton has got its limitations – it barely provides something more than basics, but it’s simple and fast to start, which is often enough for a good jump-off.
Concise CSS is one more lightweight front-end framework, which is alternative to Bootstrap. It supports Vanilla CSS and SASS and at the same time maintains LESS and Stylus versions, which are currently unsupported. It is lean, bloat-free, and easy-to-use. Concise CSS is mobile-friendly and intended to be used for creating responsive web sites and web applications. The framework offers a number of add-ons, such as bonus components. In addition, it is easy to update because all you need to do is replace the core files, while your custom styles stay untouched. In general, Concise CSS is good for the beginners because of its easily readable documentation and light utilities package.
Cardinal CSS is a built with a focus on performance and scalability. It is minimalistic, fully modular, and its motto is “build more with less”. Cardinal CSS finds its purpose in making the process of prototyping, building and maintaining CSS for responsive websites and web applications much easier.
It includes simple and flexible responsive grid system, scalable typography, styles for common UI objects (buttons, tables, and more), and common layout modules. It also implies the usage of rem unit to resize typography and layout of your application at different breakpoints. Cardinal CSS serves as a base for the project, leaving such things as design and creativity up to developer.
Furtive is a mobile-first CSS framework. It is called a micro-framework, and it focuses on creating small web applications and websites. Its small footprint includes responsive grid, buttons, tables, colors, forms, media objects, and other design elements. It is capable of using such forefront web standards as Flexbox, SVGs, and limited vendor prefixing. It also uses rem unit for sizing elements. However, this framework doesn’t support older browsers and gets along with modern web designs. Furtive states that it is “perfect starting point to get your project up and running”.
Developed by Yahoo, Pure is a framework, which consists of small and responsive CSS modules. It is so tiny that all its module clocks minified, gzipped, and put together weigh even less than 4.0KB. Pure has a responsive grid and its elements may be customized regarding your needs.
What is more, Pure is built on Normalize.css, which enables its consistency and compatibility with different web browsers. Its CSS modules can be used for creating web forms, responsive grids, buttons, tables, menus and so on. Moreover, Pure offers styling and layout for native HTML elements and the most common UI components. It is responsive to the full, so you will get a great look whatever device you are using. In addition, it provides its users with helpful and extensive documentation.
Milligram is a truly minimalistic framework. It weighs only 2KB gzipped. Milligram won’t serve as a UI framework for you. What it can offer is minimal setup of styles along with clean and fast start. This lightweight framework includes such basic elements as buttons, lists, grids, tables, block quotes, typography, codes, and utilities. It is designed to make performance and productivity better, while using fewer properties to reset. Milligram works with modern UIs and officially supports new versions of such browsers as Chrome, Opera, Firefox, IE, and Safari. What is more, the guide it provides is informative and easily understandable.
StringBean is a lightweight responsive CSS framework. While most of frameworks use 12-point system, StringBean offers 24-point grid, providing great compatibility with high resolution screens. There are 6 breakpoints instead of traditional 4, ranging from “x-small” to “mega-uhd” and making it possible to build a full-screen layout looking good on both mobile phones and 4K monitors. Moreover, StringBean offers the whole package of the standard HTML elements and even more, including typography, navigation bar, buttons and button variants, info wheels, labels, progress bars, forms, tables, rows, and cells.
Toast is an extremely simple CSS framework. It describes itself as “insane, no-nonsense CSS grid”. Toast has 12 column responsive grid, and on its base you can create both one column layout for a small screen and a 12 column one up to 960 pixels width. It emphasizes the unprecedented control, giving you the right to choose the number of columns as well as their combinations. Moreover, its flexible configurations allow you to adapt grid class names and the gutter. In general, Toast is all about being customizable, responsive, and easy-to-use.
Layers is a lightweight, unobtrusive, and style-agnostic CSS framework. It is not about design, it’s about structure. This framework has inbuilt CSS normalization and sensible defaults, fluid grid, and layout tools. It also comes with native form styles by default. There are styles for lists, tables, and tools. The features Layers won’t offer you are px definitions, colors, rounded corners, and dependencies. It leaves customization up to you.
So, this was the list of 10 lightweight frameworks. They all are mobile-friendly, lighter than Bootstrap, relatively simple, and easy-to-use. Most of these frameworks have similar features and tools, but at the same time they differ, emphasizing their own utilities, instruments, and advantages. You have to determine, which option to choose and how to sort out the priorities. Hopefully, this article has helped you to reach the right decision.
Author: Ivan Shikht
Co-founder and CTO at Exoft