English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 247 Lessons (21h 8m) | 6.28 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.
Table of Contents
1 Introduction to the course
2 Installing Sass
3 Making sure Sass is working
4 Watching files
5 What are source maps
6 The parent selector
7 Avoiding specificity issues with nesting
8 Using a trailing
9 Variable challenge
10 Variables vs. Custom Properties
11 Color functions and custom properties
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)
19 Why extends can be dangerous
20 Mixins vs. Extendsb
21 Maxin arguments
22 Optional arguments
23 Challenge
24 Using variables in different places
25 Two challenges
26 Two challenges
27 Nested children and &
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
35 The Sass color module
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
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
47 Functions Creating your own functions
48 Functions In action
49 Functions Warnings, errors, and debugging
50 Functions Warnings, errors, and debugging
51 Arbitrary arguments
52 Arbitrary arguments
53 @content
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
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
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
74 A good starting point
75 Creating a 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
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
117 Updating our starter template
118 A faster way to use your template
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
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
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
158 Prefixing
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
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
187 Creating a button component part 1
188 Creating a button component part 1
189 Creating a button component part 2
190 Creating a button component part 2
191 Dynamic elements
192 Using classes instead of data-attribute modifiers
193 What we’re going to be building
194 First steps
195 First steps
196 Setting up the tokens
197 Getting started with the layouts
198 Creating the header & footer components
199 Creating the header & footer components
200 Creating the header & footer components
201 Creating the header & footer components
202 Creating & Using a content collection
203 Creating the article index page
204 Creating the article index page
205 Creating an Article Preview component
206 Creating a Tag component
207 Creating a FormattedDate component
208 The Homepage
209 Featured articles
210 Generating the pages
211 Cleaning up the tags
212 Adding content to the pages
213 Creating the excerpts
214 Controlling the excerptLength
215 Only add a paragraph if we have an excerpt
216 Adding the missing content to our articles
217 Using the component
218 Styling the component
219 Creating the component
220 The About & Contact pages
221 Getting started with Tina
222 Content Modelling
223 Modelling our content
224 Fixing the dates
225 Fixing the path to the images
226 Refactoring our authors
227 The authors are a reference field
228 The authors are a reference field 2
229 Creating default values for fields
230 Publish to GitHub
231 Connect your project to TinaCloud
232 Setting up our environment variables
233 Uploading to Netlify (or other host)
234 Connecting the URL
235 View transitions
236 The header
237 Example
238 OG Image Options
239 Making it easier to work with nested components
240 The scrolling effect
241 The mobile navigation
242 Fixing the blur effect
243 Small screens and the button
244 Fixing the navigation
245 Setting up an OverflowGrid component
246 Alternative card layout
247 The scrollbar
Resolve the captcha to access the links!