beginning css

21
BEGINNING CSS Dhruv Gairola (TA) Dr. Chiang

Upload: dhruvgairola

Post on 28-Jan-2015

111 views

Category:

Technology


1 download

DESCRIPTION

TA slides for beginner lesson on CSS.

TRANSCRIPT

Page 1: Beginning CSS

BEGINNING CSS

Dhruv Gairola (TA)Dr. Chiang

Page 2: Beginning CSS

Outline

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

Page 3: Beginning CSS

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.

Page 4: Beginning CSS

How to Program

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

Page 5: Beginning CSS

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.

Page 6: Beginning CSS

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.

Page 7: Beginning CSS

Bootstrap (3)

Page 8: Beginning CSS

Bootstrap (4)

Page 9: Beginning CSS

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.

Page 10: Beginning CSS

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

Page 11: Beginning CSS

Flat vs Realistic Design

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

flatvsreal.com

Page 12: Beginning CSS

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.

Page 13: Beginning CSS

SASS

CSS Extension.

Page 14: Beginning CSS

SASS (2)

Offers nesting, variables, inheritance, etc.

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

Page 15: Beginning CSS

SASS (3) : Variables

sass-lang.com/guide

Page 16: Beginning CSS

SASS (4) : Nesting

sass-lang.com/guide

Page 17: Beginning CSS

SASS (5) : Nesting cont’d

sass-lang.com/guide

Page 18: Beginning CSS

SASS (6) : Partials

Partials aide modular design. Encourage reuse.

Page 19: Beginning CSS

Annoyances

Cross browser issues often learnt the hard way.

Wikipedia, CSS

Page 20: Beginning CSS

Annoyances (2)

CSS hacks. Elegant programming can be difficult.

Page 21: Beginning CSS

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.