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

- 1 minute

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

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
Web Components

CSS Container Queries in Web Components

Learn how to use CSS Container Queries in Web Components to create reusable and responsive UI.

Read Article
CSS

CSS Interaction Theming with Accent Color and Color Contrast

Learn how to leverage new and proposed CSS features to make various interaction theming easy and accessible across a variety of UI components.

Read Article