CSS for backend developers

As backend developers we are often faced with the challenge of adjusting the front end look when we add extra features to a site and this is troublesome and feels fiddly. By using frameworks like TailwindCSS we can be faster at doing these changes and also be more confident in these changes.

Transcript

1. CSS for backend developers
2. Who am I? - Blagojce Kolicoski - Senior PHP Developer and project lead @ BrightBox - Actively writing code since 2006 - Electronics enthusiast - Husband and father of two - Teacher/Content Creator/Motivator - https://www.tastethecode.com
3. What I’m NOT!
4. Classic CSS approach .card .card-left .card-right .card-title .card-content .card-footer
5. CSS Components approach - Predefined components - Rapid progress - Basic utility classes - Similar looking apps
6. CSS Utility frameworks - Utility-first - Low level classes - No opinionated styles - Very customizable - PostCSS plugin
7. Why do you need this?
8. Tailwind CSS Core Concepts - Utility First - Margin - Padding - Flexbox - Background color - Border radius - Width - Height - Font size - Line height - Etc… - No time wasted inventing names - CSS stops growing - Making changes is safer
9. Tailwind CSS Core Concepts - Responsive /* Small (sm) */ @media (min-width: 640px) /* Medium (md) */ @media (min-width: 768px) /* Large (lg) */ @media (min-width: 1024px) /* Extra Large (xl) */ @media (min-width: 1280px) - Mobile first - Customizable - Works on all utilities
10. Tailwind CSS Core Concepts - Pseudo-Class • Hover • Focus • Active • Disabled • Visited • First-child • Last-child • Odd-child • Even-child • Group-hover • Focus-within - Not all by default (due to file size) - Ability to write plugins - Can be combined with responsive breakpoints
11. Ex. Landing
12. Demo https://html5up.net/story