Front-end frameworks like Twitter bootstrap, Foundation by ZURB and others are great for creating beautiful, responsive, cross-browser friendly web sites quickly and easily without the need to learn a lot of code or best practices.
While Bootstrap and Foundation are two of the more well-known front-end frameworks, there are other great frameworks available that many of you probably haven’t heard of. In this article I’m going to list some of these so you can consider giving them a try.
Semantic UI
Semantic UI is a really nice user interface kit that uses LESS. To get an overview of what’s different in Semantic UI, visit their introduction page. The framework is fully responsive, all components defined using ems or rems.
Components offered by Semantic UI include button, divider, icon, image, label, reveal, segment and lots more. I love labels in this framework. You can use labels to display a CSS Ribbon on an element.
Other features of the framework include the ability to add a ‘disabled’ state on images, and icons that can be formatted with different colors and sizes. A number of popular icons (Facebook, Twitter, Google+ etc) are included.
Semantic UI comes with tons of features (elements, collections, modules, behavior, etc.), many of which are unique to it.
Semantic UI Frameworks and Packages
- Semantic UI for Sass GitHub repo
- Knockout.js and Semantic UI working together Knockout-Semantic
- AngularJS directives for Semantic-UI AngularSemantic
- Semantic UI package for meteor meteor-semantic-ui
- Semantic-UI Rails gem semantic-ui-rails packages
Semantic UI Themes
WordPress and Tumblr themes are also available.
Ionic
Ionic is a beautiful front-end framework for developing hybrid mobile apps in HTML5. It’s still in early development but you can download an alpha preview. Ionic is free and open source, and it offers a library of mobile-optimized HTML, CSS and JavaScript components for building highly interactive apps. It’s built with Sass and optimized for AngularJS. To get the most out of Ionic, AngularJS is required—although you can still use the CSS features without Angular.
The Ionic team has plans to release Cordova/PhoneGap plug-ins in the future to expand the capabilities of your mobile apps. It is written with SASS, so SASS lovers can easily customize variables and mixins.
Almost Flat UI
Almost Flat UI is based on Foundation Framework. This means if you are familiar with Foundation, then you can use Almost Flat UI quickly and easily. Almost Flat UI includes a series of useful widgets such as CSS panels, pricing tables, thumbnails with nice hover effects, breadcrumbs, tabs, alerts, and tool tips.
UIkit
UIkit is “a lightweight and modular front-end framework for developing fast and powerful web interfaces”. UIkit is developed in LESS and like many frameworks is open source and offers some great components and add-ons.
The Markdown area feature is one of the unique and useful add-ons. This lets you create a rich markdown editor with a real-time preview and support for HTML syntax highlighting.
Other useful components and add-ons include CSS classes to style articles and comments sections. Also, with the Sortable add-on you can create nestable lists that can be sorted via drag-and-drop.
Datepicker and Timepicker add-ons are also available as well as a Sticky add-on to make navigation elements remain at the top of the viewport.
Bootflat
Bootflat is an open source Flat UI kit based on Twitter Bootstrap 3. It provides two different skins: Bootflat Default UI Skin and Bootflat Square UI Skin. If you’re into the flat design look, then this might be a good choice.
Brick
Brick, by Mozilla, is “a bundle of reusable UI components created to enable rapid development of cross-browser and mobile-friendly HTML5 web applications.”
Brick is not an alternative to Twitter Bootstrap or Foundation. That is, it’s not a complete front-end development framework like those. Brick offers cross-platform UI Components for Modern Web Apps.
Brick is currently in Beta. If you run into problems using the components, you can file an issue on the GitHub account.
Know of Any Others?
That’s certainly not a complete list—there are many other frameworks available as well. What do you think of these lesser-known frameworks? Have you tried any other UI kits or frameworks? Feel free to share your views in the comments.
Tahir TaousTahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.
