beginning css
DESCRIPTION
TA slides for beginner lesson on CSS.TRANSCRIPT
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.