Skip to content

Instantly share code, notes, and snippets.

@tomgp

tomgp/index.html

Last active June 13, 2019 13:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomgp/69bed4746b190bbf59de1457c2cae66c to your computer and use it in GitHub Desktop.
Save tomgp/69bed4746b190bbf59de1457c2cae66c to your computer and use it in GitHub Desktop.
Download ZIP
grid layouts
Raw
index.html
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<header></header>
<section class="homepage-splash atf-grid">
<div class="splash__intro">
<h1>Title of the page</h1>
<p>Your pier-glass will be minutely and
multitudinously scratched in all directions</p>
</div>
<div class="splash__promo">.journal-splash</div>
</section>
<section class="promo-right atf-grid">
<div class="promo__text">.promo-text</div>
<div class="promo__image">.promo-image</div>
</section>
<section class="promo-left atf-grid">
<div class="promo__text ragged">
<p>[ This div is classed <em>.ragged</em> which means that it extends, on the right, over ther grid column gap]</p>
<p>He stumbled and half fell.
Through a blur he saw rows of faces, curious, concerned, anxious. Men
and women halting to see what the disturbance was. He fought past them
toward his store. He could see Fergusson inside talking to a man,
showing him an Emerson TV set. Pete Foley in the back at the service
counter, setting up a new Philco. Loyce shouted at them frantically.
His voice was lost in the roar of traffic and the murmur around him.</p></div>
<div class="promo__image">.promo-image</div>
</section>
<section class="promo-right text-first atf-grid">
<div class="promo__text">.promo-text</div>
<div class="promo__image">.promo-image</div>
</section>
<section class="promo-50-50 atf-grid">
<div class="small-promo-primary">
<div class="promo__text">.promo-text</div>
<div class="promo__image">.promo-image</div>
</div>
<div class="small-promo-secondary">
<div class="promo__text">.promo-text</div>
</div>
</section>
<section class="journal-archive atf-grid">
<div class="journal-archive__heading">archive heading</div>
<div class="journal-archive__posts atf-archive-grid">
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
<div class="journal-archive__post">post</div>
</div>
</section>
<footer></footer>
</body>
</html>
Raw
style.css
body{
background-color: #EEE;
}
div{
border: 1px dashed #000;
background-color: white;
}
section{
border: 1px dashed #DDD;
}
.atf-grid{
display: grid;
grid-template-columns: repeat(12, 1fr);
row-gap: 5px;
column-gap: 20px;
grid-auto-rows: minmax(50px, max-content);
margin: 10px;
}
.atf-archive-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px 20px;
grid-auto-rows: minmax(50px, max-content);
}
/* a utility class for allowing divs to push over the grid column gap */
.ragged{
margin-right:-20px;
}
/*
home page splash stuff
*/
.homepage-splash{
grid-template-areas: " . intro intro intro intro intro intro . . . . ."
" . . . . . . promo promo promo promo promo promo";
}
@media (max-width: 650px) {
.homepage-splash{
grid-template-areas: " . intro intro intro intro intro intro intro intro intro intro ."
" . promo promo promo promo promo promo promo promo promo promo .";
}
}
.splash__intro{
grid-area: intro;
}
.splash__promo{
grid-area: promo;
}
/*
promo slots
*/
.promo-right{
grid-template-areas: "image image image image image image . text text text text .";
}
.promo-left{
grid-template-areas: ". text text text text . image image image image image image";
}
@media (max-width: 650px) {
.promo-left, .promo-right{
grid-template-areas:
". image image image image image image image image image image ."
". text text text text text text text text text text .";
}
.promo-left.text-first, .promo-right.text-first{
grid-template-areas:
". text text text text text text text text text text . "
". image image image image image image image image image image .";
}
}
.promo-50-50{
grid-template-areas: ". primary primary primary primary primary secondary secondary secondary secondary secondary .";
}
.small-promo-primary{
grid-area: primary;
}
.small-promo-secondary{
grid-area: secondary;
}
/*
promo components
*/
.promo__text{
grid-area: text;
}
.promo__image{
grid-area: image;
}
/*
archive components
*/
.journal-archive{
grid-template-areas: " . heading heading posts posts posts posts posts posts posts posts . ";
}
.journal-archive__posts{
grid-area: posts;
}
.journal-archive__heading{
grid-area: heading;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment