Skip to content

sylbal/HelpLess

BranchesTags
 
 

Repository files navigation

HelpLess logo

HelpLess

  1. What is it?

    HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. Read more about LESS: http://lesscss.org/

    HelpLess also comes bundled with html5-boilerplate-less, which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size.

    Most of the work here was made by Matt Woodfield and all his credits are present. I have forked the project as it seems to be slepping since 2012. My major contribution (so far) is the implementation of the 960 Grid System. I have choose to implement it as an external plugin to give more flexibility. To offer another alternative, I have included another plugin to use Frameless. Finally, the original HelpLess grid system by Matt was also extracted to run as a plugin.

  2. Installing

    Clone the repository or download the zip and include helpless (and optionally the desired grid plugin) in your main style.less file. Alternatively you can use html5-boilerplate-less as mentioned above.

  3. Compatibility

    You will need less.js to compile LESS or one of the other compile tools available. See lesscss.org for more details

  4. Getting Started

    Importing

     @import 'libs/helpless-x.x.x.less'; // Where x.x.x corresponds to the version number

    Normalize To add normalize.css to your stylesheet call #hl.normalize() at the top of the document outside of any html elements.

     #hl.normalize();
 
 body {
     ...
 }

    Clearfix

     body {
     ...
     
     .ul {
         #hl.clearfix();
         
        li {
            float: left;
            ...
        }
     }
 }

    Setting up a grid. I will use the following html structure as an example:

     <html>
 ...
 <body>
     <div id="main">
         <article>
             <div class="content">
                 ...
             </div>
             <aside>
                 ...
             </aside>
         </article>
     </div>
 </body>
 </html>

    To add my grid to this html I would use:

     body {
     ...
     
     #main {
         #hl.grid.960(); // default 960 grid with 16 columns and a 10px gutter
         
         article {
             #hl.grid.row();
             
             .content {
                 #hl.grid.col(10);
             }
             
             aside {
                 #hl.grid.col(6);
             }
         }
     }
 }

    Themes Themes are a way of quickly styling the base elements of your page. They do not add any structural or layout based styling

     body {
     #hl.ui.themes.light();
     
     ...
 }

    Typography There a number of different helpers for typography. If you want to quickly choose a serif style with the addition of a webfont you would:

     body {
     #hl.typo.serif('Sorts Mill Goudy');
     
     ...
 }

    or a sans-serif:

     body {
     #hl.typo.sans('Droid Sans');
     
     ...
 }

    Lists To quickly remove the default bullet styling from a list:

     ul {
     #hl.ui.list.subtle();
 }

    And a horizontal list, for example if you were creating a site nav that runs along the top of the page

     ul {
     #hl.ui.list.horizontal();
 }

  5. Reference

     BASICS                    

     Name                             Usage
 - .reset                   =>    #hl.reset() - call outside of element
 - .normalize               =>    #hl.normalize - call outside of element
 - .clearfix                =>    #hl.clearfix()
 - .centered                =>    #hl.centered(width)
 - .border                  =>    #hl.border(color)
 - .opacity                 =>    #hl.opacity(value)
 - .round-all-corners       =>    #hl.round-all-corners(radius)
 - .rounded-corners         =>    #hl.rounded-corners(topLeft, topRight, bottomRight, bottomLeft)
 - .transition              =>    #hl.transition(property, duration, ease, delay)
 - .drop-shadow             =>    #hl.drop-shadow(x, y, blur, color)
 - .inner-shadow            =>    #hl.inner-shadow(x, y, blur, color)
 - .text-shadow             =>    #hl.text-shadow(x, y, blur, color)
 - .background-gradient     =>    #hl.background-gradient(colorFrom, colorTo, fallbackColor, fallbackImageUrl)
 - .scale                   =>    #hl.scale(amount)
 - .scaleX                  =>    #hl.scaleX(amount)
 - .scaleY                  =>    #hl.scaleY(amount)
 - .rotate                  =>    #hl.rotate(degrees)
 - .rotateX                 =>    #hl.rotateX(degrees)
 - .rotateY                 =>    #hl.rotateY(degrees)
 - .skew                    =>    #hl.skew(angleX, angleY)
 - .skewX                   =>    #hl.skewX(angleX)
 - .skewY                   =>    #hl.skewY(angleY)
 - .translate               =>    #hl.translate(x, y)
 - .translateX              =>    #hl.translateX(x)
 - .translateY              =>    #hl.translateY(y)
 - .matrix                  =>    #hl.matrix(n, n, n, n, n, n)        

     GRID                       

     Name                             Usage
 - .grid                    =>    namespace, do not call directly, use .make or one of the predefined grid makers
  - .make                   =>    #hl.grid.make(width, colNumber, gutterWidth)
  - .1200                   =>    #hl.grid.1200();
  - .1120                   =>    #hl.grid.1120();
  - .1040                   =>    #hl.grid.1040();
  - .960                    =>    #hl.grid.960();
  - .880                    =>    #hl.grid.880();
  - .800                    =>    #hl.grid.800();
  - .720                    =>    #hl.grid.720();
  - .640                    =>    #hl.grid.640();
  - .560                    =>    #hl.grid.560();
  - .480                    =>    #hl.grid.480();
  - .400                    =>    #hl.grid.400();
  - .320                    =>    #hl.grid.320();
  - .240                    =>    #hl.grid.240();
  - .row                    =>    #hl.grid.row();
  - .col                    =>    #hl.grid.col(colSpan);

     TYPOGRAPHY

     Name                             Usage
 - .typo                    =>    namespace, do not call directly
  - .serif                  =>    #hl.typo.serif(webfont-name-optional);
  - .sans                   =>    #hl.typo.sans(webfont-name-optional);
  - .columns                =>    #hl.typo.columns(count, gap)

     IMAGES

     Name                             Usage
 - .img                     =>    namespace, do not call directly
  - .responsive             =>    #hl.img.responsive();
  - .framed                 =>    #hl.img.framed();    

     USER INTERFACE

     Name                             Usage
 - .ui                      =>    namespace, do not call directly
  - .themes                 =>    namespace, do not call directly
   - .light                 =>    #hl.ui.themes.light(); - call within <body> element
   - .dark                  =>    #hl.ui.themes.dark(); - call within <body> element
  - .list                   =>    namespace, do not call directly
   - .subtle                =>    #hl.list.subtle(); - call within <ul> element
   - .horizontal            =>    #hl.list.horizontal(); - call within <ul> element

  6. Thanks

    Included in HelpLess are two reset mixins:

    Eric Meyer's html reset Necolas' normalize

  7. License

    HelpLess is released under the MIT license.

    Copyright (C) 2011 by Matt Woodfield

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Meyer Reset: public domain Normalize: Public domain

About

A lot of LESS help

m6tt.github.com/HelpLess

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published