Mobile-first version of Pure's Website #183
Conversation
This Gruntfile generates the responsive grid needed for the Pure Site via rework-pure-grids. As of this commit, we need to fix pure-css/rework-pure-grids#6 so until we do that, you have to manually remove the non-media query rules from the outputted CSS.
Updated the grid that we generate based on the needs of grid doc.
This commit updates the Grids documentation with the following: * How to generate a mobile-first grid * How to use rework-pure-grids * Examples * Removal of partials/examples that don't apply anymore
This reverts commit 990b51d.
This is temporary, until @jtangelder publishes the latest grunt-stripmq on npm. The latest has the css-mediaquery dependency.
…bile-first Conflicts: package.json
Added build/ dir and setup things to aid deployment
| <div class="l-box"> | ||
| <a href="{{pathTo 'layouts'}}"> | ||
| <img src="img/layout-icon.jpg" alt="Diagram of a sample layout."> | ||
| <img src="img/layout-icon.jpg" class="img-responsive" alt="Diagram of a sample layout."> |
There was a problem hiding this comment.
I don't think we should add this classname to Pure. pure-css/pure#267 (comment) Can we just add this into pure-site's main.css for now?
There was a problem hiding this comment.
I think this needs to be in Pure. It's a pretty fundamental class. I agree with the other comment thread in that it should be renamed to pure-img-responsive. I don't think we should expect people to add this into their main.css because a responsive framework needs to deal with responsive images.
There was a problem hiding this comment.
Sure. Sounds fine, but let's not let that simple style rule block this PR. We can temporarily add it to pure-site's main.css until the next version of Pure is released and call it dogfood 😉
There was a problem hiding this comment.
Oh yeah, we can totally add it in main.css for now so that this PR is completely decoupled from any Pure PR. 😃
I think this can be removed from the Todos since we decided against trying to cram that into this PR.
I don't think is is required now either for this PR. I do however think we need to time this task with the revamp of the Grids UI. |
|
Thanks @ericf. I removed those from the TODOs. Just the layouts left! |
|
@tilomitra This stuff is looking pretty good! I still think there's room for lots of improvement in the CSS breakpoints used on the site and in the layouts. It seems like most layouts use the main grid units used by the website; I think the layouts should probably all be freed from that and have their own layouts and break points. Do you want me to take a stab at refining the breakpoints used by the layouts? |
|
I'm not sure the new colors on the blog layout are an improvement. If you really like them, then can you take a new screenshot? Or can you put the colors back to how they were before? |
|
@ericf I found the default grid worked pretty well with the existing layouts. I didn't feel tied down to it, but feel free to take a stab if you think the media queries can be improved! Re. blog colors, I wasn't a big fan of the old purple/blue color scheme, but if you don't like the current one, I'll take another pass at it. |
Cool, either way, let's get the screenshot in sync with whatever you decided for the colors. |
|
@ericf Hopefully you like this new color scheme more! Updated the image too. |
|
@tilomitra yeah looks good! I have a ton of really good stuff happening to the site's CSS 😄 I can't finish it tonight, but I will in the morning—all awesome mobile/content-first tweaks. |
This also adds `pure-u-sm-*` grid units.
Big refactor of CSS to truly be mobile/content-first
Mobile-first version of Pure's Website
This pull request is overhauls the site's CSS to be mobile-first, in accordance with the new mobile-first responsive grid system that we are building out. This pull request is closely tied to the work that I've been doing in the Pure repo in PR #267. That's the version of Pure that I've tested this stuff against.
What's Changed
main.cssis now mobile-first, usingmin-widthinstead ofmax-width. The biggest change here is that the slide-out menu is now coded in a mobile-first way.Gruntfile.jswhich generates the media queries for a mobile-first grid by using rework-pure-grids.pure-g-rfrom the site. This is not needed anymore in the mobile-first grid. All instances ofpure-g-rhave been replaced with their mobile-first counterpart. Still need to removepure-g-rfrom layouts though.What's left to be done
Gruntfile.js.