Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex flavor (w/ webkit prefixes) #4

Closed
wants to merge 7 commits into from
Closed

Flex flavor (w/ webkit prefixes) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
301964f
Flex flavor (w/ webkit prefixes)
sherbrow Jun 1, 2015
de94e7b
Basic doc for the flex flavor
sherbrow Jun 1, 2015
9a0d4db
Doc & readme flex typos
sherbrow Jun 1, 2015
9d98dbb
Fix col collapsing (avoid flex-basis default because of shorthand)
sherbrow Jun 1, 2015
8debc3b
Doc for flex version nesting
sherbrow Jun 1, 2015
7b45545
Merge remote-tracking branch 'remotes/ungrid/gh-pages' into gh-pages
sherbrow Jun 9, 2015
0e3fd0b
docs.css cleanup
sherbrow Jun 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ __ungrid__ is a tiny, responsive, table-based CSS grid system. The entire `ungri
}
```

The flex flavored version `ungrid-flex.css` is 76 bytes minified (142 bytes with prefixes, see [Can I Use Flex](http://caniuse.com/#search=flex)) :

```css
@media (min-width: 30em) {
.row { display: flex; flex-wrap: nowrap; }
.col { flex-grow: 1; }
}
```



## Get started
Expand All @@ -29,7 +38,7 @@ __ungrid__ is a tiny, responsive, table-based CSS grid system. The entire `ungri

## How to use

To use, simply put as many `.col`s as you wish in your `.row`s and the `.col`s will automatically be evenly spaced. This allows you to roll your own simple grids. [See it in action](http://codepen.io/chrisnager/pen/ypokv).
To use, simply put as many `.col`s as you wish in your `.row`s and the `.col`s will automatically be evenly spaced. This allows you to roll your own simple grids. [See it in action](http://codepen.io/chrisnager/pen/ypokv) ([flex in action](http://codepen.io/sherbrow/pen/pJRBZx)).

```html
<div class="row">
Expand Down
204 changes: 108 additions & 96 deletions docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,108 @@
html {
font: 24px/1.7 "Helvetica Neue", sans-serif;
text-align: center;
color: #222;
}

body {
margin: 0;
}

a {
text-decoration: none;
color: teal;
}

h1 {
letter-spacing: -0.05em;
}

h2 {
font-size: 0.83333em;
}

p {
font-size: 0.7em;
}

pre {
border: 2px solid;
padding: 1em;
white-space: pre-wrap;
font-size: 0.54167em;
text-align: left;
background-color: #fff;
}

.info__inner > p > code {
padding: 0.25em;
border-radius: 4px;
border: 1px solid #bbb;
}

hr {
max-width: 20em;
margin: 2em auto;
border: solid #ddd;
border-width: 1px 0 0;
}

.header {
padding: 3em 1em;
}

.header > h1,
.header > p {
margin-top: 0;
margin-bottom: 0;
}

.info {
padding: 2em 1em;
overflow: hidden;
background-color: #f2f2f2;
}

.info__inner {
max-width: 30em;
margin-right: auto;
margin-left: auto;
}

.row {
margin-top: 1em;
margin-bottom: 1em;
}

@media (max-width: 479px) {
.col {
width: 100% !important;
}
}

.col {
height: 4em;
vertical-align: middle;
line-height: 4em;
background-color: teal;
}

.col:nth-of-type(2n) {
background-color: #95cbcb;
}

.footer {
padding: 0.5rem 1rem 1.5em;
}
html {
font: 24px/1.7 "Helvetica Neue", sans-serif;
text-align: center;
color: #222;
}

body {
margin: 0;
}

a {
text-decoration: none;
color: teal;
}

h1 {
letter-spacing: -0.05em;
}

h2 {
font-size: 0.83333em;
}

p {
font-size: 0.7em;
}

pre {
border: 2px solid;
padding: 1em;
white-space: pre-wrap;
font-size: 0.54167em;
text-align: left;
background-color: #fff;
}

.info__inner > p > code {
padding: 0.25em;
border-radius: 4px;
border: 1px solid #bbb;
}

hr {
max-width: 20em;
margin: 2em auto;
border: solid #ddd;
border-width: 1px 0 0;
}

.header {
padding: 3em 1em;
}

.header > h1,
.header > p {
margin-top: 0;
margin-bottom: 0;
}

.info {
padding: 2em 1em;
overflow: hidden;
background-color: #f2f2f2;
}

.info__inner {
max-width: 30em;
margin-right: auto;
margin-left: auto;
}

.row {
margin-top: 1em;
margin-bottom: 1em;
}

.row.col {
margin-top: 0;
margin-bottom: 0;
padding: 0.5em;
box-sizing: border-box;
}

@media (max-width: 479px) {
.col {
width: 100% !important;
}
}

.col {
height: 4em;
vertical-align: middle;
line-height: 4em;
background-color: teal;
}

.row.col .col {
height: 3em;
line-height: 3em;
}

.col:nth-of-type(2n) {
background-color: #95cbcb;
}

.footer {
padding: 0.5rem 1rem 1.5em;
}
Loading