I have the below SASS and HTML code. I'm using PureCSS by Yahoo.
What I'm trying to do
I'm trying to get this to have a 3 column layout for large desktop size screen, with the pure-lg-3-24 classes essentially acting as margins, then collapse it to a 1 column layout for mobile screens.
What actually happens
When I add pure-u-1 to my classes below (in a large desktop size browser width), all the html content falls into one column. If I remove pure-u-1 it all collapses together and the text sits on top of each other, rendering it unreadable. Why is this? What's the starting point for getting it to behave responsively? I thought nested grids were allowed in PureCSS.
SASS
#layout {
margin: 0;
padding: 0;
border-bottom: 1px solid #e1e1e1;
.pure-g {
h1 {
font-family: Georgia, serif;
a {
text-decoration: none;
color: #990000;
}
}
h2 {
font-size: 1em;
font-weight: normal;
}
mark {
color: #990000;
background: none;
font-weight: 700;
}
}
}
ul.languages {
list-style-type: none;
li.active {
font-weight: 700;
a {
color: #666;
}
}
li {
display: inline;
}
}
HTML
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
:
<header id="layout" class="pure-g">
<div class="pure-u-1 pure-u-lg-3-24"> </div>
<div class="pure-u-1 pure-u-lg-18-24">
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-12-24">
<h1><a href="/">Trial Dates</a></h1>
</div>
<div class="pure-u-1 pure-u-lg-12-24">
<p>Contact us at <mark>(800) 800-COLLECT</mark></p>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-12-24">
<h2>Tagline</h2>
</div>
<div class="pure-u-1 pure-u-lg-12-24">
<ul class="languages">
<li class="active">
<a href="#">English</a>
</li>
<li>
<a href="#">Español</a>
</li>
<li>
<a href="#">漢語</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-lg-3-24"> </div>
</header>
