Flakes is an Admin Template Framework. A combination of CSS Libraries, JavaScript Libraries and Design files that help you build business tools very quickly.

  • By Kumail Hunaid
  • Last update: Dec 23, 2022
  • Comments: 17



Flakes is an Admin Template Framework. A combination of CSS Libraries, JavaScript Libraries and Design files that help you build business tools very quickly.

Getting Started

When should you use Flakes?

Flakes is intended to be used for business facing web applications. If you're building an internal tool to help your sales team manage leads or are building an inventory tracking solution for your watch business, you'll need Flakes.

Flakes is a starting point, It helps you get a quick start. It is not a collection of everything you'll ever need and it doesn't aim to become one.

What sort of layouts can I build with Flakes?

Flakes is a collection of components. These components follow the Flakes aesthetic and go well together. Since these components are low level abstractions like forms and grids, you really can build almost anything you'll need.

I've built a few example layouts for you play around with. Check out the example layouts using the navigation to your left to get a feel for what is possible.

Quick Start Guide

  1. Download the Flakes framework on Github or using npm install --save flakes.
  2. Install Dependencies using the "bower install" command. If you don't have the Bower Package Manager, install it using the instructions on their official site.
  3. Example.html has some boilerplate code that you can use to get started.

How do I contribute to Flakes?

Until now, Flakes has been a one man show with me designing and developing for it. When you work on something for long enough, you'll run out of ideas on how to improve it. If you are keen on contributing I'd love to have you make a pull request with your change. If it's a sufficiently big change, I'd recommend filing an issue on Github to discuss the change to avoid duplicate or unnecessary work.

How do I get help?

If you need help with something the documentation does not cover, send me an email and I'd be happy to help you. [email protected]

Report a bug

