Flat UI Pro Tutorial: How To Use LESS in the Creation of a Horizontal Menu

Flat UI Pro Tutorial: How To Use LESS in the Creation of a Horizontal Menu

David East takes you step-by-step through the process of using LESS and HTML to create horizontal menu using Designmodo’s Flat UI Pro in this new video tutorial. This video is Part 2 in the Flat UI Tutorial Series, following “Flat UI Tutorial: Setting and Compiling Using LESS.”

In this video tutorial, you use components from Flat UI Pro and the steps from the previous video in the series to use LESS settings to create horizontal menu navigation.

SEE ALSO: How to Customize a Website with Startup Framework

You will learn to move a design from Adobe Photoshop to your development site, using LESS and by creating CSS. The tutorial explains how to set proper spacing and variable settings so that your final menu navigation will have a professional look and feel.

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. A familiarity with Photoshop is also recommended.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Creating a Horizontal Menu

What you will learn in this tutorial: How to use LESS styles and HTML to create Horizontal menu navigation.

Video run time: 11 minutes

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

14 Comments
  1. Edwin Elia Nov 7, 4:52 pm

    This tutorial is awesome! Thank you so much!

    Reply
    +2
  2. Devin Nov 8, 1:00 am

    I’ve never seen visual studio look like that! It looks like my PHPStorm… props

    Reply
    +1
    • Steve Lombardi Nov 8, 3:45 pm

      Yes, how did you do that to VS?

      Reply
      +1
    • David East Nov 8, 7:32 pm

      It’s actually a setting within VS. You can change the theme to the “Dark” setting. There’s also a website out there that has a ton of custom Visual Studio themes as well.

      Reply
      0
      • Simon Nov 20, 5:00 pm

        What’s the name of the color scheme you are using?

        Reply
        0
        • David East Nov 20, 5:05 pm

          I’m using Flat UI Pro so the majority of the colors I’m using are included in the kit.

          Reply
          0
  3. Helder Lucas Nov 8, 3:41 pm

    Curious to see how you will do the vertical menu ;P.
    I just didn’t understood why you used scroll in the search icon and what it actually do.
    Once again awesome tutorial.

    Reply
    +2
    • Edwin Elia Nov 8, 6:28 pm

      I’m also curious about this. Why wouldn’t you use auto instead?

      Reply
      +1
      • David East Nov 8, 7:30 pm

        Actually, it didn’t need to be in there at all. Sometimes I get too hasty while recording these things. Thanks for catching that!

        Reply
        +2
  4. George Nov 14, 5:39 pm

    Thanks for this tutorials! You convinced me to use less :)

    Reply
    +1
  5. Xander Dec 9, 6:23 pm

    is all that I see completely made with the Flat UI Pro kit? or dit the maker of the video add custom design?
    when I look at the Flat UI page.. I only see this happy gayish power puff design unlike the superhere cool Square UI design.. which could be used for batman’s custom cms.

    sparkle sunshine unicorn,

    Xander

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters