mirror of
https://github.com/pure-css/pure.git
synced 2025-01-13 02:04:23 +00:00
Remove grids-r.css
We'll be using [rework-pure-grids][1] to generate responsive grids on a per-app basis. This is more useful than having .pure-g-r inside Pure's `src/` since media queries cannot be over-written. [1]: https://github.com/ericf/rework-pure-grids
This commit is contained in:
Tilo Mitra
parent
3149eb1079
commit
b2212f91a2
@ -1,102 +0,0 @@
|
||||
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
|
||||
|
||||
.pure-g-r {
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
*word-spacing: -0.43em;
|
||||
|
||||
/*
|
||||
Sets the font stack to fonts known to work properly with the above letter
|
||||
and word spacings. See: https://github.com/yui/pure/issues/41/
|
||||
|
||||
The following font stack makes Pure Grids work on all known environments.
|
||||
|
||||
* FreeSans: Ships with many Linux distros, including Ubuntu
|
||||
|
||||
* Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
|
||||
Arial to get picked up by the browser, even though neither is available
|
||||
in Chrome OS.
|
||||
|
||||
* Droid Sans: Ships with all versions of Android.
|
||||
|
||||
* Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
|
||||
*/
|
||||
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||
|
||||
/*
|
||||
Use flexbox when possible to avoid `letter-spacing` side-effects.
|
||||
|
||||
NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
|
||||
`-moz-` prefix version is omitted.
|
||||
*/
|
||||
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
|
||||
/* IE10 uses display: flexbox */
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-flow: row wrap;
|
||||
}
|
||||
|
||||
/* Opera as of 12 on Windows needs word-spacing.
|
||||
The ".opera-only" selector is used to prevent actual prefocus styling
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.pure-g-r {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
/*
|
||||
Resets the font family back to the OS/browser's default sans-serif font,
|
||||
this the same font stack that Normalize.css sets for the `body`.
|
||||
*/
|
||||
.pure-g-r [class *= "pure-u"] {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.pure-g-r img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.pure-visible-phone {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-tablet {
|
||||
display: none;
|
||||
}
|
||||
.pure-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.pure-g-r > .pure-u,
|
||||
.pure-g-r > [class *= "pure-u-"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.pure-g-r > .pure-u,
|
||||
.pure-g-r > [class *= "pure-u-"] {
|
||||
width: 100%;
|
||||
}
|
||||
.pure-hidden-phone {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
.pure-hidden-tablet {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -274,301 +274,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Responsive Grid</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-3-4">
|
||||
<div class="content">3/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-2-3">
|
||||
<div class="content">2/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-5">
|
||||
<div class="content">1/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-3-5">
|
||||
<div class="content">3/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-5-6">
|
||||
<div class="content">5/6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-5-8">
|
||||
<div class="content">5/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-7-8">
|
||||
<div class="content">7/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-7-12">
|
||||
<div class="content">7/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-11-12">
|
||||
<div class="content">11/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-24">
|
||||
<div class="content">1/24</div>
|
||||
</div>
|
||||
<div class="pure-u-5-24">
|
||||
<div class="content">5/24</div>
|
||||
</div>
|
||||
<div class="pure-u-7-24">
|
||||
<div class="content">7/24</div>
|
||||
</div>
|
||||
<div class="pure-u-11-24">
|
||||
<div class="content">11/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-17-24">
|
||||
<div class="content">17/24</div>
|
||||
</div>
|
||||
<div class="pure-u-7-24">
|
||||
<div class="content">7/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-19-24">
|
||||
<div class="content">19/24</div>
|
||||
</div>
|
||||
<div class="pure-u-5-24">
|
||||
<div class="content">5/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-24">
|
||||
<div class="content">1/24</div>
|
||||
</div>
|
||||
<div class="pure-u-23-24">
|
||||
<div class="content">23/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Images Grid</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Nested Grids</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Custom Font and Grids</h2>
|
||||
|
||||
<div class="serif">
|
||||
@ -576,7 +281,7 @@
|
||||
Grids with a serif font stack.
|
||||
</p>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
@ -592,7 +297,7 @@
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
@ -616,7 +321,7 @@
|
||||
Grids with a monospace font stack.
|
||||
</p>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
@ -632,7 +337,7 @@
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user