Bootstrap al­tern­at­ives

If you want to create an effective front end for a web project you need to master various chal­lenges: 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. Ac­cess­ib­il­ity and a good SEO basis are also required when it comes to front end pro­gram­ming.

In order to not have to start com­pletely from scratch when de­vel­op­ing a web interface, many pro­gram­mers use UI frame­works (User Interface). Many decide to go for Bootstrap, which was designed by Twitter. The com­pon­ents can be optimised for mobile devices and all current browsers, as well as the fact that they can be easily adapted to your re­quire­ments. However, the large dis­tri­bu­tion rate also means that there are many sites on the internet that are built using the standard Bootstrap codes and are therefore very similar for this reason. A small criticism is also the com­plex­ity of the front end framework, which is based on lots of CSS and JavaS­cript. It also makes the HTML mark-up more extensive, which affects a page’s loading time, among other things. Although it is possible to download reduced script and CSS files that only contain the required Bootstrap com­pon­ents, you will have to deal with this topic more in­tens­ively. Frame­works are normally used to simplify work and save time, but sometimes this isn’t the case. Some de­velopers may simply dislike using the UI framework in general, which is why it makes sense to consider using an al­tern­at­ive to Bootstrap. There are so many to choose from that that can be a hard task.

We present you with five front end frame­works that you can use instead of Twitter’s Bootstrap so that you can develop a complete and func­tion­al front end. We show you the ad­vant­ages and dis­ad­vant­ages as well as the dif­fer­ences compared to Bootstrap. In addition, you will learn about the scale of the code col­lec­tions and the type of developer that they are par­tic­u­larly suited to. You can also find out how well the de­vel­op­ment works with the Bootstrap al­tern­at­ive.

The modular found­a­tion framework was ori­gin­ally a style guide, which the web design agency ZURB initially used ex­clus­ively for its customers’ projects. Later, ZURB combined and published numerous HTML, CSS, and JavaS­cript com­pon­ents in the open source framework. The 12-column flexible grid layout enables a re­spons­ive layout to be designed that auto­mat­ic­ally adapts to the different display sizes and res­ol­u­tions of the different terminals. In addition to the grid system, Found­a­tion offers the following templates:

• Slider

• Buttons

• Ty­po­graphy

• Menu bar and menus

• Media container

• In­teg­rated float and vis­ib­il­ity classes

Found­a­tion is based on Sass, and just as with Bootstrap is, from version 4 onwards. Sass is a stylesheet language that sim­pli­fies creating and editing CSS files. However, this ZURB framework lacks support from Less (also a stylesheet language), which Bootstrap does offer. While there is hardly any dif­fer­ence in the size of JavaS­cript plugins and CSS snippets, there are sig­ni­fic­antly fewer templates for Found­a­tion, and less support from other platforms. The ZURB framework clearly outdoes the Twitter solution when it comes to the in­di­vidu­al­ity of developed front ends. The un­der­ly­ing CSS code gives access to a compact design that can be easily adapted to your own re­quire­ments. 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 news­let­ters. If you want to use Found­a­tion to develop your interface you can either download the complete set or an in­di­vidu­ally compiled package from the designed com­pon­ents free of charge on the official website.

Yahoo released Pure.CSS in mid 2013, a basic structure for the de­vel­op­ment of front ends. It is con­sidered a good Bootstrap al­tern­at­ive but can also be used in com­bin­a­tion with the Twitter framework. Pure is based on the Scalable and Modular Ar­chi­tec­ture 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 con­ven­tions. In the Yahoo framework, each module has a default class name with the prefix 'pure' for the regular design as well as ad­di­tion­al class names for specific rules that apply to sub modules. In Pure.CSS, you can integrate a form con­tain­ing 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 down­loaded in a re­spons­ive and non-re­spons­ive version, contains the following six modules, which are ap­prox­im­ately 4 KB in com­pressed, zipped form (16 KB when unzipped):

• Base (base-min.css): framework basis including rules

• Grids (grids-re­spons­ive-min.css): flexible, re­spons­ive 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

All modules are built on the open source stylesheet Normalize.css, just like Bootstrap com­pon­ents and many other CSS frame­works. This stylesheet replaces the default styles of HTML elements through optimised, cross-browser styles. Compared to Twitter’s front end framework, however, the Yahoo equi­val­ent doesn’t contain any JavaS­cript ap­plic­a­tions, even if you can integrate them on your own. Pure.CSS is more than just a finished front end, which needs to be adapted to your own needs, but also a starting point for your project and is therefore as­so­ci­ated with much greater freedom. 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.

