Bootstrap al­ter­na­tives

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­ces­si­bil­i­ty 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­plete­ly 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­po­nents can be optimized 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­b­u­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­i­ty of the front end framework, which is based on lots of CSS and JavaScript. 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­po­nents, you will have to deal with this topic more in­ten­sive­ly. Frame­works are normally used to simplify work and save time, but sometimes this isn’t the case. Some de­vel­op­ers may simply dislike using the UI framework in general, which is why it makes sense to consider using an al­ter­na­tive 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­van­tages and dis­ad­van­tages 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­lar­ly suited to. You can also find out how well the de­vel­op­ment works with the Bootstrap al­ter­na­tive.

The modular foun­da­tion framework was orig­i­nal­ly a style guide, which the web design agency ZURB initially used ex­clu­sive­ly for its customers’ projects. Later, ZURB combined and published numerous HTML, CSS, and JavaScript com­po­nents in the open source framework. The 12-column flexible grid layout enables a re­spon­sive layout to be designed that au­to­mat­i­cal­ly adapts to the different display sizes and res­o­lu­tions of the different terminals. In addition to the grid system, Foun­da­tion offers the following templates:

• Slider

• Buttons

• Ty­pog­ra­phy

• Menu bar and menus

• Media container

• In­te­grat­ed float and vis­i­bil­i­ty classes

Foun­da­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 JavaScript plugins and CSS snippets, there are sig­nif­i­cant­ly fewer templates for Foun­da­tion, and less support from other platforms. The ZURB framework clearly outdoes the Twitter solution when it comes to the in­di­vid­u­al­i­ty 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 newslet­ters. If you want to use Foun­da­tion to develop your interface you can either download the complete set or an in­di­vid­u­al­ly compiled package from the designed com­po­nents 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­sid­ered a good Bootstrap al­ter­na­tive but can also be used in com­bi­na­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 every­thing 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­spon­sive and non-re­spon­sive version, contains the following six modules, which are ap­prox­i­mate­ly 4 KB in com­pressed, zipped form (16 KB when unzipped):

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

• Grids (grids-re­spon­sive-min.css): flexible, re­spon­sive 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­po­nents and many other CSS frame­works. This stylesheet replaces the default styles of HTML elements through optimized, cross-browser styles. Compared to Twitter’s front end framework, however, the Yahoo equiv­a­lent doesn’t contain any JavaScript ap­pli­ca­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­at­ed 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 optimize 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 el­e­men­tary CSS and JavaScript files, the basic package includes fonts, the PHP package Composer, the web file manager Bower, and the JavaScript task runner Gulp. The in­di­vid­ual com­po­nents are clas­si­fied into the following six areas:

• Globals: style de­f­i­n­i­tions based on normalize.css; ty­pog­ra­phy and design basis.

• Elements: general front end com­po­nents 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­ac­tive elements such as comment boxes, newsfeeds, and ad­ver­tis­ing banners. 

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

• Behaviors: in­ter­faces to JavaScript 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­pa­ra­ble frame­works such as Twitter’s Bootstrap, which can def­i­nite­ly be ben­e­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­van­tage of this Bootstrap al­ter­na­tive is the fact that many com­po­nents are dependent upon JavaScript 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­vid­ual code snippets in the framework’s GitHub repos­i­to­ry.

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­pe­ri­ence de­vel­op­ing web ap­pli­ca­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 JavaScript com­po­nents 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­pe­ri­enced pro­gram­mers. There are over 30 core modules of this Bootstrap al­ter­na­tive, 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­po­nents are divided into the following six cat­e­gories:

• Defaults: basis for nor­mal­iza­tion of HTML elements with which the cross-browser ca­pa­bil­i­ty is realized, 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­i­ga­tions: all elements that assist your visitors in exploring your web interface; there are modules for pag­i­na­tion (page numbering) as well as classic nav­i­ga­tion bars.

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

• Common: com­po­nents that you typically use within your content, such as buttons, icons, badges, or an­i­ma­tions.

• JavaScript: mainly JavaScript-based modules for im­ple­ment­ing in­ter­ac­tive elements.

UIkit provides various re­spon­sive 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­tomiz­er. To avoid com­pli­ca­tions with other CSS snippets or frame­works, all classes are iden­ti­fied by the prefix 'uk'. Not in­te­grat­ed into the core framework, but op­tion­al­ly se­lec­table are the ad­di­tion­al CSS and JavaScript elements, which are required for im­ple­ment­ing more complex web in­ter­faces if these are equipped with an ad­min­is­tra­tor 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­vid­ual com­po­nents as well as the entire framework is sur­pris­ing­ly small. This can be extended by a very detailed doc­u­men­ta­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­te­ri­al­ize is a CSS framework that is based on the prin­ci­ples 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­i­ma­tions and shadows. The depth effects generated in this way help the web interface user to easily record important in­for­ma­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­si­ty in Penn­syl­va­nia. The Bootstrap al­ter­na­tive, which has a 12-column grid system like the Twitter framework, contains various CSS and JavaScript com­po­nents, 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 minimized versions, just like with Bootstrap, you can also access SCSS source files written in Sass, which simplify the in­di­vid­ual design of your web interface. Re­gard­less of your selection, there are about 30 elements available:

• CSS: the el­e­men­tary CSS feature is the re­spon­sive grid system, just like it is with Bootstrap and other UI frame­works. It provides you with the foun­da­tion for a web interface that works on all devices. The Ma­te­ri­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 color palette based on the basic colors of the material design, the afore­men­tioned Roboto font, and several classes that are called 'helpers' in Ma­te­ri­al­ize, and help you to align content.

• Com­po­nents: com­po­nents are the parts of the front end frame­works that you need for im­ple­ment­ing nav­i­ga­tion­al elements and in­ter­ac­tive areas. In addition to typical com­po­nents such as codes for paging, forms, nav­i­ga­tion menu, or icons, you will also find some modules, which are of fun­da­men­tal im­por­tance for im­ple­ment­ing the material design concept. This includes 'cards', for example, which are typical object boxes used for content pre­sen­ta­tion, or the symbolic 'chips' with which tags or contacts can be displayed.

• JavaScript: in terms of JavaScript ap­pli­ca­tions, Ma­te­ri­al­ize is un­doubt­ed­ly one of the best Bootstrap al­ter­na­tives. Whether you want to display images in the carousel view, add in­ter­ac­tive dialog windows, in­cor­po­rate accordion elements, or make the interface more in­ter­est­ing with the parallax scrolling effect, you have cor­re­spond­ing JavaScript 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­te­ri­al­ize project can be either found on GitHub or to download on the website ma­te­ri­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­enc­ing project files via the content delivery network, cdnjs.

The al­ter­na­tive 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­ized by flex­i­bil­i­ty and plays a large part in the suc­cess­ful re­al­iza­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­itive­ly in­te­grat­ed. This isn’t always the case with Bootstrap. There are also dif­fer­ences in the class systems of the Bootstrap al­ter­na­tives, with Semantic UI standing out in par­tic­u­lar. Instead of typical CSS classes, the UI framework has in­te­grat­ed 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 customize 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­proces­sors, 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­ter­na­tives to Bootstrap all have different strengths and weak­ness­es, 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­po­nents 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 JavaScript 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 maneuvre when it comes to adapting code? If so, what pos­si­bil­i­ties 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­ter­na­tives, take a look at some online manuals. The modules are often listed in the manuals along with il­lus­tra­tive coding examples. You can also see the pos­si­bil­i­ties of the in­di­vid­ual providers by trying them out yourself using the online tool, Codeply. Here you can test the com­po­nents of various UI frame­works directly in the browser without having to download a single file.