Reading Grid
How do I make an reading grid?
What is a reading grid? How do you make a reading grid? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.
Reading Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reading Grid</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "//fonts.googleapis.com/css?family=Open+Sans";
html { font-family: 'Open Sans', sans-serif;
}
.grid-flow:after { display: block; content: ""; clear: left;
}
.grid-flow--center { margin-left: auto; margin-right: auto;
}
.grid-flow-col { box-sizing: border-box; width: 19rem; float: left;
}
.grid-flow-col--br { margin-left: initial;
}
@media only screen and (min-width: 27rem) { .grid-flow--n2 { max-width: 19rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(1n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(1n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 48rem) { .grid-flow--n2 { max-width: 40rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(2n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(2n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 69rem) { .grid-flow--n3 { max-width: 61rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(3n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(3n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 90rem) { .grid-flow--n2 { max-width: 82rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(4n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(4n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 132rem) { .grid-flow--n3 { max-width: 124rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(6n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(6n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 174rem) { .grid-flow--n2 { max-width: 166rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(8n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(8n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 195rem) { .grid-flow--n3 { max-width: 187rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(9n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(9n + 1) { margin-left: initial; clear: left; }
}
.grid-flow--margin { margin-left: 4rem; margin-right: 4rem;
}
@media only screen and (max-width: 27rem) { .grid-flow--margin, .grid-flow--center { margin-left: 0.5rem; margin-right: 0.5rem; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body class="grid">
<h1 class="grid-flow--n2 grid-flow--n3 grid-flow--center">Reading grid</h1>
<section class="grid-flow grid-flow--n2 grid-flow--n3 grid-flow--center"> <div class="grid-flow-col"> <h2>Comfort zone</h2> <p>Set an comfortable line length for reading and LESS the rest.</p> </div> <div class="grid-flow-col"> <h2>Responsive and Readable</h2> <p>This is a responsive grid but it's necessarily not fluid. Other grids can fill all the available space on a page, but that's not always going to produce a readable result.</p> </div> <div class="grid-flow-col"> <h2>Narrative or navigation</h2> <p>This grid is similar to using the CSS-3 columns module. It differs in it's brutal strictness to the grid. This is intended to improve scanning for narrative/navigation hybrids.</p> </div> <div class="grid-flow-col"> <h2>Schmelements</h2> <p>Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear.</p> </div> <blockqoute class="grid-flow-col"> <h2>For example</h2> <p>"Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear. Wait, I just said that."</p> <cite>–Me</cite> </blockqoute> <div class="grid-flow-col"> <h2>Couplets and Triplets</h2> <p>The grid includes 2 classes for describing how columns are grouped. If you have a total of 2, 4, 8, or 16 columns, use <code>grid--n2</code>. If you have 3, 6, 9, or 18 columns, use <code>grid--n3</code>. You can use both also.</p> </div> <div class="grid-flow-col"> <h2>Old explorers</h2> <p>Below IE 9, the nth-child selectors and media queries will not work. The old explorers will find natural flows instead of floating columns.</p> </div> <div class="grid-flow-col"> <h2>Spanners</h2> <p>That tool doesn't fit this socket.</p> </div> <div class="grid-flow-col"> <h2>Nor devices</h2> <p>Making arbitrary choices based on device usage can be effective, but the goal here is to create a dynamic system the uses the line width constant to derive it's breakpoints.</p> </div> <div class="grid-flow-col"> <h2>Semantic</h2> <ol> <li><code>.grid</code> on the parent layout element that equals the viewport width.</li> <li><code>.grid-flow</code> to contain any number of columns.</li> <li><code>.grid-flow-col</code> to present a column.</li> </ol> </div> <div class="grid-flow-col"> <h2>Git it</h2> <p>Not ready to commit yet.</p> </div> <div class="grid-flow-col"> <h2>Use it</h2> <p>Go ahead.</p> </div>
</section>
</body>
</body>
</html>
Reading Grid - Script Codes CSS Codes
@import "//fonts.googleapis.com/css?family=Open+Sans";
html { font-family: 'Open Sans', sans-serif;
}
.grid-flow:after { display: block; content: ""; clear: left;
}
.grid-flow--center { margin-left: auto; margin-right: auto;
}
.grid-flow-col { box-sizing: border-box; width: 19rem; float: left;
}
.grid-flow-col--br { margin-left: initial;
}
@media only screen and (min-width: 27rem) { .grid-flow--n2 { max-width: 19rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(1n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(1n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 48rem) { .grid-flow--n2 { max-width: 40rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(2n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(2n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 69rem) { .grid-flow--n3 { max-width: 61rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(3n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(3n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 90rem) { .grid-flow--n2 { max-width: 82rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(4n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(4n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 132rem) { .grid-flow--n3 { max-width: 124rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(6n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(6n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 174rem) { .grid-flow--n2 { max-width: 166rem; } .grid-flow--n2 .grid-flow-col { margin-left: 2rem; } .grid-flow--n2 :nth-child(8n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n2 .grid-flow-col:nth-child(8n + 1) { margin-left: initial; clear: left; }
}
@media only screen and (min-width: 195rem) { .grid-flow--n3 { max-width: 187rem; } .grid-flow--n3 .grid-flow-col { margin-left: 2rem; } .grid-flow--n3 :nth-child(9n + 1) ~ .grid-flow-col { margin-left: 2rem; clear: initial; } .grid-flow--n3 .grid-flow-col:nth-child(9n + 1) { margin-left: initial; clear: left; }
}
.grid-flow--margin { margin-left: 4rem; margin-right: 4rem;
}
@media only screen and (max-width: 27rem) { .grid-flow--margin, .grid-flow--center { margin-left: 0.5rem; margin-right: 0.5rem; }
}
Developer | Orion Drummond |
Username | tappily |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 4,306 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Aspect-oriented tabs | 4,693 Kb |
3d stacked preview | 3,760 Kb |
Flex scrolling tbody | 3,112 Kb |
Blue folds wallpaper | 2,137 Kb |
Hash navigation pattern | 5,015 Kb |
Responsive radio tabs | 4,508 Kb |
Responsive Background Image Loading | 2,071 Kb |
Google Web Font LESS Mixin | 2,492 Kb |
CSS Prompt | 5,639 Kb |
Studded wallpaper | 2,252 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Weather App | OmranAbazid | 2,596 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!