BootStrap and Foundation Frameworks Are Not Your Crutch!

Created by Kianosh Pourian / @kianoshp 

http://kiano.sh/1fJlxml



BootStrap and Foundation Frameworks Are Not Your Crutch!
Life without a BS Foundation

Created by Kianosh Pourian / @kianoshp

http://kiano.sh/1fJlxml

About me


User interface Developer

Part time designers and User experience consultant

Pretend to be an UI architect

Clients: Staples, VMWare, Isobar/Molecular, Harvard business school, MIT, Confer technologies, AltiSource Labs

Recent Conversation

  • We can't upgrade from "Foundation 3.2" to "Foundation 4.0"
  • Why?
  • Because some of the class names have changed
  • What is the effort?
  • A lot

Don't use Twitter Bootstrap or Zurb Foundation




Why such a stance?

  • Semantic HTML & CSS
  • Design implementation can break the chain
  • Performance implications
  • OOCSS implementation
  • File organization 
  • Coding convention?

Semantic HTML & CSS

  • Over arching reach of the framework
  • Conceptual naming vs. semantic naming
  • examples:
    • btn-primary, btn-info
    • .navbar
  • better examples:
    • btn-submit, btn-action
    • main-navigation

Design implementation

  • Implementing the design is where the framework fall short
  • Button example

Modular design

  • Atomic design
  • The parts:
    • Atoms - labels, input, table, button
    • Molecules - input + label, search + button, table + sort
    • Organisms - navigation bar consisting of navigation buttons/links, search form, and logo
    • Templates - organisms combined together to form page-level objects
    • Pages - specific instances of templates

Modular Design Implementation

  • To implement "Atomic Design", design must be considered from the beginning
  • It is impossible to create a framework that can be everything to everybody

File organization

  • Keep file organized
  • Most frameworks are organized as:
    •  "piles on the floor"
    • "sock drawer"

Bootstrap


Zurb Foundation


Modular Organization

  • Best organization method is modular organization
  • Clean out your Sass Junk drawer - Dale Sande

    • File Structure

    |- sass/
|--- buttons/
|--- color/
|--- forms/
|--- layouts/
|--- modules/
|--- typography/
|--- ui_patterns/
|--- _buttons.scss
|--- _config.scss
|--- _forms.scss
|--- _global_design.scss
|--- _reset.scss
|--- _typography.scss
|--- style.scss

    File Structure Exploded

    |- sass/
|--- modules/
|----- registration/
|------- _extends.scss
|------- _functions.scss
|------- _mixin.scss
|------- _module_registration.scss
|------- _module_personalInfo.scss|----- purchase/
|------- _extends.scss
|------- _functions.scss
|------- _mixin.scss
|------- _module_summary.scss
|------- _module_purchase.scss

    Style.scss



    Coding convention

    • Unified naming convention
    • Ability to package each component in order for proper consumption

    CSS is part of the problem

    • It’s old. Really old
    • It can’t be changed
    • It operates in a global namespace
    • It’s based on inheritance
    • It’s very, very loose
    • Source order is critical
    • The cascade needs managing
    • Specificity negates all of the above

    Method to the madness

  • As Scott Kellum mentioned in his article, "UI Kit is dead":
  • Your CSS should " not dictate how  HTML  or the design of the site should look but they are instead tools to help you reach your own design ideals.  "
  • " CSS isn’t voodoo, it’s a simple and straightforward language where you declare an element has a style and it happens. "

    • As Harry Roberts, of csswizardry.com, says:

    "A [CSS] framework should not 

    do your work for you, it should 
    allow you to do
 your own work faster"



    Short answer

    • As Brad Frost stated when introducing Pattern Lab at Beyond Tellerrand 2013, "do the shit yourself". 
    • Build it modular.
    • Take advantage of CSS pre-processors like Sass.
    • Button example

    Happy Medium

    • Use it bit by bit
    • Learn from it
    • Build your own structure
    • Use a pre-processor --> Sass CSS

    "When building a site or web application, one must build it for success. Success means that small projects will evolve into large projects"
    Me, now 2014

    Thank You

    &

    Questions?

    Made with Slides.com