This repository has been archived by the owner on Apr 30, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 142
Mobile-first version of Pure's Website #183
Merged
Merged
Changes from 20 commits
Commits
Show all changes
58 commits
Select commit
Hold shift + click to select a range
468b6c6
initial pass at changing main.css to be mobile-first
tilomitra 76e5704
Initial commit of Gruntfile.js and grid_units grunt task
tilomitra 422679d
remove pure-g-r and add responsive-grid.css to layout
tilomitra 0055b4f
update home.handlebars to use mobile-first grid
tilomitra 7bc2f56
update partials/base/* to use mobile-first grid
tilomitra b7c5d7d
update forms/multi.handlebars to use mobile-first grid
tilomitra bf132c8
update legal.handlebars to use mobile-first grid
tilomitra ca5cfe1
remove .pure-g-r rule from main.css
tilomitra 85e68ee
Update Gruntfile.js
tilomitra 990b51d
Update grid docs with mobile-first grid info
tilomitra 0eed6e1
Merge branch 'master' into mobile-first
tilomitra 8b2e15d
Revert "Update grid docs with mobile-first grid info"
tilomitra a92223a
Update Gruntfile, main.handlebars, and package.json for oldIE mobile-…
tilomitra 33fd219
update rework-pure-grids, remove units from Gruntfile.js so we only g…
tilomitra 746a511
Use grunt-stripmq from my branch
tilomitra a0b12a9
Serve built assets from build/ dir
ericf 6f216b9
Move rework and rework-pure-grids to "dependencies" form devDependencies
ericf 8630fff
Add `grunt` to npm post-install script to build the things
ericf b70ebf5
Merge branch 'mobile-first' of github.com:tilomitra/pure-site into mo…
ericf 9ae2c75
Merge pull request #16 from ericf/mobile-first
tilomitra 6f5ca1a
Add .npmignore to override excluding build/
ericf a5e5e81
update grunt-stripmq to 0.0.3
tilomitra 7692135
add pure-img-responsive class to main.css
tilomitra a834769
Convert blog layout to be mobile-first
tilomitra cf0e558
Merge branch 'mobile-first' of github.com:tilomitra/pure-site into mo…
ericf 1517c36
Fix custom `med` grid media query to be: 48em === 768px
ericf 4725c63
Move all public/ assets into build/public/ and serve from there
ericf 9ec42e9
Move rainbow.js to a Bower dependency
ericf b3cf3d1
Add support for generating multiple custom grid unit stylesheets
ericf a53b097
Revert "Add .npmignore to override excluding build/"
ericf c8c6ad2
Merge pull request #17 from ericf/mobile-first
tilomitra 05fbbee
Add html5shiv to pages via CloudFlare CDN
ericf 275575e
Add Grunt watch task
ericf 952500b
Merge pull request #18 from ericf/mobile-first
tilomitra e3a0a54
update media query to be 48em
tilomitra cc7a790
update pricing layout to be mobile-first
tilomitra 263a6f3
update side-menu layout to be mobile-first
tilomitra 4a28a19
update marketing page to be mobile-first, update design
tilomitra b8c37cb
update gallery layout to be mobile-first, use new images
tilomitra a41f524
update email layout to be mobile-first
tilomitra eb0fa95
update Gruntfile with layout tasks
tilomitra 7cb3584
remove `pure-` prefix from classes that are not part of Pure core
tilomitra f2c51ab
px -> em, add `.pure-img-responsive` class for now
tilomitra e75be88
write `id` attribute before `class` :)
tilomitra 3213b2d
add "forms" to marketing meta
tilomitra 6b3f352
update blog layout colors & image
tilomitra e567a0d
fix `.header h2` being too light
tilomitra fb34712
Tweak main layout and footer/legal styles
ericf c2e38eb
Update copyright year to 2014
ericf 1592446
Improve Handlebars helpers: {{code}}, {{fileSize}}, and {{filePercent}}
ericf 9958219
Update Grids breakpoints to: 35.5, 48, 58, and 75em
ericf 7daf8b5
Completely refactor CSS to truly be mobile/content-first
ericf ab6d477
Update header heading styles
ericf 6147ec0
Use `-webkit-overflow-scrolling: touch;` for smooth scrolling
ericf 3f6bf22
Make Pure Paginator Buttons `box-sizing: content-box;`
ericf 8d2a0f2
Add more spacing for labels on Grids unit sizes chart
ericf e0a3168
Merge pull request #19 from ericf/mobile-first
tilomitra c4036d2
bump version to 1.9.0
tilomitra File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
.DS_Store | ||
bower_components/ | ||
node_modules/ | ||
build/ | ||
npm-debug.log | ||
deploy.json | ||
grasshopper.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
'use strict'; | ||
|
||
module.exports = function (grunt) { | ||
grunt.initConfig({ | ||
grid_units: { | ||
dest : 'build/css/responsive-grid.css', | ||
options: { | ||
mediaQueries: { | ||
med : 'screen and (min-width: 40em)', //approx 767px at 16px base font | ||
lrg : 'screen and (min-width: 75em)' //approx 1200px at 16px base font | ||
} | ||
} | ||
}, | ||
|
||
stripmq: { | ||
all: { | ||
files: { | ||
'build/css/responsive-grid-old-ie.css': ['build/css/responsive-grid.css'], | ||
'build/css/main-old-ie.css': ['public/css/main.css'] | ||
} | ||
} | ||
} | ||
}); | ||
|
||
// Local tasks. | ||
grunt.loadTasks('lib/tasks/'); | ||
grunt.loadNpmTasks('grunt-stripmq'); | ||
|
||
grunt.registerTask('default', ['grid_units', 'stripmq']); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
'use strict'; | ||
|
||
var rework = require('rework'), | ||
pureGrids = require('rework-pure-grids'); | ||
|
||
module.exports = function (grunt) { | ||
grunt.registerTask('grid_units', 'Generates grid units.', function (target) { | ||
var config = grunt.config.get(this.name), | ||
css = rework('').use(pureGrids.units(config.units, config.options)); | ||
|
||
grunt.file.write(config.dest, css.toString({indent: ' '})); | ||
grunt.log.writeln('File "' + config.dest + '" created.'); | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,58 @@ | ||
{ | ||
"name": "pure-site", | ||
"description": "The Pure CSS website.", | ||
"homepage": "http://purecss.io/", | ||
"version": "1.8.2", | ||
"private": true, | ||
"repository": "git://github.com/yui/pure-site.git", | ||
"contributors": [ | ||
"Eric Ferraiuolo <eferraiuolo@gmail.com> (http://ericf.me/)", | ||
"Tilo Mitra <tilomitra@gmail.com> (http://www.tilomitra.com/)" | ||
], | ||
"directories": { | ||
"lib": "./lib", | ||
"public": "./public", | ||
"views": "./views" | ||
"name": "pure-site", | ||
"description": "The Pure CSS website.", | ||
"homepage": "http://purecss.io/", | ||
"version": "1.8.2", | ||
"private": true, | ||
"repository": "git://github.com/yui/pure-site.git", | ||
"contributors": [ | ||
"Eric Ferraiuolo <eferraiuolo@gmail.com> (http://ericf.me/)", | ||
"Tilo Mitra <tilomitra@gmail.com> (http://www.tilomitra.com/)" | ||
], | ||
"directories": { | ||
"lib": "./lib", | ||
"public": "./public", | ||
"views": "./views" | ||
}, | ||
"main": "server.js", | ||
"engines": { | ||
"node": ">=0.8.x", | ||
"npm": ">=1.1.2" | ||
}, | ||
"dependencies": { | ||
"combohandler": "~0.2.0", | ||
"express": "3.x", | ||
"express-annotations": "~0.1.0", | ||
"express-params": "~0.0.3", | ||
"express-map": "~0.1.0", | ||
"express-slash": "~0.2.0", | ||
"express-state": "~1.0.1", | ||
"express3-handlebars": "~0.5.0", | ||
"handlebars": "~1.1.2", | ||
"glob": "~3.2.6", | ||
"async": "~0.2.9", | ||
"archiver": "~0.4.10", | ||
"bower": "~1.2.7", | ||
"css-parse": "~1.6.0", | ||
"es6-promise": "~0.1.0", | ||
"rework": "~0.18.3", | ||
"rework-pure-grids": "~0.3.2" | ||
}, | ||
"scripts": { | ||
"install": "bower install && grunt" | ||
}, | ||
"yahoo": { | ||
"bugzilla": { | ||
"product": "yui utilities", | ||
"component": "Pure" | ||
}, | ||
"main": "server.js", | ||
"engines": { | ||
"node": ">=0.8.x", | ||
"npm": ">=1.1.2" | ||
}, | ||
"dependencies": { | ||
"combohandler": "~0.2.0", | ||
"express": "3.x", | ||
"express-annotations": "~0.1.0", | ||
"express-params": "~0.0.3", | ||
"express-map": "~0.1.0", | ||
"express-slash": "~0.2.0", | ||
"express-state": "~1.0.1", | ||
"express3-handlebars": "~0.5.0", | ||
"handlebars": "~1.1.2", | ||
"glob": "~3.2.6", | ||
"async": "~0.2.9", | ||
"archiver": "~0.4.10", | ||
"bower": "~1.2.7", | ||
"css-parse": "~1.6.0", | ||
"es6-promise": "~0.1.0" | ||
}, | ||
"scripts": { | ||
"install": "bower install" | ||
}, | ||
"yahoo": { | ||
"bugzilla": { | ||
"product": "yui utilities", | ||
"component": "Pure" | ||
}, | ||
"custodian": { | ||
"email": "tilo@yahoo-inc.com", | ||
"url": "http://purecss.io/" | ||
} | ||
"custodian": { | ||
"email": "tilo@yahoo-inc.com", | ||
"url": "http://purecss.io/" | ||
} | ||
} | ||
}, | ||
"devDependencies": { | ||
"grunt": "~0.4.2", | ||
"grunt-stripmq": "jtangelder/grunt-stripmq" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,8 +3,7 @@ body { | |
} | ||
|
||
body, | ||
.pure-g [class *= "pure-u"], | ||
.pure-g-r [class *= "pure-u"] { | ||
.pure-g [class *= "pure-u"] { | ||
font-family: "proxima-nova", sans-serif; | ||
} | ||
|
||
|
@@ -59,10 +58,20 @@ dd { | |
* -------------------------- | ||
*/ | ||
|
||
|
||
/* Navigation Push Styles */ | ||
#layout { | ||
padding-left: 150px; /* left col width "#menu" */ | ||
left: 0; | ||
position: relative; | ||
padding-left: 0; | ||
} | ||
#layout.active { | ||
position: relative; | ||
left: 150px; | ||
} | ||
#layout.active #menu { | ||
left: 150px; | ||
width: 150px; | ||
} | ||
|
||
|
||
/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */ | ||
|
@@ -74,8 +83,9 @@ dd { | |
padding: 1.3em 0; | ||
} | ||
|
||
/* normalize paddings on small screens*/ | ||
.l-hbox { | ||
padding: 0 1.3em; | ||
padding: 1.3em; | ||
} | ||
|
||
.l-centered { | ||
|
@@ -91,7 +101,7 @@ dd { | |
min-height: 80px; | ||
margin: 0; | ||
color: #333; | ||
padding: 1em 2em; | ||
padding: 1em 1.1429em; | ||
text-align: center; | ||
border-bottom: 1px solid #eee; | ||
background: #fff; | ||
|
@@ -127,7 +137,7 @@ aside { | |
/* The content div is placed as a wrapper around all the docs */ | ||
.content { | ||
margin: 0 auto; | ||
padding: 0 2em; | ||
padding: 0 1.1429em; | ||
max-width: 800px; | ||
margin-bottom: 50px; | ||
} | ||
|
@@ -190,34 +200,36 @@ aside { | |
background: rgb(250, 250, 250); | ||
line-height: 1.6em; | ||
} | ||
|
||
.legal-license { | ||
margin: 0; | ||
} | ||
.legal-copyright, | ||
.legal-links { | ||
text-align: right; | ||
margin: 0; | ||
} | ||
.legal-links { | ||
list-style: none; | ||
padding: 0; | ||
} | ||
.legal-logo { | ||
|
||
.legal-license, | ||
.legal-copyright, | ||
.legal-logo, | ||
.legal-links, | ||
.legal-links li { | ||
text-align: center; | ||
} | ||
|
||
|
||
/* -------------------------- | ||
* Main Navigation Bar Styles | ||
* -------------------------- | ||
*/ | ||
|
||
|
||
#layout.active .menu-link { | ||
left: 150px; | ||
} | ||
|
||
#menu { | ||
margin-left: -150px; /* "#menu" width */ | ||
width: 150px; | ||
position: fixed; | ||
top: 0; | ||
left: 150px; | ||
left: 0; | ||
bottom: 0; | ||
z-index: 1000; /* so the menu or its navicon stays above all content */ | ||
background: #191818; | ||
|
@@ -252,9 +264,10 @@ aside { | |
} | ||
|
||
.menu-link { | ||
display: none; /* show this only on small screens */ | ||
position: fixed; | ||
display: block; /* show this only on small screens */ | ||
top: 0; | ||
left: 150px; /* "#menu width" */ | ||
left: 0; /* "#menu width" */ | ||
background: #000; | ||
background: rgba(0,0,0,0.7); | ||
font-size: 10px; /* change this value to increase/decrease button size */ | ||
|
@@ -375,60 +388,49 @@ a.pure-button-primary { | |
* -------------------------- | ||
*/ | ||
|
||
@media (max-width: 870px) { | ||
|
||
/* Navigation Push Styles */ | ||
#layout { | ||
position: relative; | ||
padding-left: 0; | ||
} | ||
#layout.active { | ||
position: relative; | ||
left: 150px; | ||
} | ||
#layout.active #menu { | ||
left: 150px; | ||
width: 150px; | ||
} | ||
|
||
#menu { | ||
left: 0; | ||
} | ||
|
||
.menu-link { | ||
position: fixed; | ||
left: 0; | ||
display: block; | ||
} | ||
|
||
#layout.active .menu-link { | ||
left: 150px; | ||
} | ||
} | ||
|
||
@media (max-width: 767px) { | ||
@media (min-width: 767px) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should the lengths be in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And also, we want 768px and above, right? (which is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, this should be changed to em. 768px === 48em, not 40em AFAIK. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, you're right, 48. |
||
|
||
.header, | ||
.content { | ||
font-size: 87.5%; | ||
padding-left: 2em; | ||
padding-right: 2em; | ||
} | ||
|
||
.header, | ||
.content, | ||
.legal { | ||
padding-left: 1.1429em; | ||
padding-right: 1.1429em; | ||
.legal-license { | ||
text-align: left; | ||
margin: 0; | ||
} | ||
|
||
.legal-license, | ||
.legal-copyright, | ||
.legal-links, | ||
.legal-links li { | ||
text-align: right; | ||
margin: 0; | ||
} | ||
.legal-logo { | ||
text-align: center; | ||
} | ||
|
||
/* normalize paddings on small screens*/ | ||
.l-hbox { | ||
padding: 1.3em; | ||
padding: 0 1.3em; | ||
} | ||
|
||
#layout { | ||
padding-left: 150px; /* left col width "#menu" */ | ||
left: 0; | ||
} | ||
#menu { | ||
left: 150px; | ||
} | ||
|
||
.menu-link { | ||
position: fixed; | ||
left: 150px; | ||
display: none; | ||
} | ||
|
||
#layout.active .menu-link { | ||
left: 150px; | ||
} | ||
|
||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are these styles that used to be tied up in a media query?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes