Join Carrie Dils for an in-depth discussion in this video Add HTML5 Reset, part of WordPress and Genesis: Building Child Themes from Scratch.
- View Offline
- It's time to start adding styles to our theme and this is where we'll really see things start to come together. We've talked about the importance of documenting code and the stylesheet is no difference. As we begin to add styles we'll keep things organized with the table of contents. Now how you choose to organize your stylesheet is completely up to you while WordPress speaks to the coding standards of CSS it doesn't specify any particular order of items. Let's go ahead and create that empty table of contents. Now let's turn to the Genesis Sample Theme.
The Genesis Sample Theme is a bare bones minimal trial theme created for the Genesis framework. Looking at the code is really helpful if you just want to see the basics. Let's take a look at their stylesheet. The first thing we noticed in their table of contents is this HTML5 Reset. What this code does is basically reset your CSS so that any initial browser styles are stripped. This gives you more control in predictability about how browsers will render HTML elements. If you want to know a little more of the history of HTML5 Reset check out their website at HTML5Reset.org.
As a side note if your using SASS or less to create your CSS you can add this code via various package managers. Since I know that StudioPress produces high quality themes I've got no qualms about borrowing their already modified and formatted reset code. You may think this is cheating since this course is about building a theme from scratch, but in reality the best developers always start with some sort of boilerplate code. Now in the instance of HTML5 Reset that's code that's been around a really long time and it's been vetted as an industry standard.
While it's importance to know the why's behind the code there's no reason not to copy-paste at times. Let's go ahead, save our stylesheet and we'll take a look at our site. Already we can see some subtle changes. Now that our HTML5 Reset is in place we're ready to get rolling with our theme styles.
- Why build a theme from scratch?
- Creating a theme folder
- Creating the CSS and PHP files
- Adding a theme setup function
- Adding features and functionality to your child theme
- Styling the theme
- Adding content to widgets
- Making the theme responsive with media queries