If you want to create an effective front end for a web project you need to master various challenges: it is important to give the user interface a suitable look, but never lose sight of the overall usability. Because of the different devices and browsers that are available to access content on the web, the selected visual and technical elements must also work across all platforms. Accessibility and a good SEO basis are also required when it comes to front end programming.
Why Bootstrap isn’t always the best solution
Although it is possible to download reduced script and CSS files that only contain the required Bootstrap components, you will have to deal with this topic more intensively. Frameworks are normally used to simplify work and save time, but sometimes this isn’t the case. Some developers may simply dislike using the UI framework in general, which is why it makes sense to consider using an alternative to Bootstrap. There are so many to choose from that that can be a hard task.
The best Bootstrap alternatives – a brief profile
We present you with five front end frameworks that you can use instead of Twitter’s Bootstrap so that you can develop a complete and functional front end. We show you the advantages and disadvantages as well as the differences compared to Bootstrap. In addition, you will learn about the scale of the code collections and the type of developer that they are particularly suited to. You can also find out how well the development works with the Bootstrap alternative.
- Menu bar and menus
- Media container
- Integrated float and visibility classes
The ZURB framework clearly outdoes the Twitter solution when it comes to the individuality of developed front ends. The underlying CSS code gives access to a compact design that can be easily adapted to your own requirements. Some classes are directly linked – unlike Bootstrap – without you having to add them first. Another benefit: ZURB offers several courses and personal support for your front end project as well as a special version of the framework for designing e-mail newsletters.
If you want to use Foundation to develop your interface you can either download the complete set or an individually compiled package from the designed components free of charge on the official website.
|✔ Sleek programme code||✘ Only few templates available|
|✔ Implemented CSS classes||✘ Problems with older (or outdated) versions of Internet Explorer|
|✔ Support available||✘ Lack of Less support|
Yahoo released Pure.CSS in mid 2013, a basic structure for the development of front ends. It is considered a good Bootstrap alternative but can also be used in combination with the Twitter framework. Pure is based on the Scalable and Modular Architecture for CSS (SMACSS), which ensures that recurring elements such as tables, buttons, or forms are separated from the basic design (font, layout, etc.) and have their own conventions. In the Yahoo framework, each module has a default class name with the prefix 'pure' for the regular design as well as additional class names for specific rules that apply to sub modules. In Pure.CSS, you can integrate a form containing everything and then specify the default class name 'pure-form' and the sub-class name 'pure-form-stacked'.
The front end framework, which can be downloaded in a responsive and non-responsive version, contains the following six modules, which are approximately 4 KB in compressed, zipped form (16 KB when unzipped):
- Base (base-min.css): framework basis including rules
- Grids (grids-responsive-min.css): flexible, responsive grid system
- Forms (forms-min.css/forms-nr-min.css): forms
- Buttons (buttons-min.css): different buttons
- Tables (tables-min.css): tables
- Menus (menus-min.css/menus-nr-min.css): menus
Yahoo hosts the framework on its own free Content Delivery Network (CDN) (Yahoo CDN), so that you can integrate it into the <head> section of your project with a simple link. You can, of course, download Pure.CSS and host it yourself. The current link to the CDN as well as the download files can be found on the official website purecss.io.
|✔ Minimalistic design||✘ Very few templates available|
|✔ Doesn’t need to be self-hosted||✘ No Less/Sass support|
|✔ SMACSS architecture|
The individual components are classified into the following six areas:
- Globals: style definitions based on normalize.css; typography and design basis.
- Elements: general front end components such as buttons, icons, containers, and many more.
- Collections: structural content such as grid system, menus, tables, and forms.
- Views: interactive elements such as comment boxes, newsfeeds, and advertising banners.
- Modules: widgets such as drop-down menus, pop-up windows, and checkboxes.
You can download Semantic UI either in the download area of the official website, integrate the files on the Content Delivery Network JSDELIVR via link, or access individual code snippets in the framework’s GitHub repository.
|✔ Over 3,000 semantic CSS classes||✘ Very complex|
|✔ Excellent integration possibilities (React, Ember, Meteor, PHP package manager, Gulp)|
The core components are divided into the following six categories:
- Defaults: basis for normalisation of HTML elements with which the cross-browser capability is realised, as well as some basic style precepts.
- Layout: tools for designing the front end e.g. the grid system, content boxes, and useful CSS classes for recurrent content.
- Navigations: all elements that assist your visitors in exploring your web interface; there are modules for pagination (page numbering) as well as classic navigation bars.
- Elements: styles for self-contained content blocks such as tables, lists, and forms.
- Common: components that you typically use within your content, such as buttons, icons, badges, or animations.
Despite the considerable range of functions, the file size of the individual components as well as the entire framework is surprisingly small. This can be extended by a very detailed documentation, which makes the introduction much easier – even if Bootstrap is one step ahead regarding the selection of themes and range of tutorials. However, UIkit has around 1,500 forks on GitHub where you can find and download all modules for the front end framework. The complete package is also available to download from the official website. However, it is not possible to un-select modules in advance so that you can remove them later in the unzipped directory.
|✔ Optional additional components for complex web interfaces||✘ Low level of familiarity|
|✔ Supports Sass and Less|
|✔ Theme customiser|
Materialize is a CSS framework that is based on the principles of material design, which Google introduced in 2015 and is now used in most of its apps. The design concept is built on map-like surfaces, which are minimally designed ('flat design'), in principle, but are then brought into the limelight with animations and shadows. The depth effects generated in this way help the web interface user to easily record important information and interaction elements. This MIT-licensed UI framework was developed by Alvin Wang, Alan Chang, Alex Mark, and Kevin Louie – four students from Carnegie Mellon University in Pennsylvania.
- CSS: the elementary CSS feature is the responsive grid system, just like it is with Bootstrap and other UI frameworks. It provides you with the foundation for a web interface that works on all devices. The Materialize grid includes three pre-defined display sizes – less than 600 pixels for mobile devices, up to 992 pixels for tablets, and more than 992 pixels for desktop PCs. Additional CSS snippets are: a colour palette based on the basic colours of the material design, the aforementioned Roboto font, and several classes that are called 'helpers' in Materialize, and help you to align content.
- Components: components are the parts of the front end frameworks that you need for implementing navigational elements and interactive areas. In addition to typical components such as codes for paging, forms, navigation menu, or icons, you will also find some modules, which are of fundamental importance for implementing the material design concept. This includes 'cards', for example, which are typical object boxes used for content presentation, or the symbolic 'chips' with which tags or contacts can be displayed.
The files from the Materialize project can be either found on GitHub or to download on the website materializecss.com. There you will also find two available templates 'Starter' and 'Parallax' as well as the mark-up code for referencing project files via the content delivery network, cdnjs.
|✔ Is built on Google Material Design||✘ Only a few templates and extensions available|
|✔ Wide range of modern components||✘ Only supports the latest browsers|
|✔ Sass version available||✘ Very strict design specifications|
Summary: how to find the right Bootstrap alternative
The alternative solutions generally have a lot in common with the Twitter framework: in all cases, the central component is a grid system that is characterised by flexibility and plays a large part in the successful realisation of cross-device web interfaces. Although the pre-defined minimum or maximum dimensions for the different display sizes differ from framework to framework, you as a developer, usually have a lot of freedom when it comes to adapting. This does not only apply to grids, but also to other CSS elements, which in some cases can also be intuitively integrated. This isn’t always the case with Bootstrap.
There are also differences in the class systems of the Bootstrap alternatives, with Semantic UI standing out in particular. Instead of typical CSS classes, the UI framework has integrated its name into more than 3,000 own semantic classes that make code programming even more intuitive. Simplifying coding also allows most collections to support the stylesheet languages Less and Sass, which means you can easily customise the stylesheets of your web interface before you convert them to the familiar CSS format so that you can read and correctly interpret the visitor’s internet browser. Pure.css doesn’t use either of the CSS preprocessors, but the Scalable and Modular Architecture for CSS (SMACSS) offers an interesting approach when using CSS.
The various alternatives to Bootstrap all have different strengths and weaknesses, making it difficult to declare any of them the perfect solution for front end programming. Therefore, you should make your decision depending on what your web project requires and ask yourself the following questions:
- Are the components structured in an appealing way?
- Does the grid system offer the desired options?
- How important is support for older browsers?
- Is the size of the codes (compressed and uncompressed) proportional?
- Do you need room to manoeuvre when it comes to adapting code? If so, what possibilities does the UI frame-work offer?
- Do you put a lot of value on a large community (further development, extensions, templates, forums, tutorials, etc.)?
If you are hovering between several Bootstrap alternatives, take a look at some online manuals. The modules are often listed in the manuals along with illustrative coding examples. You can also see the possibilities of the individual providers by trying them out yourself using the online tool, Codeply. Here you can test the components of various UI frameworks directly in the browser without having to download a single file.