-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(skeletons): added more examples (#2232)
- Loading branch information
1 parent
fbc42ef
commit 175ab36
Showing
46 changed files
with
1,917 additions
and
316 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Buffered - Single column</title> | ||
<link type="text/css" rel="stylesheet" href="../../../static/skin-full.min.css" /> | ||
<link rel="stylesheet" href="./style.css"> | ||
<script type="text/javaScript" src="./script.js"></script> | ||
</head> | ||
|
||
<body> | ||
<div class="page-grid-container"> | ||
<div class="page-grid"> | ||
<header> | ||
<p>Single Column Buffered Rendering</p> | ||
</header> | ||
<nav> | ||
<ul> | ||
<li><a href="#">World</a> | ||
<li><a href="#">U.S.</a> | ||
<li><a href="#">Technology</a> | ||
<li><a href="#">Design</a> | ||
<li><a href="#">Culture</a> | ||
<li><a href="#">Business</a> | ||
<li><a href="#">Politics</a> | ||
<li><a href="#">Opinion</a> | ||
<li><a href="#">Science</a> | ||
<li><a href="#">Health</a> | ||
<li><a href="#">Style</a> | ||
<li><a href="#">Travel</a> | ||
</ul> | ||
</nav> | ||
<article id="hero"> | ||
<h2>Title of a longer featured blog post</h2> | ||
<p>Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most | ||
interesting in this post's contents.</p> | ||
<p><a>Continue reading...</a></p> | ||
</article> | ||
<article id="featured-1" class="featured nested-grid-container"> | ||
<div class="page-grid"> | ||
<div class="featured__article"> | ||
<h2>Featured Post 1</h2> | ||
<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p> | ||
</div> | ||
<div class="featured__thumbnail"> | ||
Thumbnail | ||
</div> | ||
</div> | ||
</article> | ||
<article id="featured-2" class="featured nested-grid-container"> | ||
<div class="page-grid"> | ||
<div class="featured__article"> | ||
<h2>Featured Post 2</h2> | ||
<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p> | ||
</div> | ||
<div class="featured__thumbnail"> | ||
Thumbnail | ||
</div> | ||
</div> | ||
</article> | ||
<main> | ||
<h1>From the Firehose</h1> | ||
<article id="featured-3"> | ||
<h2>Sample blog post</h2> | ||
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic | ||
typography, images, and code are all supported.</p> | ||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. | ||
Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras | ||
mattis consectetur purus sit amet fermentum.</p> | ||
<p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor | ||
id nibh ultricies vehicula ut id elit. | ||
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean | ||
lacinia bibendum nulla sed consectetur.</p> | ||
<h3>Heading</h3> | ||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, | ||
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, | ||
vestibulum at eros.</p> | ||
<h4>Sub-heading</h4> | ||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> | ||
<pre><code>Example code block</code></pre> | ||
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce | ||
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> | ||
<h4>Sub-heading</h4> | ||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia | ||
bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac | ||
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | ||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. | ||
Donec id elit non mi porta gravida at eget metus. | ||
Nulla vitae elit libero, a pharetra augue. | ||
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> | ||
<p>Vestibulum id ligula porta felis euismod semper. | ||
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. | ||
Maecenas sed diam eget risus varius blandit sit amet non magna. | ||
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> | ||
</article> | ||
</main> | ||
</div> | ||
</div> | ||
<footer>This pen is a "stretchy" CSS Grid recreation of the <a | ||
href="CSS Grid recreation of: https://getbootstrap.com/docs/4.0/examples/blog/">Bootstrap Blog Example</a>. | ||
</footer> | ||
</body> | ||
|
||
</html> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
:root { | ||
--spacing-large: 16px; | ||
} | ||
|
||
body { | ||
color: var(--color-foreground-primary); | ||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; | ||
margin: 0; | ||
} | ||
|
||
a { | ||
color: currentColor; | ||
} | ||
|
||
header { | ||
display: flex; | ||
justify-content: space-around; | ||
padding: var(--spacing-large) 0; | ||
} | ||
|
||
header > p { | ||
font-size: 1.75rem; | ||
font-weight: bold; | ||
margin: 0; | ||
} | ||
|
||
nav ul { | ||
display: flex; | ||
justify-content: space-around; | ||
list-style: none; | ||
margin: 0; | ||
overflow: auto; | ||
padding: 0; | ||
} | ||
|
||
nav li { | ||
margin: 0 8px; | ||
} | ||
|
||
#hero { | ||
background-color: #343a40; | ||
color: white; | ||
padding: var(--spacing-large); | ||
} | ||
|
||
aside, | ||
main { | ||
padding: var(--spacing-large); | ||
} | ||
|
||
aside section { | ||
margin-bottom: var(--spacing-large); | ||
} | ||
|
||
footer { | ||
background-color: #eee; | ||
padding: var(--spacing-large); | ||
text-align: center; | ||
} | ||
|
||
|
||
.featured__article { | ||
grid-area: 1 / 1 / span 1 / span 8; | ||
} | ||
|
||
.featured__article, | ||
.featured__thumbnail { | ||
padding: var(--spacing-large); | ||
} | ||
|
||
.featured__thumbnail { | ||
display: none; | ||
} | ||
|
||
header { | ||
/* syntax: row-start / col-start / row-span / col-span */ | ||
grid-area: 1 / 1 / span 1 / span 8; | ||
} | ||
|
||
nav { | ||
grid-area: 2 / 1 / span 1 / span 8; | ||
} | ||
|
||
#hero { | ||
grid-area: 3 / 1 / span 1 / span 8; | ||
} | ||
|
||
#featured-1 { | ||
grid-area: 4 / 1 / span 1 / span 8; | ||
} | ||
|
||
#featured-2 { | ||
grid-area: 5 / 1 / span 1 / span 8; | ||
} | ||
|
||
main { | ||
grid-area: 6 / 1 / span 1 / span 8; | ||
} | ||
|
||
/* Skin goes from 8 columns to 16 columns at this SM (small) breakpoint */ | ||
@media (min-width: 512px) { | ||
header { | ||
grid-area: 1 / 1 / span 1 / span 16; | ||
} | ||
|
||
nav { | ||
grid-area: 2 / 1 / span 1 / span 16; | ||
} | ||
|
||
#hero { | ||
grid-area: 3 / 1 / span 1 / span 16; | ||
} | ||
|
||
#featured-1 { | ||
grid-area: 4 / 1 / span 1 / span 8; | ||
} | ||
|
||
#featured-2 { | ||
grid-area: 4 / 9 / span 1 / span 8; | ||
} | ||
|
||
.featured__article { | ||
grid-area: 1 / 1 / span 1 / span 12; | ||
} | ||
|
||
.featured__thumbnail { | ||
grid-area: 1 / 13 / span 1 / span 4; | ||
align-items: center; | ||
background-color: #343a40; | ||
color: white; | ||
display: flex; | ||
justify-content: center; | ||
} | ||
|
||
main { | ||
grid-area: 5 / 1 / span 1 / span 16; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Oops, something went wrong.