1
Course Introduction: Accessible Cross-Browser Form Field CSS Styles
2m 22s
2
Initialize the Form Design System Setup with Sass and CSS Variables
7m 12s
3
Create Semantic, Accessible HTML for Text Form Inputs
4m 21s
4
Create the `form-group` Component Styles
2m 55s
5
Create Semantic, Accessible HTML for Form Selects
4m 26s
6
Create Semantic, Accessible HTML for Radio Buttons and Checkboxes
3m 19s
7
Create Reset Styles to Normalize Form Fields Cross-Browser
9m 5s
8
Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access
7m 28s
9
Create Custom Form Select and Multi-select CSS Styles
7m 14s
10
Create Custom Select CSS Styles for Focus and Disabled States
4m 58s
11
Create A Layout Structure with CSS Grid For Radio Buttons and Checkboxes
4m 15s
12
Create Custom Radio Button CSS Styles
4m 10s
13
Create Custom Checkbox CSS Styles with SVG
4m 33s
14
Create Custom Radio Button and Checkbox CSS Styles for Focus and Disabled States
4m 9s
15
Create Custom CSS Styles for Form Submit Buttons
5m 51s
16
Define Semantic Fieldset HTML and Create CSS Styles For Responsive Form Layout
9m 12s
17
Create and Style an Accessible Field Description
2m 58s
18
Create Accessible Styles for Invalid Form Fields
6m 44s

Initialize the Form Design System Setup with Sass and CSS Variables

SCSS

Share this video with your friends

We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system.

We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.

Course

Accessible Cross-Browser CSS Form Styling

~ 3 years ago

Hi on minute 1:56 you niftily select multiple parts of the custom property names to paste into the colours map. Wondered how you did that? Thanks