English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 186 Lessons (14h 36m) | 3.57 GB
Maintainable and scalable CSS doesn’t have to be a challenge
There are a lot of things that, at scale, get harder and harder:
- Class naming
- Staying organized
- Dealing with the cascade and specificity issues
- and more
There are a lot of different methodologies, approaches, and tools out there to help solve the problems of writing CSS at scale.
Some approaches involve 3rd party options, which can be super helpful, but often are great at making an MVP that needs a total rework when it’s time to make something more custom.
Or worse yet, you end up with a strange mix of Tailwind here, Bootstrap there, some CSS-in-JS solutions over here and no real direction.
To help overcome a lot of these problems, the first thing you need is a clear direction and a system in place that you understand.
When we create our own system (which can even leverage the tools above!), we have total control from day one.
By having a system in place, you can grow it to fit your own needs and make it work for you, instead of using a “fits all” solution that a 3rd party needs to be.
And best of all, once you’ve got it set up you don’t have to start from scratch on every single project, allowing you to start new projects in record time.
A course to help you learn how to wrangle your stylesheets, keeping them organized and scalable no matter the size of the project or how big your team is.
When we first start writing CSS, it’s pretty easy.
Change a background color here, change a font there.
As you improve, you might start building out individual components or small layouts from designs you find online, and things go pretty well.
You understand the basics of flexbox, grid, and positioning and you are feeling pretty confident.
You can create layouts and get the job done…
But as projects grow in size, things become a bit of a mess.
Every aspect of a project becomes harder to manage the larger the project is. And as more team members enter the picture, the difficulties raise exponentially.
Some things are easier to manage than others, and CSS is one of those things that is very easy for it to explode into a complex, unorganized, mess. And when you’re working in a team with varying degrees of comfort in writing CSS, thing can become a nightmare.
And that’s why there are so many 3rd party libraries and frameworks out there, as well as a bunch of different naming conventions.
Those all exist because writing CSS that can scale is hard, and it’s made harder by the ever growing list of technologies we can use to build our sites as well.
The problem
Most tutorials, blog posts, and videos about CSS cover fundamental concepts like how flexbox works, or how to make a single component in isolation. They don’t talk about writing CSS at scale.
That’s just the nature of short, easy to digest content.
And of course, CSS is usually covered in longer content and other courses, but often it’s from extremely talented full-stack educators who don’t have the strongest grasp of CSS.
That’s not to mention coding bootcamps that can cost between $10,000-$20,000 and barely even do basic CSS any justice!
Knowing the basics of it is super important, but once you’ve got the fundamentals down, class naming can still be hard, that our stylesheets can easily become a mess as they grow, and we never want to deal with frustration of dealing with conflicting styles.
There is a better way
As CSS continues to grow as a language, things like custom properties and cascade layers are here to help us wrangle our CSS like we never could do before.
There are also other tools that have become industry standards such as Sass, PostCSS, and more that can help as well.
And in this course, I want to teach you how you can leverage modern CSS, and some of those other tools to create well-organized, and easy-to-scale projects that actually leave you and your team writing less CSS.
This is an advanced course that assumes you are comfortable writing CSS, but struggle with organization and scaling projects.
This course is still a work in progress and the top tier is in pre-release at the moment.
As it stands now, modules 1-4 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).
Module 5 will be progressively added as I make progress on it.
Table of Contents
WELCOME
1 Introduction to the course
MODULE 1
INTRODUCTION TO SASS
2 Installing Sass
3 Making sure Sass is working
4 Watching files
5 What are source maps
NESTING
6 The parent selector
7 Avoiding specificity issues with nesting
8 Using a trailing
VARIABLES
9 Variable challenge
10 Variables vs. Custom Properties
SASS AND COLORS
11 Color functions and custom properties
PRACTICE PROJECT – PRICING TABLE
12 Before we get started
13 Setting things uo
14 The HTML
15 Pricing Table – Reset and Base Styles
16 Styling the page
17 Creating the inverted color scheme (a challenge)
18 Creating the button hover and focus states (a challenge)
EXTENDS
19 Why extends can be dangerous
MIXINS
20 Mixins vs. Extendsb
21 Maxin arguments
22 Optional arguments
23 Challenge
INTERPOLATION
24 Using variables in different places
25 Two challenges
26 Two challenges
27 Nested children and &
PRACTICE PROJECT – PRODUCT CARDS
28 The HTML and basic page structure
29 Getting info from Figma
30 Even columns
31 Utility classes
32 Styling the product card
33 Positioning the button
34 The category card
MODULE 2
BUILT-IN SASS FUNCTIONS
35 The Sass color module
LOOPS
36 @for. In action
37 @for. In action. Column-count
38 @for. In action. Column-count
39 @for. In action. Grid based system
40 @for. A challenge
41 @EACH In action
42 @each. With nested lists
@IF, @ELSE, @IF ELSE, AND IF()
43 @if, @else, @if else, and if() Adding logic to our stylesheets
44 @if In action
45 @if @else A challenge
46 @if Refactoring our ui-component mixin
FUNCTIONS
47 Functions Creating your own functions
48 Functions In action
49 Functions Warnings, errors, and debugging
50 Functions Warnings, errors, and debugging
ADVANCED MIXINS
51 Arbitrary arguments
52 Arbitrary arguments
53 @content
MAPS
54 A fancy list
55 A fancy list
56 An easier way to access them
57 Nested maps
58 Nested maps
59 Accessing map values with loops
60 map.has-key() and errors
MODULE 3
@USE AND @FORWARD
61 Building our own Sass modules
62 Building our own Sass modules
63 Using, and name-spacing, our partial files
64 @forward
65 @forward
66 Why bother with partial files
VITE
67 Getting started with Vite
68 Getting started with Vite
69 Getting started with Vite
70 Setting up Vite for multiple pages
71 Setting up Vite for multiple pages
72 Setting up Vite for multiple pages
73 Getting our projects online
ARCHITECTURE
74 A good starting point
75 Creating a template
USING THE TEMPLATE
76 Creating a new project from the template
77 Refactoring the pricing table project
78 Refactoring the pricing table project
79 Refactoring the pricing table project
80 Refactoring the pricing table project
81 Refactoring the pricing table project
82 Updating the template
83 Updating the template
84 Updating the template
85 Updating the template
PROJECT
86 Starting a new project using our template
87 Analyzing the design
88 Setting up the abstracts
89 Setting up the abstracts
90 Setting up the abstracts
91 New utilities and generic layouts
92 New utilities and generic layouts
93 New utilities and generic layouts
94 New utilities and generic layouts
95 New utilities and generic layouts
96 New utilities and generic layouts
97 The components
98 The components
99 Reset and base styles
100 Writing the HTML
101 Writing the HTML
102 Writing the HTML
103 Writing the HTML
104 Writing the HTML
105 Writing the HTML
106 Writing the HTML
107 Styling the header
108 Styling the hero
109 Improving the buttons
110 Design tweaks
111 Design tweaks
112 Design tweaks
113 Fixing the flex-group
114 The figures
115 The testimonial cards
116 Finishing touches
WRAP UP
117 Updating our starter template
118 A faster way to use your template
POSTCSS AND POSTCSS-PRESET-ENV
119 Introduction
120 Getting started with PostCSS and postcss-present-env
121 Getting started with PostCSS and postcss-present-env
122 Getting started with PostCSS and postcss-present-env
123 Getting started with PostCSS and postcss-present-env
124 Getting started with PostCSS and postcss-present-env
125 Getting started with PostCSS and postcss-present-env
MODULE 4
DESIGN SYSTEMS
126 What is a design system
127 Design Tokens
128 Design Tokens
129 Design Tokens
130 Global Tokens and Private Members
131 Global Tokens and Private Members
132 Getting Started with our System
133 Getting Started with our System
134 Setting up our Colors
135 Setting up our Colors
136 Setting up our Colors
137 Setting up our Colors
138 Setting up the typography
139 Setting up the typography
140 Setting up the typography
141 Setting up the typography
142 Setting up the typography
143 Contextual & Component Sizes
144 Contextual & Component Sizes
145 Contextual & Component Sizes
146 Body, buttons, and cards
147 Body, buttons, and cards
148 Body, buttons, and cards
149 Body, buttons, and cards
THEMING
150 Creating a new theme
151 Using our new theme
152 Making the logo change with the color scheme
153 Making the logo change with the color scheme
154 Switching between themes
155 Fixing the utility classes
156 Manually toggling the themes
157 Manually toggling the themes
REUSABILITY & CUSTOMIZATION
158 Prefixing
PUTTING IT TO USE
159 What we will be working on
160 Getting started
161 The color abstracts
162 The typography abstracts
163 Setting up our tokens
164 The HTML
165 Improving our buttons
166 The hero area
167 The about section
168 Rounding the image
169 The offset grid
170 Customizing the cards in the offset grid
171 Customizing the cards in the offset grid
172 Making decisions on how we use this system
173 Moving forward from here
MODULE 5
INTRODUCTION TO ASTRO
174 Getting started with Astro
175 The Astro extension
176 What we are starting with
177 The Dev Toolbar
178 Code fences & dynamic content
179 Creating a base layout
180 Creating a second page and navigation
181 CSS and Astro
182 Addind Sass to an Astro project
183 Scoped styles & Sass
184 Defining a content collection
185 Using a content collection
186 Using a content collection
Resolve the captcha to access the links!