We know that for the majority of you, this product is an iconic framework with trendy icons and colors that started the Flat UI trend, that’s why we decided to maintain information about this product here. Plus, you can still buy this amazing product from this page.

About Flat UI Pro

Flat UI Pro is made on the basis of Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.

Prototyping is easier and faster with Designmodo’s release of Flat UI Pro, a user interface kit made in the flat design style. The stunning kit contains basic components, glyphs, icons and a variety of buttons and other elements made in the super-trendy style.

The Bootstrap-based kit contains everything a designer or developer needs to build a fully-responsive website in no time. (No dual prototyping here!)

This kit is ideal for designers or developers looking to start a project that makes the most of the flat design trend. The kit is designed to help save time so designers can focus on creating an overall aesthetic, not working on pieces.

What’s more is that every piece in the kit is designed to match every other component. Designers can pick and choose what parts work best for a project. The included color swatches are designed to make the most of the flat design trend or can be customized to match any branding or color scheme.

Flat UI Pro Key Features

Flat UI Pro contains a huge number of basic components, icons and glyphs, which simplify your work when it comes to new projects. Don’t waste time reinventing the wheel, use Flat UI Pro to get started. Click here for a preview.

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Does the pro version not contain SCSS? That is a big selling point for me.

From the comments it seems the free version is a different iteration to the pro and maintained separately?
– cant “plug in” to existing bootstrap
– compatibility issues with IE that will be fixed “later”, after the pro version.
– SASS instead of LESS (better)

The pro version of an open-source product should be the same codebase with extra features. Not a newer version.

Could you please provide examples of your “styles” and/or changes to Bootstrap? I’m only seeing some icons, colors, and layout. That’s nice and all, but no one needs to pay for that, especially designers. I’m interested to see how your design applies to the scaffolding, the base CSS, the components, the javascript, and all the elements Bootstrap offers.

I have the pro bundle and have integrated it into a project we are working on, the HTML version comes with an example HTML that basically shows you how to integrate the whole thing into your project, there is 1 CSS file you need to include along with bootstrap and there are several js files provided.

If your a developer it won’t take you more than 15 minutes to integrate.

The way it works is basically its like a skin for bootstrap with a few extras! All in all excellent stuff, very well built!

Thanks for the reply! I’m curious – Will I have to purchase the Pro HTML version just to see how it styles everything? I like the “idea” they’re presenting, but I’d really like to know what an implementation of this skin does. I’m just not entirely sold on something I can do myself, though without actually seeing whatever it claims to do – that’s where this is a bit confusing. For example: “Lots of components” – like what? “Grid-based design” and “Responsive layout” – Everything presented here Bootstrap already does. “Swatches”? I don’t need to pay for that. Every Bootstrap template out there even gives a live demo, but I’m just not seeing it here.

Do you have a working example I could look at? Any help would be appreciated. Thanks again!

The thing is doing all of this yourself would mean spending a lot of time, you either spend time or you spend money. In our case we don’t want to spend time doing this stuff hence it’s worth it for us to spend a bit of money and get it done, our project moves faster this way.

Not sure if you are aware but they have a free version of all this that includes the HTML files as well perhaps check that out?

Hi, I’m a designer and a recently qualified, very new junior developer. I need some help understanding how the two (PSD & HTML link). We have a backend developer working on rails for the project but I am doing all the front-end. Once I complete my design in the PSD, whats the procedure to make an HTML file with the exact components used and positioning of everything. Im a little confused and there doesnt seem to be much documentation / tutorials on taking your design and ‘exporting’ it to HTML, LESS and JS. Are we meant to just copy / paste the elements into a new text editor and work from there? So sorry if this question is too obvious, please bear in mind, I am new to the whole developer world.

Sam, thanks for your gem “designmodo-flatuipro-rails” – but is it correct this gem only seems to work with Bootstrap 2? It has a requirement of the “twitter-bootstrap-rails” gem, which doesn’t come with Bootstrap 3.

I love Flat UI because I am 11 and love coding and design. This is the best thing I have seen in my few years. I want to change the world and for that I need a good looking website. Flat UI can help me in that tremendously.

I love flat design design because it allows me the Designer to put content first. Flat design is the latest (r)evolution of design to date.

Flat design focuses on content first. This forces us Designers to look at the content and usability first instead of design first.

