Transfer CSS to LESS when Building a Website with Startup Framework

What you will learn in this tutorial: How to code a website (Startup Framework) using LESS for simpler, leaner CSS.
Video run time: 4 minutes

David East takes you step-by-step through changing a website built using CSS to LESS, for simpler code in your website design.

In this video tutorial, we will show you how to use the free LESS app to compile code for a website. We explain how to find the appropriate .less files to use and how to get your code set up properly.

In addition, we help walk you through the troubleshooting process when parts of the site look unlike you expect when doing the conversion. (This includes elements such as stray underlines or missing text.) In a simple step, he shows you how to both find and correct these problems in this tutorial.

By using LESS, your website will be easier to customize. Instructions for how to do that are coming in the next video lesson.

The tutorial is easy to follow and uses files from Designmodo’s Startup Framework and Flat UI. You will need basic web design and coding knowledge and some understanding of Twitter Bootstrap to complete this tutorial.

David East

David East is a Developer Advocate for Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @eastdotnet.

Newsletter

7 Comments
  1. Ty Cahill Mar 11, 11:28 pm

    LESS is merely a CSS pre-processor. It can make our CSS easier to maintain, but it doesn’t necessarily make it simpler or leaner. That all depends on how people configure and use LESS. I’ve seen plenty LESS files that are so packed full of mixins and functions that they’re a mess.

    Reply
    +5
    • David East
      David East Mar 16, 1:42 am

      Properly using LESS can definitely make your website design much simpler. However, I would never say it makes it “leaner” it all compiles down to CSS anyways. The only “lean” aspect is the minification process, which is not exclusive to LESS at all.

      Reply
      0
      • Ty Cahill Mar 16, 2:02 am

        I may have interpreted, “…using LESS for simpler, leaner CSS” incorrectly then.

        Regardless, I completely agree that LESS simplifies things when used correctly.

        Reply
        +1
  2. hughred22 Mar 17, 10:15 pm

    When is the next tutorial? I can not wait. Also, if I get StartUp framework, is all the tutorials are in the purchase package? The tutorial really help me decide if I need startup frame work or not. Since I already have Flat UI Pro, use it very well thanks to the tutorial already made by you. I am kinda on the waiting line of switching. + StartUp also used most of the FlatUI Pro.

    Reply
    +2
    • Adrian Mar 17, 11:37 pm

      We’re working now for new tutorials, minimum seven tutorials coming soon, how to connect flat ui pro and startup framework too.

      Reply
      +1
  3. Josh C Mar 23, 8:52 pm

    As the UX leader at my company, I made the determination to use a customized version of Flat UI for a massive overhaul of our product. I can see though that my dev team hasn’t used LESS in the implementation. I’m going to pass this on to them. Thanks for creating this!

    Reply
    0
  4. Hemachandran Apr 8, 9:27 am

    Always to step ahead in CSS-Processor, Good thoughts… I gonna to try this

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters