Course Introduction: Accessible Cross-Browser Form Field CSS Styles
View a preview of the form fields we'll be creating in this course, inclusive of custom CSS styles for text inputs, textareas, selects, multiselects, radio buttons, and checkboxes. Then get an overview of the base project and key parts of the Eleventy build process in regards to compiling with Dart Sass and use of Nunjucks for project template scaffolding.
Prior experience with Eleventy or Nunjucks is not required, but you may also enjoy learning how to create an Eleventy site from scratch in less than 20 mins in my other egghead collection.
Stephanie Eckles: [0:00] In this course, I'm creating accessible cross-browser form field styles. We will cover the semantics of the most common form field types including text inputs and text areas, selects including multiple selects, radio buttons, and checkboxes.
[0:16] You'll learn not only about semantic markup, but also how to ensure things like contrast across the various states are accessible as well. Once we've completed the semantics of the various form field types, you'll also learn how to semantically create field sets, and add CSS utility styles that will enable intrinsically responsive forms, meaning no media query is required.
[0:39] In the last lessons, we'll cover validation from a semantics and accessibility standpoint, and learn how to properly associate fields with their errors.
[0:48] At the conclusion, you'll be prepared to confidently create semantic accessible cross-browser styles, perform fields, and layouts.
[0:56] The base project for this course, which is available in the Github repository as 00base in the lessons directory is set up as an eleventy project. Knowledge of eleventy is not required to complete this course. It is being used as the build processor, versus something like Gulp.
[1:12] If you would like to learn more about how to use eleventy, check out my course on egghead to "Build An Eleventy Site From Scratch" in less than 20 minutes.
[1:20] The benefits of using this base project for the course are that it already includes Autoprefixer, which will assist us in our mission to provide cross-browser styles, and it includes Dart Sass, which will be compiled prior to sending your updates to the browser when using the start command.
[1:36] When using the base project, you will primarily run the start command, which will build the available Sass and start eleventy in watch mode, during which Sass will continue to be compiled and autoprefixed.
[1:47] At the conclusion of the course and for using the course materials in your own projects, the included build command will also include minification of the final stylesheet. As we build out our form, we will include partials of each form type using the Nunjucks templating language.
[2:02] You will not need to know Nunjucks to complete this course. We're simply using it for its templating features of including partials.
[2:09] Skills related to setting up for design-system style, the mobility and semantic cross-browser form field design are key fundamentals that you can take with you to any project you encounter that involves forms.