Grow your CSS skills. Land your dream job.

Bootstrap + LESS

  • # October 31, 2011 at 4:38 am

    hi,

    I worked with 960.gs http://grids.heroku.com/
    looks so messy compared to http://twitter.github.com/bootstrap/

    bootstrap is using LESS
    http://lesscss.org/#-client-side-usage

    to generate its CSS in the first place

    in bootstrap there are .less files

    scaffolding.less

    // GRID SYSTEM
    //
    // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there

    variables.less

    // Griditude
    // Modify the grid styles in mixins.less
    @gridColumns: 16;
    @gridColumnWidth: 40px;
    @gridGutterWidth: 20px;
    @extraSpace: (@gridGutterWidth * 2); // For our grid calculations
    @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

    ok so far understand it
    need it change it as follows

    @gridColumns: 20;
    @gridColumnWidth: 30px;
    @gridGutterWidth: 20px;

    but how can I “render it / convert it” into normal .CSS using the less.js file ?

    http://lesscss.org/#-client-side-usage

    # October 31, 2011 at 4:51 am

    do not understand the way how to compile .less file to .css
    using the javascript file

    I am not native English speaker so it sometimes, still, eludes me what and how to do because I do not understand fully the context

    # October 31, 2011 at 5:33 am

    found this article
    http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

    how to compile is at the bottom but still don’t get the point

    tried it here
    http://krsiak.cz/less/

    as it says, first put .less, .js file goes after it
    understand that but where can I see the actual CSS that is running it, have no idea

    # November 1, 2011 at 10:32 am

    Hey,

    If you want to see the actual CSS that is running you can just use firebug/developer tools – inspect an element and you’ll see the compiled CSS. The less.js file creates the CSS in the browser rather than compiling it on the server, although there is a server side version too (http://lesscss.org/#-server-side-usage).

    John

    # November 1, 2011 at 10:37 am

    hi,

    as you mentioned I needed to extract the CSS generated
    thanks

    # July 20, 2012 at 10:16 pm

    Hey Mate,

    The Johnnyb’s solution is not too bad (on the client side) but it’s not really optimized. Indeed you may encounter issues like source of your images etc.

    To fix your problem use http://wearekiss.com/simpless You gonna have a right render of your CSS file.
    Once the CSS has been generated, you may have to clean up your comments.

    (Geez I am answering to a very old post)
    Cheers

    # July 21, 2012 at 1:31 am

    I already learnt what to do with it
    thanks guys :)

    # December 14, 2012 at 8:21 am

    I use [WinLESS](http://winless.org/ “WinLESS (for Windows)”) to do the work. It monitors my LESS folder and compile the CSS automatically every time I save the LESS file.

    # December 14, 2012 at 8:41 am

    Phpstorm now has a great .less compiler plugin. Awesome!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".