In 2013, the pro­gram­mer Jack Lukic published his frame­works solution for front end de­vel­op­ment under the name Semantic UI. The aim of this col­lec­tion is to simplify writing HTML code through user-friendly, intuitive con­ven­tion. Semantic UI contains over 3,000 semantic CSS classes, which are easy to use and optimise the de­vel­op­ment process. The basic Bootstrap package contains only one theme, but Semantic UI offers over 20 different design templates in the standard version. The scope is somewhat more complex than with the Twitter framework: in addition to the ele­ment­ary CSS and JavaS­cript files, the basic package includes fonts, the PHP package Composer, the web file manager Bower, and the JavaS­cript task runner Gulp. The in­di­vidu­al com­pon­ents are clas­si­fied into the following six areas:

• Globals: style defin­i­tions based on normalize.css; ty­po­graphy and design basis.

• Elements: general front end com­pon­ents such as buttons, icons, con­tain­ers, and many more.

• Col­lec­tions: struc­tur­al content such as grid system, menus, tables, and forms.

• Views: in­ter­act­ive elements such as comment boxes, newsfeeds, and ad­vert­ising banners. 

• Modules: widgets such as drop-down menus, pop-up windows, and check­boxes.

• Behaviors: in­ter­faces to JavaS­cript pro­gram­ming.

For beginners, the naming system of Semantic UI is initially be­wil­der­ing and takes a while to get used to. In the end, the effort pays off because the HTML code of your web front end is much easier to read than with com­par­able frame­works such as Twitter’s Bootstrap, which can def­in­itely be be­ne­fi­cial in later revisions. There is Semantic UI except in the CSS or Less versions. There is also a Sass version in which the semantic framework is similar to Bootstrap in that respect. A major dis­ad­vant­age of this Bootstrap al­tern­at­ive is the fact that many com­pon­ents are dependent upon JavaS­cript and do not work without the script language. 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 in­di­vidu­al code snippets in the framework’s GitHub re­pos­it­ory.

UIkit is an open source solution for front end pro­gram­ming. It was developed by the Hamburg-based company YOOtheme, which has a lot of ex­per­i­ence de­vel­op­ing web ap­plic­a­tions as well as themes for WordPress, Joomla, and the in-house website builder YOOtheme Pro. The extensive col­lec­tion of HTML, CSS, and JavaS­cript com­pon­ents is subject to the free MIT license and can therefore be used and modified easily. All CSS snippets exist in both Less and Sass versions so that the style templates can be adapted to the needs of ex­per­i­enced pro­gram­mers. There are over 30 core modules of this Bootstrap al­tern­at­ive, which are built on normalize.css, just like the previous examples as well as the Twitter framework. Due to this reason, current internet browsers have no problems dis­play­ing UIkit web projects.

The core com­pon­ents are divided into the following six cat­egor­ies:

• Defaults: basis for nor­m­al­isa­tion of HTML elements with which the cross-browser cap­ab­il­ity 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.

• Nav­ig­a­tions: all elements that assist your visitors in exploring your web interface; there are modules for pa­gin­a­tion (page numbering) as well as classic nav­ig­a­tion bars.

• Elements: styles for self-contained content blocks such as tables, lists, and forms.

• Common: com­pon­ents that you typically use within your content, such as buttons, icons, badges, or an­im­a­tions.

• JavaS­cript: mainly JavaS­cript-based modules for im­ple­ment­ing in­ter­act­ive elements.

UIkit provides various re­spons­ive classes to prepare content for different display sizes. The pre-defined break points – e.g. 1,200 pixels for extra-large screens or 497 pixels for small smart­phone displays – can be created using the online cus­tom­izer. To avoid com­plic­a­tions with other CSS snippets or frame­works, all classes are iden­ti­fied by the prefix 'uk'. Not in­teg­rated into the core framework, but op­tion­ally se­lect­able are the ad­di­tion­al CSS and JavaS­cript elements, which are required for im­ple­ment­ing more complex web in­ter­faces if these are equipped with an ad­min­is­trat­or section that includes login, HTML editor, and file-upload features.

Despite the con­sid­er­able range of functions, the file size of the in­di­vidu­al com­pon­ents as well as the entire framework is sur­pris­ingly small. This can be extended by a very detailed doc­u­ment­a­tion, which makes the in­tro­duc­tion 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.

Ma­ter­i­al­ize is a CSS framework that is based on the prin­ciples of material design, which Google in­tro­duced 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 an­im­a­tions and shadows. The depth effects generated in this way help the web interface user to easily record important in­form­a­tion and in­ter­ac­tion elements. This MIT-licensed UI framework was developed by Alvin Wang, Alan Chang, Alex Mark, and Kevin Louie – four students from Carnegie Mellon Uni­ver­sity in Pennsylvania. The Bootstrap al­tern­at­ive, which has a 12-column grid system like the Twitter framework, contains various CSS and JavaS­cript com­pon­ents, over 700 official material design symbols in an icon font as well as Roboto, the standard font of Google’s design concept. Besides the usual CSS files in normal and minimised versions, just like with Bootstrap, you can also access SCSS source files written in Sass, which simplify the in­di­vidu­al design of your web interface. Re­gard­less of your selection, there are about 30 elements available:

• CSS: the ele­ment­ary CSS feature is the re­spons­ive grid system, just like it is with Bootstrap and other UI frame­works. It provides you with the found­a­tion for a web interface that works on all devices. The Ma­ter­i­al­ize 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. Ad­di­tion­al CSS snippets are: a colour palette based on the basic colours of the material design, the afore­men­tioned Roboto font, and several classes that are called 'helpers' in Ma­ter­i­al­ize, and help you to align content.

• Com­pon­ents: com­pon­ents are the parts of the front end frame­works that you need for im­ple­ment­ing nav­ig­a­tion­al elements and in­ter­act­ive areas. In addition to typical com­pon­ents such as codes for paging, forms, nav­ig­a­tion menu, or icons, you will also find some modules, which are of fun­da­ment­al im­port­ance for im­ple­ment­ing the material design concept. This includes 'cards', for example, which are typical object boxes used for content present­a­tion, or the symbolic 'chips' with which tags or contacts can be displayed.

• JavaS­cript: in terms of JavaS­cript ap­plic­a­tions, Ma­ter­i­al­ize is un­doubtedly one of the best Bootstrap al­tern­at­ives. Whether you want to display images in the carousel view, add in­ter­act­ive dialog windows, in­cor­por­ate accordion elements, or make the interface more in­ter­est­ing with the parallax scrolling effect, you have cor­res­pond­ing JavaS­cript snippets ready for use at any time. This is ideal for the task of designing a web interface that is very user-friendly on mobile devices as well as desktop PCs.

The files from the Ma­ter­i­al­ize project can be either found on GitHub or to download on the website ma­ter­i­al­izec­ss.com. There you will also find two available templates 'Starter' and 'Par­al­lax' as well as the mark-up code for ref­er­en­cing project files via the content delivery network, cdnjs.

The al­tern­at­ive solutions generally have a lot in common with the Twitter framework: in all cases, the central component is a grid system that is char­ac­ter­ised by flex­ib­il­ity and plays a large part in the suc­cess­ful real­isa­tion of cross-device web in­ter­faces. Although the pre-defined minimum or maximum di­men­sions 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 in­tu­it­ively in­teg­rated. This isn’t always the case with Bootstrap. There are also dif­fer­ences in the class systems of the Bootstrap al­tern­at­ives, with Semantic UI standing out in par­tic­u­lar. Instead of typical CSS classes, the UI framework has in­teg­rated its name into more than 3,000 own semantic classes that make code pro­gram­ming even more intuitive. Sim­pli­fy­ing coding also allows most col­lec­tions 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 pre­pro­cessors, but the Scalable and Modular Ar­chi­tec­ture for CSS (SMACSS) offers an in­ter­est­ing approach when using CSS. The various al­tern­at­ives to Bootstrap all have different strengths and weak­nesses, making it difficult to declare any of them the perfect solution for front end pro­gram­ming. Therefore, you should make your decision depending on what your web project requires and ask yourself the following questions:

• Are the com­pon­ents struc­tured in an appealing way?

• Does the grid system offer the desired options?

• How important is support for older browsers?

• Does the range of CSS and JavaS­cript modules meet the re­quire­ments?

• Is the size of the codes (com­pressed and un­com­pressed) pro­por­tion­al?

• Do you need room to manoeuvre when it comes to adapting code? If so, what pos­sib­il­it­ies does the UI frame-work offer? 

• Do you put a lot of value on a large community (further de­vel­op­ment, ex­ten­sions, templates, forums, tutorials, etc.)?

If you are hovering between several Bootstrap al­tern­at­ives, take a look at some online manuals. The modules are often listed in the manuals along with il­lus­trat­ive coding examples. You can also see the pos­sib­il­it­ies of the in­di­vidu­al providers by trying them out yourself using the online tool, Codeply. Here you can test the com­pon­ents of various UI frame­works directly in the browser without having to download a single file.