Beyond Bootstrap and Foundation: Frameworks You’ve Never Heard Of

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 Themes

WordPress and Tumblr themes are also available.

Download Semantic UI

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.

Download Ionic

Almost Flat UI

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.

Download Almost Flat UI

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.

Download UIkit

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.

Download Bootflat

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.

Download brick

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://martinbean.co.uk/ Martin Bean

    Good article, but Bootstrap is no longer “Twitter Bootstrap”. Neither of the original developers work at Twitter any more, and as a result the project was moved away from the official Twitter GitHub repository and became a project in its own right. Just a pet peeve of mine, similar to people typing Sass as “SASS”!

    • zethus

      The project was never an official Twitter project to being with… merely something @fat and @mdo worked on while at Twitter to help their dev process.

    • LouisLazaris

      Hey, Martin. Thanks for pointing that out. I think you are mostly correct, but they haven’t completely disavowed their connection to Twitter. I think it’s just played down a lot now. Here is the GitHub repo:

      https://github.com/twbs/bootstrap

      At the bottom of the page you’ll see that it’s listed as “copyright Twitter”. The name of the GitHub account also implies Twitter (i.e. “tw”) and the IRC and StackOverflow channels are still listed as “twitter-bootstrap” (probably for legacy reasons or whatever).

      So you’re correct, but I don’t think it’s as big of a deal as you’re implying, that’s all. Just my opinion. :)

  • Steve Firth

    Do frameworks really enable fast development … or do they just allow unskilled devs get to the point where they get stuck quicker?

    I’m increasingly getting work that’s basically me making Foundation and others work properly across browsers for people using frameworks.

    If you’re aren’t willing to “learn a lot of code or best practices” then go do some other job. Badly.

    • Dawid Rokita

      It depends. If you are currently working with one project (long term) you can write all by yourself. But if you are creating Nth website or app – you probably wish to get some functionalities faster (sign in, mailing etc) – then u use framework :)

      • Steve Firth

        But if you’ve done N number of websites you would have created your own snippets as you went :)

        I have no issue with frameworks that are used by people who understand the css and are compiled as needed, though most just download the full css version which bloats and goes mostly unused.

        • Dawid Rokita

          Then you end up with your own framework :-) Maybe less complicated … and maybe less functional … :)

          • Steve Firth

            Your own framework and the knowledge of how one works ;)

          • Dawid Rokita

            Time spent on writing code < time spent od reading documentation ?? i wouldn't be shure :)

    • http://www.designingsean.com Sean Ryan

      Yes, they do, as long as you are knowledgable in the framework you are using. This could be said with any language or technology: In the hands of someone who is not familiar with best practices, the result will be less than optimal.

      I could easily roll my own framework for the app I work on, but I have chosen to go with Bootstrap because it lets me move faster, and it gives the back end engineers a system 1. they are already familiar with, and 2. that is well documented. Eventually, I am going to rip out the pieces we will not use to reduce bloat.

      • Steve Firth

        But that is precisely the problem, there’s nothing to stop the unskilled using these tools. It’s like me using wordpress and thinking I know php. I feel it creates a false sense of security and on the flipside makes management even less receptive to concerns about available features across devices as they have a magic bullet. Similar to the “get a jquery plugin for that” attitude.

        Obviously a lot depends on the situation but in general I find the people who understand them don’t need them and those that don’t understand shouldn’t use them.

    • http://neonc0de.zz.mu/ Widy Graycloud

      frameworks really helpful for developing responsive website,
      but I don’t really think about the UI, most off all i use framework to position corectly and responsively,
      grid is the favorite and the most used elements in grid.yeah,grid is the first element you need too master it first in all frameworks

  • sumeet nigam

    Hello, I am a beginner, and I think there one more framework must be included, INK – UI framework ( not email template UI by Foundation ), closest to Bootstrap and Foundation.

  • Febby Gunawan

    Thank you for this, I didn’t know about all that framework beside Bootstrap & Foundation. Anyway, you might want to consider adding Pure – http://purecss.io/ to the list. It’s a lightweight framework with a lot of useful css modules. Moreover, if you’re SASS lover here’s the ported version Pure-SASS – https://github.com/fourseven/pure-sass

  • Killian CHARPENTIER

    Hi, article interesting ! i didn’t know about flat framework. For some of my personal projects i use http://ink.sapo.pt/ which is easy to use when i don’t wont to make my own template

  • http://www.hansspiess.de/ Hans Spieß

    thanks for that useful article! by the way, the animated screenshots are very distracting.

  • http://jkeks.ru/ jkeks

    Imperavi Kube

  • http://neonc0de.zz.mu/ Widy Graycloud

    the legend framework http://www.getskeleton.com/

  • Bob Cardenas

    You can add Adobe TopCoat (http://topcoat.io/) and Chocolate Chip UI (http://chocolatechip-ui.com/) to the increasingly long list of HTML5 frameworks.

  • hadifarnoud

    where is Ratchet?

  • Johnathan Warlick

    I’ve found https://daneden.me/toast/ to be a delightful starting point for simple websites.

  • frostymarvelous

    Ok, I need to thank you for this,. Awesome. I keep a sharp lookout for these frameworks.

  • Alex

    Make those animated gifs start on demand: save readers eyes.