Please report all bugs on the Github issues page. If you have some time, I'd appreciate it a whole lot more if you could make a pull request with a fix.




  • 1

    flakes gridforms demo product description does not handle verticle scaling on firefox nightly

    1. go to http://kumailht.com/gridforms/
    2. type d d d into product description.
    3. see scroll bar.
    4. expand field vertically with lower right toggle. see form respond by moving SKU's row down.
    5. do the same on http://getflakes.com/preview/grid-forms.html and form does not respond. d's are overlayed on top of SKU
  • 2

    Height Issue if content larger than "device" height

    Hi @kumailht

    I think there is an issue with the calculated height if the content is taller than the window or device (etc IPAD) if you have a background color in the page.

    Do you think a solution might be a recalculation on resize (when the user stops resizing of course)?

  • 3

    Frame & Navigation

    Hi there, I'm sorry about my probably silly question...

    On the navigation example you have a menu with 'li' list link items in a 'div' .view-wrap to the main content, right? My question is: How to hide the content not selected? Is there some specific id or class to use in each content tab to interact with some jquery and show just the selected content and hide others?


  • 4

    Bower compatibility

    The name in bower.json should comply to the spec. I would suggest flakes for easy install.

    That takes me to the other point: please register this name in Bower registry soon (guide). As I am not the owner I decided not to register it instead of you.

  • 5

    Added gulp as a build processor

    Using gulp encourages even small and quick contributions without the hassle of figuring out how to build things. This would lead to more continuous improvements on the project.

  • 6

    Is Flakes still being maintained?

    Hello Kumail,

    I want to try Flakes for the first time and I was wondering if you 're still maintaining Flakes or is this project 'dead'? I just want to know its future.

    Thank you in advance. :)

  • 7

    Which prism?

    I see example.html uses bower_component/prism/themes/prism.css, but it's not in bower.json. I tried: bower i prism, didn't work, then tried bower i prismjs, works, but it installs to prismjs/ instead of prism/, which is different from example.html.

  • 8

    Horizontal scrollbar / menu toggle bad behaviour

    How to reproduce:

    1. Go to http://getflakes.com/preview/index.html
    2. resize the window until the menu collapse
    3. Click on the navbar toggle
    4. expand the window

    Tested on both firefox 33 / chrome 39 windows 7 x64



  • 9

    Classes for use in form validation

    I think it would be useful to have some clean CSS classes that can be used in form validation. Style changes like text color, background color...

    It is easy to put this in custom CSS, but I think it should be in the basic framework itself. Like bootstraps has-error, has-warning and so on.

  • 10

    How did you get 1500+ GitHub stars?

    Congratulations on Flakes - it looks clean, simple and nice; and it's lighter than Bootstrap. I like the clear positioning for internal apps, and on the light end of the spectrum, vs. UI component libraries like Webix, ExtJS or Kendo.

    But having in mind that Flakes is only three months old and has only ~20 commits, how did you manage to get 1500 GitHub stars?

    Webix by comparison, while also on GitHub, has under 20 stars, despite offering a far wider array of UI widgets, and having launched in July 2013.

  • 11

    Meteor integration

    Hi Kumail,

    I'm a Meteor.js dev and volunteer package maintainer for Meteor. Flakes is awesome for business, internal applications, and adding it to Meteor's ecosystem will expose it to many new devs (Meteor has 20k+ stars on GitHub), likely bringing in new testers and contributors.

    This PR will let you directly publish updated versions of the library as they become available. All you have to do is create an account at https://meteor.com/ (click SIGN IN, then Create account). After you've done that, please let me know the name of the account, and I'll add you as a maintainer.

    I've already published the current version of the package on Atmosphere (Meteor's package directory). When you release new versions, you can run meteor/publish.sh to publish new versions to Atmosphere. If meteor is not installed on your system, it will be installed when you run the script. That will work out of the box on Mac OS X and most popular Linuxes.

    If you're curious, you can see an overview of this initiative (initiated by @dandv) here.

    Thanks & kind regards, Stephan, flakes and Meteor fan

  • 12

    Flakes-Content Mobile Issue

    When minimizing the browser, as Flakes is naturally responsive, clicking on the "hamburger" menu icon and then maximizing or restoring the screen afterwards creates a gap, forcing the content to be pushed over. This looks like a bug.

    Viewing on a mobile phone works as it should, but viewing on a browser, and minimizing the browser is when the bug occurs.

    Hopeful for a possible fix!

  • 13

    Documentation error

    Hi @kumailht,

    There might be a documentation error in the Read Only Information section. You have an example with a 'read-only-information' class:


    Product Specs


    I think the correct class is 'flakes-information-box'.

  • 14

    Any solutions to viewing the full table on mobile browsers?

    Right now we can't view the full table on mobile browsers. Actually the table gets cut off since we cannot scroll left to view the remaining table content.

    Any ideas/solutions to this?

  • 15

    Spans on multiple lines in Firefox

    If you have a gutter with your grid in Firefox, your spans will be on multiple lines. As seen on the Flakes Preview Page.

    I fixed the problem on my project by adding the following css: div { -moz-box-sizing:border-box; }

    I only dabble in programming so I'm not sure the best way to contribute the change to the project. But I figured I'd pass along the fix I found.

  • 16

    Add X-UA-Compatible IE=edge Meta Tag for Intranet Sites

    Many organizations have a group policy that forces IE into compatibility mode for all Intranet sites. Adding the tag <meta http-equiv="X-UA-Compatible" content="IE=edge" /> will ensure that jquery works and that the site loads properly.

    Consider adding this tag to the documentation and/or the example html file.

  • 17

    Content does not grow tall enough to hide nav options if nav options are added via javascript

    How to reproduce:

    1. Add 50 li nav items in the HTML of the ul that is child of div.flakes-navigation
    2. Open in either Firefox or Chromium and shrink the page so the left-hand side is automatically hidden.

    At this point all of the elements should be hidden. Great.

    1. Besides the previous 50 elements, create a javascript that runs after the page is loaded. In my case, I'm using AngularJS.
    2. Create 50 more li elements in your javascript code and append to the said ul
    3. Shrink the page again.

    Now, if you scroll down enough some elements aren't hidden, because the div.flakes-content hasn't grown enough to hide them all: it is as tall as the ul containing the nav links.

    if I include the heights of one li element (probably the title), the p.foot, a.logo elements and the top padding of the div.flakes-navigation, the resulting height is exactly is how tall the content needs to be.

    However, I don't actually need that functionality to hide the menu when the screen is narrow. Is there any way to disable that?