Let's make sure our stylesheet references the layout core:
- At the very top of your stylesheet, add the following code:
/* --------------------------------------------------- |NOTE: This style sheet leverages: layout-core.css. | --------------------------------------------------- */ @import url(layout-core.css); - Make sure you have a copy of
layout-core.cssin the same directory as yourstyle.cssandindex.htmlfiles. You can find a copy in the code bundle for this chapter. - Save your stylesheet.
We added the @import directive to call an external stylesheet, meaning we can make use of the layout styling already set up in layout-core.css and won't have to add it all in manually.
Layoutcore uses a few classes to help us achieve our layout. To use them, you'll simply assign whether a div, section, article, or aside tag should float, left or right and then assign an additional class of full, half, two-thirds, three-quarters, third, or quarter to set the width of that HTML element. We'll come to this later in this chapter.
Note
CSS Resets
Of course, you might be building your own stylesheet from scratch and won't want to include layout-core.css. If so, it's a good idea to include a CSS Reset at the beginning of your stylesheet. This resets any browser-specific CSS so we can start with a clean sheet regardless of what browser the user is viewing our site in.
Our layout-core.css file includes a reset, so if you're importing that, you don't need to add another one.
For more on CSS Resets, and an example of a great one to use, see http://meyerweb.com/eric/tools/css/reset/.
Now that we have our @import directive set up, we'll move on to add some media queries to make our theme responsive.
Media queries sit at the end of a stylesheet and they specify the styling to apply depending on the width of the screen the site's being viewed on. For much more on building responsive themes and leveraging media queries, see WordPress Mobile Web Development: Beginner's Guide, Rachel McCollin, Packt Publishing.