Lucho’s Front-End Framework

This framework is built over several years of front-end development knowledge. It is as agnostic as possible. The only thing I focused on was to make the sass as modular and automated as possible helping you writing style over fixing/maintaining it.

You can drop me a line on @chuckn0risK

Requirements

• node.js 0.12.x/npm

Development Features

• Render elements consistently with Sanitize.css
• Responsive Typography with : Modular Scale + Responsive Modular Scale
  For further informations about Responsive Web Typography: Pro Web Type
• SMACSS Architecture
• Media Queries With Superpowers
• Automated Sass documentation Just go to: path/to/your/directory/sassdoc
• Build process with Gulp which includes:
  • Live preview server (using BrowserSync)
  • CSS Autoprefixing
  • Sass compilation
  • SVG Spriting (generate PNG fallbacks with svg4everybody for accessibility)

Getting Started

1. Clone this repo in your dev directory via your git interface or via your CLI (Command Line Interface). I personally use iTerm.

2. Once you are in the repo directory download node packages : (sudo) npm install or (sudo) npm i. It will download all the packages listed in the package.json situated at the root of the project.

3. When you're done you can compile the assets and start the server by running the gulp command.

Sass Architecture

└── scss
    ├── base
    ├── components
    ├── fonts
    ├── layouts
    ├── pages
    ├── tools
    ├── vendors
    └── style.scss
    └── styleguide.scss

Definitions

• Base: typography, base style, sanitize.scss
• Components: contains atoms and molecules (see Atomic Design Taxonomy)
• Fonts: just fonts imports via font-face
• Layouts: organisms aka wrapper templates
• Pages: individual pages
• Tools: variables, sass functions, mixins, media-queries, utility-classes
• Vendors: holds 3rd party code

Things you may want to do

Use the SVG icon system

Just add your SVG files in assets/icons and run gulp svgstore. This task takes all the icons situated in assets/icons and generates a sprite in assets/icons/dest/icons.svg. Add a specified icon in yout HTML like so:

<svg>
    <use xlink:href="icons/dest/icons.svg#twitter"></use>
</svg>

If you're not comfortable with SVG sprite Chris Coyier recommands a simpler technique.

To generate PNG fallback for browsers not supporting <use>: run gulp svg2png. This task generates PNG fallback for each SVG files in /icons directory and puts them in icons/dest directory. These fallbacks will then be used by svg4everybody.

Build the project

To build the project run gulp build.

Some pieces of advice

• Take the habit of writing your css methodically as proposed by the SMACSS methodology:

 .my-selector {  
    // mixins and extends first, unless  
    // they're specifically related to a rule  
    @include some-mixin;  
  
    // Box  
    position: relative;  
    display: block;  
    height: 200px;  
    width: 200px;  
    margin-left: auto;  
  
    // Border
    border: 1px solid $red;
    border-radius: 100%;
  
    // Background
    background-color: transparent;
    box-shadow: 10px 10px 5px $lightgrey;

    // Text
    font-family: $font1;
    font-weight: 600;
    @include rms(2);

    // Other
    z-index: 10;
    
    // pseudo-classes follow because  
    // they narrow down a selection of the parent  
    &:first-child {  
      
    }  
    
    // action-based pseudo-classes are next because  
    // they style states of the parent  
    &:focus,
    &:hover {  
  
    }  
  
    // media queries come next because  
    // they describe modifications to the parent
    @include mq($from: tablet) {  
      color: $red;  
    }
    
    /*  
    * nested elements and pseudo-elements  
    */  
      
    // pseudo-elements comes first
    &::after {  
      content: 'hey, I am a pseudo element';  
    }  
  
    // element selectors are next and are alphabetical  
    a {  
      
    }  
  
    // class name selectors are last because  
    // they can modify un-classed elements  
    .some-nested-selector {  
      
    }
}

Further reading: idiomatic CSS by @necolas

• When creating/renaming classes:

  • Don't delete old class names until it is safe to do so. Leave them in place and include new class names.
  • Avoid content based class names, use functional class names instead.
  • Use conventions like BEM naming methodology.

• Never use #ids in your css. It’s bad for specificity.

• Try to separate the disposition of a component from its core style. The former will change according to the page whereas the latter should remain untouched.
  
  

People worth to follow

Monitoring closely what’s happening in the front-end world will help you improve this framework so you can tweak it and optimize it. Here are some awesome people I encourage you to follow :

* @adactio
* @beep
* @brad_frost
* @rachelandrew
* @csswizardry
* @chriscoyier
* @vlh
* @aerotwist
* @davidwalshblog
* @paul_irish
* @lukew * @ireaderinokun