the front-end



WHY IS THE FRONT-END IMPORTANT?


  • High Quality design
  • faster page loads
  • quicker Builds
  • Better for seo
  • Better for Accessibility
  • Better UI interactions
  • Winking pigs


TODAY

  • Architecture
  • Grunt
  • JavaScript
  • Sass
  • Quick Demo
  • Questions


The front-end

The WHY and HOW.




THE WHY

Maintainable code
Innovative
Leverage new technologies
Scaleable architecture
Consistent quality
Confidence to make changes




THE How

Component based architecture
JavaScript CommonJS modules
Object-oriented Sass
Best practices
Package management
Tooling (Grunt, Component, NPM)


ARCHITECTURE

How are things structured?
Where does everything go?
How is everything connected?
Why are we doing this!?


Confidence &
SCALABILITY

The two big reasons.


Module-based Architecture

Independent, tiny components that 
do one  thing really well.

Dialog, accordion, validation, ribbon, grid, icons, tooltips, menus, callouts, backgrounds, patterns, calendar, animations, util, tabs...


PACKAGE
MANAGEMENT

What is a package? 
Sharing code between sites
Everything is a package! 
GitHub + Gitorious
Open-source 


    INTERNAL
    PACKAGES

    +25 JavaScript packages
    +20 Sass packages


    GRUNT

    The front-end build tool

    • Compress styles and scripts 
    • Build the project
    • Run tests
    • Check for errors
    • Automatically build


    SASS PACKAGES

    • Contains styles, images, fonts, icons
    • Share common functionality
    • Styleguide templates
    • Documentation


    JAVASCRIPT

    PACKAGES

    • CommonJS
    • Access to 800+ packages
    • Can require files
    • Can contain templates


    javascript


    jquery

    We rarely depend on this library


    commonjs

    What is a CommonJS module?
    Imports / Exports
    Why?


    JAVASCRIPT
    ARCHITECTURE

    Local packages
    Remote packages
    Tests
    Grunt
    Manifest


    TOOLING

    Consistent code
    Check for common errors
    Automate boring processes
    Set and forget


    testing our js

    Mocha
    PhantomJS
    CasperJS
    Looking towards Cloud tests


    modernizr

    www.modernizr.com
    Feature detection


    JS RESOURCES


    SASS

    What is it?
    Why do we use it ?

    Sass allows us to create object-oriented CSS (oocss)
    Sass helps keep our styles 'DRY'
    Sass speeds up development time


    Sass gives us...

    Variables (color, spacing sizes, fonts, etc)
    Nesting Rules
    Selector Inheritance (@extend)
    Mixins (@mixin)
    Imports (@import)


    SCALABILITY

    Object-oriented CSS (oocss)
    Non-semantic class names (.title-1, .title-2)


    SASS ARCHITECTURE

    components = shared sass packages
    local = local packages
    public = compiled CSS
    src = master stylesheet
    grunt.js = task runner
    package.json = a list of node modules for the grunt.js
    component.json = a list of shared/local packages

    All of our styling takes place in components/local


    Styling 

    GUIDELINES

    BEM Methodology (Block Element Modifier)
    Never nest your sass more that 3 levels deep
    Don't use #ID's. Target .classes
    Don't use legacy browser hacks, detect features
    with Modernizr


    grid

    12 column grid
    How we layout our grid
    Responsive grid, breakpoints & spacing

     


    TESTING OUR SASS

    Grunt compilation errors
    Looking towards using PhantomCSS


    SASS RESOURCES

    us :)


    grunt

    What is Grunt?
    What does it do?
    How it works
    Possibilities


    u can haz 

    questions?

    the frontend

    By Chris Buttery

    Made with Slides.com

    the frontend

    • 1,197

    More from Chris Buttery