Flat UI Pro Tutorial: Setting and Compiling Using LESS

Flat UI Pro Tutorial: Setting and Compiling Using LESS

David East takes you step-by-step through the process of using LESS settings using Designmodo’s Flat UI Pro in this new video tutorial.

In this video tutorial, you use components from Flat UI Pro to create a complete simple mail app using LESS. He takes you through the steps to set up LESS files and stylesheets for the application. The tutorial explains use of both WinLESS and SimpLESS applications for both Windows and Mac users.

SEE ALSO: How to Use a CSS Preprocessor to Avoid UI Inconsistencies

The video takes you through the steps to create LESS settings for menus, a sign up form and more, including an optional tutorial on responsive fixes.

The tutorial is easy to follow using any platform or editor to develop basic CSS. You will need basic web design and coding knowledge to easily complete this tutorial.

Setting and Compiling LESS

What you will learn in this tutorial: How to create LESS settings and compilations for both Windows and Mac.

Video run time: 12 minutes

Part 2: How To Use LESS in the Creation of a Horizontal Menu

David East is a Developer Advocate for Firebase in San Francisco. You can visit his website davidea.st where he blogs and provides code snippets. Follow him on twitter @eastdotnet.

Newsletter

9 Comments
  1. Helder Lucas Nov 5, 4:36 pm

    Nice tutorial. Another nice program to increase your workflow if using a Mac is codekit. Waiting for part 2 :D

    Reply
    +1
    • David East Nov 5, 5:00 pm

      Ah yes! How could I have forgotten CodeKit! That is probably one the better tools for Mac.

      Part two should be up soon and many more after that as well.

      Reply
      +4
  2. sebastienbarre Nov 11, 11:38 pm

    Nice. Quick question though. When I reload my page, I notice a small lag, most likely due to less.js parsing all the files imported from mailer.less. With that in mind, why not include flat-ui.css instead of bootstrap.css from the HTML file, and not import flat-ui.less from mailer.less? That would lead to the same result, right?

    Reply
    +2
    • sebastienbarre Nov 12, 3:12 am

      Sorry, why I meant is leave bootstrap.css but include flat-ui.css as well, to avoid parsing flat-ui.less, which is included before all the other imports anyway.

      Reply
      +2
      • David East Nov 13, 3:49 pm

        Hey Sebastienbarre,

        The reason why I include flat-ui.less in the manifest is for the compilation of all the files. Ideally I would include bootstrap.less in there as well. This way when I actually combine and minify all the files it’s a simple process.

        However, for development purposes, you’re right it is a bit slower doing it that way.

        Reply
        +1
  3. Gheorghe Florin Nov 15, 5:42 am

    Hello David East,

    I did exactly that in this tutorial, but unfortunately the file is not applied in broser less, I want to tell you that using both firefox and chrome but not applying variable defined.

    If you can please tell me what would be the problem, using VS 2012 for the first time and I can not figure out what the problem is, I would be grateful, thanks.

    Reply
    +2
  4. Olivier C. Dec 7, 4:21 pm

    Very helpfull tutorial tout start with. Just wondering if you can explain more on the reset.less file you are recommanding to use. Is a specif one or you are using Eric Meyer’s reset css file ? Do you have recommendation about order between reset.less and boostrap and flat-ui ?

    Reply
    +2
    • Michael Dec 14, 8:39 pm

      I would also like to know the content of the reset.less file. Thanks for this tutorial!

      Reply
      +1
  5. Michal Jan 12, 1:27 am

    Hi David, thanks for the tutorial.
    As a few guys here I also wonder what’s in reset.less.

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters