Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Bootstrap + LESS

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #34983
    aoeui
    Participant

    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

    #89959
    aoeui
    Participant

    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

    #89964
    aoeui
    Participant

    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

    #90005
    Johnnyb
    Member

    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

    #90006
    aoeui
    Participant

    hi,

    as you mentioned I needed to extract the CSS generated
    thanks

    #106502
    HalcyonART
    Member

    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

    #117391
    Edson
    Participant

    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.

    #117395
    davidlab.be
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.