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

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 3 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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/base/css/base.css
View file
Open in desktop
Expand Up @@ -15,3 +15,12 @@
[hidden] {
display: none !important;
}

/**
* Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
* aspect ratio.
*/
.img-responsive {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it not prefixed with pure?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good point, this should be. I also think we could probably drop this style. Anyone who's doing something with images in their grid can easily add these styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's pretty important to have a fundamental class such as this in Pure. Everyone uses this technique for responsive images, so instead of people duplicating this class in their app codebase, it should be provided by Pure. I agree that it should have a pure prefix though.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about: pure-img?

max-width: 100%;
height: auto;
}
20 changes: 14 additions & 6 deletions src/forms/tests/manual/forms.html
View file
Open in desktop
Expand Up @@ -9,6 +9,14 @@
<link rel="stylesheet" href="../../../../build/grids.css">
<link rel="stylesheet" href="../../../../build/buttons.css">
<link rel="stylesheet" href="../../../../build/forms.css">
<style>
@media screen and (min-width: 767px) {
.pure-u-med-1-3 {
width: 33.3333%;
}
}

</style>
</head>

<body>
Expand Down Expand Up @@ -38,24 +46,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-med-1-3">
<label>First Name</label>
<input type="text">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-med-1-3">
<label>Password</label>
<input type="password">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-med-1-3">
<label>E-Mail</label>
<input type="email" required>
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-med-1-3">
<label>City</label>
<input type="text">
</div>
<div class="pure-u-1-3">
<div class="pure-u-1 pure-u-med-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.