Skip to content
This repository has been archived by the owner on Apr 30, 2020. It is now read-only.

Mobile-first version of Pure's Website #183

Merged
merged 58 commits into from
Jan 21, 2014
Merged
Show file tree
Hide file tree
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 Dec 23, 2013
76e5704
Initial commit of Gruntfile.js and grid_units grunt task
tilomitra Dec 27, 2013
422679d
remove pure-g-r and add responsive-grid.css to layout
tilomitra Dec 27, 2013
0055b4f
update home.handlebars to use mobile-first grid
tilomitra Dec 27, 2013
7bc2f56
update partials/base/* to use mobile-first grid
tilomitra Dec 27, 2013
b7c5d7d
update forms/multi.handlebars to use mobile-first grid
tilomitra Dec 27, 2013
bf132c8
update legal.handlebars to use mobile-first grid
tilomitra Dec 27, 2013
ca5cfe1
remove .pure-g-r rule from main.css
tilomitra Dec 27, 2013
85e68ee
Update Gruntfile.js
tilomitra Dec 27, 2013
990b51d
Update grid docs with mobile-first grid info
tilomitra Dec 27, 2013
0eed6e1
Merge branch 'master' into mobile-first
tilomitra Dec 30, 2013
8b2e15d
Revert "Update grid docs with mobile-first grid info"
tilomitra Jan 3, 2014
a92223a
Update Gruntfile, main.handlebars, and package.json for oldIE mobile-…
tilomitra Jan 9, 2014
33fd219
update rework-pure-grids, remove units from Gruntfile.js so we only g…
tilomitra Jan 9, 2014
746a511
Use grunt-stripmq from my branch
tilomitra Jan 9, 2014
a0b12a9
Serve built assets from build/ dir
ericf Jan 9, 2014
6f216b9
Move rework and rework-pure-grids to "dependencies" form devDependencies
ericf Jan 9, 2014
8630fff
Add `grunt` to npm post-install script to build the things
ericf Jan 9, 2014
b70ebf5
Merge branch 'mobile-first' of github.com:tilomitra/pure-site into mo…
ericf Jan 9, 2014
9ae2c75
Merge pull request #16 from ericf/mobile-first
tilomitra Jan 9, 2014
6f5ca1a
Add .npmignore to override excluding build/
ericf Jan 9, 2014
a5e5e81
update grunt-stripmq to 0.0.3
tilomitra Jan 10, 2014
7692135
add pure-img-responsive class to main.css
tilomitra Jan 10, 2014
a834769
Convert blog layout to be mobile-first
tilomitra Jan 10, 2014
cf0e558
Merge branch 'mobile-first' of github.com:tilomitra/pure-site into mo…
ericf Jan 10, 2014
1517c36
Fix custom `med` grid media query to be: 48em === 768px
ericf Jan 10, 2014
4725c63
Move all public/ assets into build/public/ and serve from there
ericf Jan 10, 2014
9ec42e9
Move rainbow.js to a Bower dependency
ericf Jan 10, 2014
b3cf3d1
Add support for generating multiple custom grid unit stylesheets
ericf Jan 10, 2014
a53b097
Revert "Add .npmignore to override excluding build/"
ericf Jan 10, 2014
c8c6ad2
Merge pull request #17 from ericf/mobile-first
tilomitra Jan 10, 2014
05fbbee
Add html5shiv to pages via CloudFlare CDN
ericf Jan 10, 2014
275575e
Add Grunt watch task
ericf Jan 10, 2014
952500b
Merge pull request #18 from ericf/mobile-first
tilomitra Jan 10, 2014
e3a0a54
update media query to be 48em
tilomitra Jan 13, 2014
cc7a790
update pricing layout to be mobile-first
tilomitra Jan 13, 2014
263a6f3
update side-menu layout to be mobile-first
tilomitra Jan 13, 2014
4a28a19
update marketing page to be mobile-first, update design
tilomitra Jan 13, 2014
b8c37cb
update gallery layout to be mobile-first, use new images
tilomitra Jan 13, 2014
a41f524
update email layout to be mobile-first
tilomitra Jan 13, 2014
eb0fa95
update Gruntfile with layout tasks
tilomitra Jan 13, 2014
7cb3584
remove `pure-` prefix from classes that are not part of Pure core
tilomitra Jan 13, 2014
f2c51ab
px -> em, add `.pure-img-responsive` class for now
tilomitra Jan 13, 2014
e75be88
write `id` attribute before `class` :)
tilomitra Jan 13, 2014
3213b2d
add "forms" to marketing meta
tilomitra Jan 13, 2014
6b3f352
update blog layout colors & image
tilomitra Jan 14, 2014
e567a0d
fix `.header h2` being too light
tilomitra Jan 14, 2014
fb34712
Tweak main layout and footer/legal styles
ericf Jan 14, 2014
c2e38eb
Update copyright year to 2014
ericf Jan 16, 2014
1592446
Improve Handlebars helpers: {{code}}, {{fileSize}}, and {{filePercent}}
ericf Jan 17, 2014
9958219
Update Grids breakpoints to: 35.5, 48, 58, and 75em
ericf Jan 17, 2014
7daf8b5
Completely refactor CSS to truly be mobile/content-first
ericf Jan 17, 2014
ab6d477
Update header heading styles
ericf Jan 17, 2014
6147ec0
Use `-webkit-overflow-scrolling: touch;` for smooth scrolling
ericf Jan 17, 2014
3f6bf22
Make Pure Paginator Buttons `box-sizing: content-box;`
ericf Jan 17, 2014
8d2a0f2
Add more spacing for labels on Grids unit sizes chart
ericf Jan 17, 2014
e0a3168
Merge pull request #19 from ericf/mobile-first
tilomitra Jan 17, 2014
c4036d2
bump version to 1.9.0
tilomitra Jan 21, 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
1 change: 1 addition & 0 deletions .gitignore
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
30 changes: 30 additions & 0 deletions Gruntfile.js
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']);
};
3 changes: 3 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@ if (config.isDevelopment) {
console.log('Serving Pure', config.pure.version, 'from:', config.pure.local);
}

// Prefer built static assets.
app.use(express.static(config.dirs.build));
app.use(express.static(config.dirs.pub));

app.use(middleware.notfound);

if (config.isDevelopment) {
Expand Down
1 change: 1 addition & 0 deletions config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = Object.freeze({
port: env.PORT || 5000,

dirs: Object.freeze({
build : path.resolve('build/'),
pub : path.resolve('public/'),
views : path.resolve('views/pages/'),
layouts : path.resolve('views/layouts/'),
Expand Down
14 changes: 14 additions & 0 deletions lib/tasks/grid-units.js
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.');
});
};
104 changes: 55 additions & 49 deletions package.json
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"
}
}
124 changes: 63 additions & 61 deletions public/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -59,10 +58,20 @@ dd {
* --------------------------
*/


/* Navigation Push Styles */
Copy link
Collaborator

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes

#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. */
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should the lengths be in em for our media queries?

Copy link
Collaborator

Choose a reason for hiding this comment

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

And also, we want 768px and above, right? (which is 40em).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, this should be changed to em. 768px === 48em, not 40em AFAIK.

Copy link
Collaborator

Choose a reason for hiding this comment

The 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;
}

}
Loading