Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
CSS

Web Con, University of Illinois Conference Notes Part 1.

Cory Rylan

-

Updated

Here are my notes from University of Illinois Web Con 2014. These are from the talk
"Life without a BS Foundation"
by Kianosh Pourian.

"Build a framework around your design not design around your framework."

Cons for using front end frameworks such as Twitter Bootstrap and Zurb Foundation:

  • Not semantic
  • Naming conventions not established/documented poorly
  • Performance issues (bloat)
  • Little to no file structure especially Sass project for Bootstrap
  • Difficult to update
  • Design implementation frameworks fall short
  • Does not follow the DRY principals
  • Overriding is very difficult and tons of extra code and uses little of the framework
  • Editing the framework breaks any update
  • Impossible to create a framework for everyone
  • CSS is old and part of the issue
  • Spend a lot of time learning someone else's code
  • Not ideal for enterprise or large applicaions
"When building a site or web application, one must build it for success. Success means that small projects will evolve into large projects.

What to do:

  • "Do the sh*t yourself"
  • Write your own CSS
  • Create Style Guides
  • Use Sass or a preprocessor
  • Follow OOCSS Principals
  • Atomic Design
  • Organize your code in modules in folders (each folder is a atom or module)
  • The global import file should have comment of what the modules are being imported for
  • Have a unified naming convention
  • Folders helps packages modules for individual consumption
  • Learn from frameworks such as Twitter Bootstrap and Zurb Foundation
Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

CSS

Design System Architecture - Managing CSS Themes

Learn how to use leverage CSS themes to create a flexible and efficient theming system in your design system architecture.

Read Article
CSS

Flow Charts with CSS Anchor Positioning

Learn how to use CSS Anchor Positioning to create flow charts and diagram with just CSS.

Read Article
CSS

Dynamic Contrast Layers with CSS Style Queries

Learn how to create contrasting layers with CSS style queries ensuring your UI is always the right contrast ratio.

Read Article