Bootstrap alternatives

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.

In order to not have to start completely from scratch when developing a web interface, many programmers use UI frameworks (User Interface). Many decide to go for Bootstrap, which was designed by Twitter. The components can be optimized for mobile devices and all current browsers, as well as the fact that they can be easily adapted to your requirements. However, the large distribution 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 complexity 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 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.

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.

The modular foundation framework was originally a style guide, which the web design agency ZURB initially used exclusively for its customers’ projects. Later, ZURB combined and published numerous HTML, CSS, and JavaScript components in the open source framework. The 12-column flexible grid layout enables a responsive layout to be designed that automatically adapts to the different display sizes and resolutions of the different terminals. In addition to the grid system, Foundation offers the following templates:

• Slider

• Buttons

• Typography

• Menu bar and menus

• Media container

• Integrated float and visibility classes

Foundation is based on Sass, and just as with Bootstrap is, from version 4 onwards. Sass is a stylesheet language that simplifies 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 difference in the size of JavaScript plugins and CSS snippets, there are significantly fewer templates for Foundation, and less support from other platforms. 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.

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

All modules are built on the open source stylesheet Normalize.css, just like Bootstrap components and many other CSS frameworks. This stylesheet replaces the default styles of HTML elements through optimized, cross-browser styles. Compared to Twitter’s front end framework, however, the Yahoo equivalent doesn’t contain any JavaScript applications, 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 associated 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 programmer Jack Lukic published his frameworks solution for front end development under the name Semantic UI. The aim of this collection is to simplify writing HTML code through user-friendly, intuitive convention. Semantic UI contains over 3,000 semantic CSS classes, which are easy to use and optimize the development 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 elementary 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 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.

• Behaviors: interfaces to JavaScript programming.

For beginners, the naming system of Semantic UI is initially bewildering 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 comparable frameworks such as Twitter’s Bootstrap, which can definitely be beneficial 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 disadvantage of this Bootstrap alternative is the fact that many components 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 individual code snippets in the framework’s GitHub repository.

UIkit is an open source solution for front end programming. It was developed by the Hamburg-based company YOOtheme, which has a lot of experience developing web applications as well as themes for WordPress, Joomla, and the in-house website builder YOOtheme Pro. The extensive collection of HTML, CSS, and JavaScript components 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 experienced programmers. There are over 30 core modules of this Bootstrap alternative, 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 displaying UIkit web projects.

The core components are divided into the following six categories:

• Defaults: basis for normalization of HTML elements with which the cross-browser capability 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.

• 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.

• JavaScript: mainly JavaScript-based modules for implementing interactive elements.

UIkit provides various responsive 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 smartphone displays – can be created using the online customizer. To avoid complications with other CSS snippets or frameworks, all classes are identified by the prefix 'uk'. Not integrated into the core framework, but optionally selectable are the additional CSS and JavaScript elements, which are required for implementing more complex web interfaces if these are equipped with an administrator section that includes login, HTML editor, and file-upload features.

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.

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. The Bootstrap alternative, which has a 12-column grid system like the Twitter framework, contains various CSS and JavaScript components, 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 individual design of your web interface. Regardless of your selection, there are about 30 elements available:

• 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 color palette based on the basic colors 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.

• JavaScript: in terms of JavaScript applications, Materialize is undoubtedly one of the best Bootstrap alternatives. Whether you want to display images in the carousel view, add interactive dialog windows, incorporate accordion elements, or make the interface more interesting with the parallax scrolling effect, you have corresponding 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 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.

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 characterized by flexibility and plays a large part in the successful realization 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 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 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?

• Does the range of CSS and JavaScript modules meet the requirements?

• Is the size of the codes (compressed and uncompressed) proportional?

• Do you need room to maneuvre 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.