Beginning CSS.
- 2. Outline Where does CSS fit? How to Program. Bootstrap. Responsive Design. Flat/Realistic Design. SASS. Annoyances. Conclusion.
- 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. How to Program Syntax is learnt by trial and error. Developer console / Firebug is useful.
- 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. 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.
- 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. Responsive Design (2) : Mobile CSS shows up in unexpected places.
- 11. Flat vs Realistic Design Flat is trendy. iOS 7. Realistic (skeuomorphic) design getting outdated. flatvsreal.co
- 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.
- 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. SASS (3) : Variables sass-lang.com/guide
- 16. SASS (4) : Nesting sass-lang.com/guide
- 17. SASS (5) : Nesting cont’d sass-lang.com/guide
- 18. SASS (6) : Partials Partials aide modular design. Encourage reuse.
- 19. Annoyances Cross browser issues often learnt the hard way. Wikipedia, CSS
- 20. Annoyances (2) CSS hacks. Elegant programming can be difficult.
- 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.