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
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
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 notdo your work for you, it shouldallow 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?
Life without a BS Foundation
By Kianosh Pourian
Life without a BS Foundation
Should I use a CSS framework like Twitter Bootstrap or Zurb Foundation? This is a presentation about the dos and don'ts of using a CSS framework
- 1,475