Let's make sure our stylesheet references the layout core:
/*
---------------------------------------------------
|NOTE: This style sheet leverages: layout-core.css. |
---------------------------------------------------
*/
@import url(layout-core.css);
layout-core.css
in the same directory as your style.css
and index.html
files. You can find a copy in the code bundle for this chapter.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.
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.