Web sites and apps that are design heavy forced me to focus on the design aspect first. With flat design users have simple and direct access to the information they were looking for instantly.

Most people use mobile phones to browse the internet today, so it is important to create mobile versions or responsive designs of a web site. Flat design makes it easier to do so because it is so minimalist and clean and you do not have to implement shadows, glossy or 3D elements into your designs.

Since flat design does not have a lot of graphics, web sites and apps will load quicker. This is another good reason to think about flat design because no one wants to wait 3 minutes to fully load a web site when the mobile connection is slow.

I love flat design because it is minimalist, clean and effective. Designmodo sets the standard for flat design with their Flat UI Pro product.

Hi, I just got an idea and work as a startup right now. But I will get some partners to join my team and we will form a company in the near future. We will only use Flat UI Pro in our own projects but not make anything for sale with it. In this case, should we buy the personal license or developers license ? (From your license agreement, we can use personal license. )

Will the pay versions have complete uncompiled .less files for everything that we can compile on our own? Adding what we need for custom designs but not just having to include a monolithic flat ui .css file?

The paid version includes LESS files, you can modify them at your discretion, and re-compile them as you need. But the pack doesn’t contain css files for each individual component, all styles are contained in the flat-ui.css file.

Need some ideas, or inspiration, to create a layout in photoshop. It’s cool having all of the pieces in the Flat UI psd, but creating a layout from them is a whole other story, much less an html site. I just come up blank. Does anyone know a good source for some sample layouts to get some general ideas from that Flat UI could be applied to?

no, it is not included in the Pro version. You can easily migrate it from Free version by copying its styles and markup. We are not yet ready to expand our components list for Pro version (hopefully it will be an additional pack that will include tons of add-ons, haven’t decide yet)

The paid version includes LESS files, you can modify them at your discretion, and re-compile them as you need. But the pack doesn’t contain css files for each individual component, all styles are contained in the flat-ui.css file.

Sirs,
Please help me, ’cause I have a huge dilemma.
I’d like to buy a piece from this pearl but I’m not sure which license should I choose because I’m making web pages with two of my friends (I mean we’re making the same pages together).
In such case is it enough if I buy only one Personal License for us or should We pay for three licenses?
Thanks for your help and sorry for my poor english… :)
Cheers from Hungary

Dear Richy,
I don’t understand what is your problem.
I’m not a “cheapskate” just this license question is really don’t clear to me…
If “the guys” will say that I need to pay for three licenses I will do because they really deserve it but if it is enough to buy only one license I would be fool to pay more than it’s needed…
Maybe you are right…. I should not ask next time just simply buy only one license and use that with my friends… maybe it would be illegal but who cares… at least no one would call me “cheapskate”…
Thanks again… and sorry but If this is your “club” than I’m afraid, but I guess I don’t wanna be a member…

Perhaps it would be helpful that whenever a Designmodo personnel leaves a post it should have a marking that says that. Then if an “Expert” adds to the conversation, we will know that that is exactly what they are..”experts” but not a Designmodo operative.

You have created a truly sweet product that is resonating both with experts and newbies alike, so please make time or a video to address all the FAQs for the Newbies that the “experts” are finding annoying.

God help me when I get stuck with my html pack and I dare to ask a question even though I have documentation attached with my purchase.

Support is support and every client should be made to feel comfortable enough in their own abilities regardless of expertise levels.

Hi
I bought your nice framework.
I am new in the Bootstrap world.
I made a page with a navbar top fixed with a dropdown..
When i Resize the window to fit like a phone and test the responsive, the dropdown is displayed when I click on it..but if the mouse leave the drowdown link, the “links” are still displayed hover the other links…
It’s working like expected if I don’t use the flat ui css.

I found Flat UI searching for a… flat CSS framework. I’ve been surfing this website by a while now, but I’m a little bit confused.

1. I saw there is a free “demo” version of the kit with limited components, but there is _no_ documentation at all but the demo page (which doesn’t explain much, lots of demo- classes and there are tons of files I think the final website may never use, or I don’t know what they do (i.e. the javascript files)). Why isn’t the free version documented? I know you prefere to sell the product, but I won’t buy something I don’t understand first.

