BEGINNING
CSS

Dr.
Chiang

Dhruv Gairola (TA)
Outline











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





Client is your computer/browser.
Server is some other computer.
Client related e.g., HTML...
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 protot...
Bootstrap (2)






Due to its popularity, a lot of websites looks
very similar and potentially generic.
If the magic i...
Bootstrap (3)
Bootstrap (4)
Responsive Design








Important nowadays due to popularity of
mobile devices.
Relatively inexpensive way to make y...
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.co
Flat vs Realistic Design (2)







People comfortable with buttons and things.
No need to resemble physical world li...
SASS


CSS Extension.
SASS (2)





Offers nesting, variables, inheritance, etc.
Easier to maintain.
Compiled to CSS by the SASS interpreter...
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 i...
Upcoming SlideShare
Loading in …5
×

Beginning CSS.

404 views

Published on

TA slides for beginner lesson on CSS.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
404
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beginning CSS.

  1. 1. BEGINNING CSS Dr. Chiang Dhruv Gairola (TA)
  2. 2. Outline         Where does CSS fit? How to Program. Bootstrap. Responsive Design. Flat/Realistic Design. SASS. Annoyances. Conclusion.
  3. 3. 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.
  4. 4. How to Program   Syntax is learnt by trial and error. Developer console / Firebug is useful.
  5. 5. 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.
  6. 6. 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.
  7. 7. Bootstrap (3)
  8. 8. Bootstrap (4)
  9. 9. 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.
  10. 10. Responsive Design (2) : Mobile  CSS shows up in unexpected places.
  11. 11. Flat vs Realistic Design   Flat is trendy. iOS 7. Realistic (skeuomorphic) design getting outdated. flatvsreal.co
  12. 12. 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.
  13. 13. SASS  CSS Extension.
  14. 14. SASS (2)     Offers nesting, variables, inheritance, etc. Easier to maintain. Compiled to CSS by the SASS interpreter. Used in Ruby on Rails mostly.
  15. 15. SASS (3) : Variables sass-lang.com/guide
  16. 16. SASS (4) : Nesting sass-lang.com/guide
  17. 17. SASS (5) : Nesting cont’d sass-lang.com/guide
  18. 18. SASS (6) : Partials   Partials aide modular design. Encourage reuse.
  19. 19. Annoyances  Cross browser issues often learnt the hard way. Wikipedia, CSS
  20. 20. Annoyances (2)   CSS hacks. Elegant programming can be difficult.
  21. 21. 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.

×