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

New Responsive Grids: Better Defaults, and Customizations via Tooling or Web UI #267

Merged
merged 17 commits into from
Mar 6, 2014
Merged

New Responsive Grids: Better Defaults, and Customizations via Tooling or Web UI #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b2212f9
Remove grids-r.css
tilomitra Dec 23, 2013
477833c
add .img-responsive class to base.css
tilomitra Dec 23, 2013
5e6fd01
remove .pure-g-r from forms manual test
tilomitra Dec 27, 2013
d1ab35a
add grunt-pure-grids dependency
tilomitra Feb 27, 2014
e91b2be
remove grid_units grunt task, add pure_grids task
tilomitra Feb 27, 2014
c4f2a08
Revert "remove grid_units grunt task, add pure_grids task"
tilomitra Feb 28, 2014
3cd8d78
Revert "add grunt-pure-grids dependency"
tilomitra Feb 28, 2014
f21710a
Merge branch 'master' into remove-responsive-grid
tilomitra Feb 28, 2014
be5576d
update pure_grids with responsive sub-task
tilomitra Feb 28, 2014
cf34ac3
update .img-responsive to .pure-img
tilomitra Feb 28, 2014
3bbbf47
add responsive grid manual test
tilomitra Feb 28, 2014
a264619
Use grids-responsive.css on Forms manual test
ericf Feb 28, 2014
b197749
Remove grids-nr.css build file, now that there's grids-responsive.css
ericf Feb 28, 2014
6070d62
Merge pull request #9 from ericf/new-responsive-grids
tilomitra Feb 28, 2014
9f59f01
add HISTORY.md for Grids and Base changes
tilomitra Mar 6, 2014
b2d0b16
Merge branch 'remove-responsive-grid' of github.com:tilomitra/pure in…
tilomitra Mar 6, 2014
6b353a1
update HISTORY with related issues
tilomitra Mar 6, 2014
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
22 changes: 15 additions & 7 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,11 @@ grunt.initConfig({
'build/forms-r.css'
]},

{'build/grids-nr.css': [
{'build/grids.css': [
'build/grids-core.css',
'build/grids-units.css'
]},

{'build/grids.css': [
'build/grids-nr.css',
'build/grids-r.css'
]},

{'build/menus-nr.css': [
'build/menus-core.css',
'build/menus.css',
Expand All @@ -101,7 +96,7 @@ grunt.initConfig({

{'build/<%= pkg.name %>-nr.css': [
'build/base.css',
'build/grids-nr.css',
'build/grids.css',
'build/buttons.css',
'build/forms-nr.css',
'build/menus-nr.css',
Expand Down Expand Up @@ -199,6 +194,19 @@ grunt.initConfig({
options: {
units: [5, 24]
}
},

responsive: {
dest: 'build/grids-responsive.css',

options: {
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)' // 1280px
}
}
}
},

Expand Down
24 changes: 24 additions & 0 deletions HISTORY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,33 @@ Pure Change History
NEXT
----

### Base

* Added the `.pure-img` class name for make images scale with the viewport in
fluid layouts.

### Grids

* __[!]__ Removed `.pure-g-r` from core, in favor of a mobile-first responsive
grid system. ([#24][], [#267][])

To use the mobile-first grid system, you need to pull in `pure.css`, along with `grids-responsive.css`:

```html
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
```

Find out more about the new grid system at [http://purecss.io/grids/][Grids].

### Tables

* Switched cell padding in Tables from `px` to `em` units, and also increased
the amount of padding to `padding: 0.5em 1em`.

[#24]: https://github.com/yui/pure/issues/24
[#267]: https://github.com/yui/pure/pull/267
[Grids]: http://purecss.io/grids/

0.4.2 (2014-02-13)
------------------
Expand Down
10 changes: 10 additions & 0 deletions src/base/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,13 @@
[hidden] {
display: none !important;
}

/**
* Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
* aspect ratio.
*/
.pure-img {
max-width: 100%;
height: auto;
display: block;
}
13 changes: 7 additions & 6 deletions src/forms/tests/manual/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="stylesheet" href="../../../../build/base.css">
<link rel="stylesheet" href="../../../../build/grids.css">
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
<link rel="stylesheet" href="../../../../build/buttons.css">
<link rel="stylesheet" href="../../../../build/forms.css">
</head>
Expand Down Expand Up @@ -38,24 +39,24 @@ <h2>Multi-Column Form with Grids</h2>
<fieldset>
<legend>Legend</legend>

<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label>First Name</label>
<input type="text">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-md-1-3">
<label>Password</label>
<input type="password">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-md-1-3">
<label>E-Mail</label>
<input type="email" required>
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-md-1-3">
<label>City</label>
<input type="text">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-md-1-3">
<label>State</label>
<select class="pure-input-medium">
<option>AL</option>
Expand Down
102 changes: 0 additions & 102 deletions src/grids/css/grids-r.css
View file
Open in desktop

This file was deleted.

Loading