2. All the tutorials I saw on this website are about working with Photoshop, while I prefere to work directly with a text editor – is there any kind of features page like bootstrap’s or detailed documentation? The “HTML” package lists “Documentation”, but how’s it structured?

3. I know this is built upon Bootstrap, but I found no-where how to integrate your (free) classes with its own (i.e. a “Flat UI” navbar)

4. I’m planning on building up a community-driven website with optional payments – thus I think I’ll have to buy a commercial licence (if I’ll choose to use this framework). May I eventually buy the personal one and pay the difference once I decide to publish it?

1. Don’t know much about free version. You need documentation as there are special classes or structure you need to follow for some of the elements. Most are pure bootstrap style code.

2. There is bootstrap like documentation of all elements with examples in code. Well documented and they keep expanding and updating.

4. These guys put lot of effort in, just buy the license you are going to use it for. If you are completely unsatisfied, I’m sure they will make a plan. What you see is what you get. Documentation is there. Less structure also. All js files.

5. Future updates are free. They just upgraded the whole kit very quickly from Bootstrap 2.3 to Bootstrap 3 which is a massive change. The community asked for it and they delivered.

Well, a personal licence is just 39$, a commercial one is 149$ – a huge difference. As this is a personal project and not a job, I’m not sure it will eventually be published. And I don’t want to spend 149$ for… nothing de facto. This is why I’d like to ask if it was possible to eventually pay the difference and upgrade the licence.

In Flat UI Pro 1.2.x width of form elements is equal to parent container width, unfortunately, there is no such opportunity in Flat UI Pro 1.1.x due to restrictions imposed by Bootstrap 2.3.2, and you will have to add an additional css rule in order to set the desired length for form elements.

> How would the upcoming Startup Framework relate to Flat UI Pro?
The Startup Framework will have no support of Flat UI Pro. We planning to integrate this feature a few weeks after the official release of Startup Framework.

> Should I begin with Flat UI Pro or wait till Startup Framework will be available?
It depends on your project. You can start with Flat UI Free (wich is upgradable to Pro version) and save your money https://designmodo.com/flat-free/

> Is it possible to switch form personal to commercial license in a later stage?
Yes. You can upgrade your license right before the release of your project/product.

We recently bought the Flat PRO UI Kit. As we understand the UI Kit is built on Bootstrap Framework.

We have use Angular JS in our project for integration. Is this UI Kit (based on Twitter Bootstrap) compatible with Angularuiboostrap JS file or does you have the your UI Kit version for the angular .i.e. with directive ?

As I see your js file don’t have the angular directive which how the angular binds element value to model.

Let put it this way if I remove your js files and put angular ui boottrapjs which comes with the ready made directive all your effects will be still not get break. As per my understating this will sure break and won’t work with angularuiboottrapjs.
Any tips on making this kit usable with Angular JS Framework?

Bootstrap and Flat UI Pro uses jQuery, all modules/plugins written to work in jquery style. We always try to use latest version of Bootstrap, so if Angularuiboostrap compatible with Bootstrap 3.0.3 and higher you can replace bootstrap.js.

But also we use third-party plugins that not compatible with AngularJS, and you must be willing to abandon the use of these plug-ins or rewrite these plug-ins for your project.

Hey there guys, really love your work. This framework is just so smooth and clean. A pretty simple question:

I would like to create a video template (in After Effects) and sell it on VideoHive.net. This template would be based on your framework. You already allowed me to do this with your free part of the framework. Now I would like to make another one and animate also few icons (about 20) from the PRO version. I do not use any of the HTML, CSS or other web stuff. I will basically just use the icons from the .psd file, transfer/re-create them in After Effects and animate them…and then use them in my future template(s). Your original .psd file WILL NOT be accessible to the end user. I will also give you a credit in the file description and also in the help file. Can I do this with developer license for designers?

Hi thanks for the great work. I am trying to compile the FlatUI LESS files within Visual Studio. I receive an error message of “extend .clearfix has no matches”. I have just started with FlatUI and am pretty new to LESS as well, but in looking at the LESS files in Visual Studio, there seems to be an error reported for each instance of extend. Here is an example:

I am a long time fan of flat ui library. Can you make a version with Flexbox? It would make sense since it is native in the browser and bootstrap isn’t. I am using web components(Polymer) and I can’t figure out a way to make this work.

I gladly would buy Flat Ui pro again for a version that is web component friendly :)