BEGINNING CSS

Dhruv Gairola (TA)Dr. Chiang

Outline

Where does CSS fit? How to Program. Bootstrap. Responsive Design. Flat/Realistic Design. SASS. Annoyances. Conclusion.

Where does CSS fit?

Client is your computer/browser. Server is some other computer. Client related e.g., HTML, CSS,

Javascript, etc. Server related e.g., Java, Ruby, PHP,

Javascript (again), etc. CSS is a client styling language, not a

programming language.

How to Program

Syntax is learnt by trial and error. Developer console / Firebug is useful.

Bootstrap

Bootstrap is a CSS library (also comes with a Javascript library).

Startups use bootstrap for prototyping and shipping MVPs.

Bootstrap 3 is the latest release, which focuses on responsive design and flat design.

Bootstrap 2 is the older design but has a lot more support.

Bootstrap (2)

Due to its popularity, a lot of websites looks very similar and potentially generic.

If the magic in your product is in the front end, then build your own UI or override bootstrap.

Works well for most prototypes.

Bootstrap (3)

Bootstrap (4)

Responsive Design

Important nowadays due to popularity of mobile devices.

Relatively inexpensive way to make your webapp portable to mobile.

Some things are unsuitable in the mobile setting e.g., hovering over buttons.

Existing websites will find migration difficult. Usually have a separate subdomain for mobile.

Responsive Design (2) : Mobile CSS shows up in unexpected places.

Flat vs Realistic Design

Flat is trendy. iOS 7. Realistic (skeuomorphic) design getting outdated.

flatvsreal.com

Flat vs Realistic Design (2)

People comfortable with buttons and things.

No need to resemble physical world literally.

Earlier shadowing was a great to distract from the limitations of display.

Retina display offers sharp resolution. Clear typography is required.

SASS

CSS Extension.

SASS (2)

Offers nesting, variables, inheritance, etc.

Easier to maintain. Compiled to CSS by the SASS interpreter. Used in Ruby on Rails mostly.

SASS (3) : Variables

sass-lang.com/guide

SASS (4) : Nesting

sass-lang.com/guide

SASS (5) : Nesting cont’d

sass-lang.com/guide

SASS (6) : Partials

Partials aide modular design. Encourage reuse.

Annoyances

Cross browser issues often learnt the hard way.

Wikipedia, CSS

Annoyances (2)

CSS hacks. Elegant programming can be difficult.

Conclusion

Use Bootstrap as a starting point in most cases.

Trial and error is part and parcel of CSS, as it is with most web technologies.

Cross browser testing is essential. Need keen eye for design. Beauty is also dependent on graphics. Essential to know basic CSS.