Reading Grid

Developer
Orion Drummond
Size
4,306 Kb
Views
28,322
  1. Reading Grid Previews
  2. Reading Grid HTML Codes
  3. Reading Grid CSS Codes

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 Previews
IQ Test

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; }
}
Reading Grid - Script Codes
Reading Grid - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 4,306 Kb
Views 28,322
Do you need developer help for Reading Grid?

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!

Orion Drummond (tappily) Script Codes
Name
Flex decorators
Menu toggle with unicode icons
Responsive Background Image Loading
Aspect-oriented tabs
Neon wallpaper
Hash navigation pattern
Image based blurry background
Google Web Font LESS Mixin
Warp scaffold
Seltzer samples
Create amazing video scripts with AI!

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!