Skip to content

C
coopwire-hypothesis
Commit ff4f996b authored by Aron Carroll's avatar Aron Carroll
Browse files
Options

Merge pull request #1577 from hypothesis/grid-system 

Add a new simpler grid system.
parents be049d67 15dec2b1
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 231 deletions
h/static/styles/app.scss
View file @ ff4f996b
......@@ -56,7 +56,7 @@ ol {
@include respond-to(tablets desktops) {
margin: auto;
max-width: $break-medium;
max-width: $break-tablet;
padding-left: 4em;
padding-right: 4em;
}
......
h/static/styles/common.scss
View file @ ff4f996b
......@@ -6,13 +6,13 @@ $base-font-size: 16px;
$base-line-height: 26px;
$headings-color: $text-color;
@import 'mixins/responsive';
@import 'grid';
@import 'annotations';
@import 'forms';
@import 'markdown-editor';
@import 'spinner';
@import 'responsive';
@import 'threads';
@import 'yui_grid';
@import 'styled-text';
@import 'simple-search';
@import 'tags-input';
......@@ -46,24 +46,6 @@ em { font-style: italic; }
html {
font-size: $base-font-size;
line-height: $base-line-height;
@include yui_grid();
@include respond-to(handhelds) {
@include yui_grid('h-');
}
@include respond-to(wide-handhelds) {
@include yui_grid('wh-');
}
@include respond-to(tablets) {
@include yui_grid('t-');
}
@include respond-to(desktops) {
@include yui_grid('d-');
}
}
//PAPER////////////////////////////////
......
h/static/styles/grid.scss 0 → 100644
View file @ ff4f996b
@import "mixins/responsive";
@import "mixins/grid";
// A mobile first grid system. Requires the columns to be wrapped in a
// .grid container. Each column then should have a width applied. See
// mixins/grid for more info on available widths.
//
// By default a column width will apply to all viewport widths. In most cases
// a mobile viewport should not use columns so a more specific class will be
// required. The viewports available are:
//
// wide-handheld, tablet and desktop
//
// Each of these cascade, so a tablet class will apply to tablet sized
// viewports as well as desktops.
//
// Examples
//
// This creates a grid that only has rows on mobile. Two columns on tablets and
// four columns on desktop sized viewports.
//
// <div class="grid">
// <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-1-2 column-desktop-1-4"></div>
// </div>
$grid-default-gutter: 20px !default;
.grid {
@include grid-row($grid-default-gutter);
}
[class^="column-"], [class*=" column-"] {
@include grid-column($grid-default-gutter);
}
@include grid-setup("column-");
@include wide-handheld-and-up {
@include grid-setup("column-wide-handheld-");
}
@include tablet-and-up {
@include grid-setup("column-tablet-");
}
@include desktop-and-up {
@include grid-setup("column-desktop-");
}
h/static/styles/mixins/grid.scss 0 → 100644
View file @ ff4f996b
@import "compass/utilities/general/clearfix";
// Mixins for working with grids. A grid consists of an outer grid container
// and internal columns. Each column has a gutter defined by $grid-gutter.
// The implementation is largely based on the grid system created by
// Harry Roberts <http://csswizardry.com/csswizardry-grids/> and the Yahoo
// Pure system <http://git.io/ogODXA>
// Sets up styles for the grid wrapper.
@mixin grid-row($gutter: 0) {
margin: 0;
padding: 0;
// Remove the margin from the first column.
margin-left: -$gutter;
// Removes whitespace on browsers that do not support flexbox.
letter-spacing: -0.31em;
// Remove optimizeLegibility if applied.
text-rendering: optimizespeed;
// Removes whitespaec between elements in supporting browsers.
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
@content;
}
// Defines a column, can be included in any selector, widths can be provided
// by passing a @content block.
//
// Example
//
// .my-awkward-item {
// @include grid-column($default-gutter) { width: 43%; }
// }
@mixin grid-column($gutter: 0) {
display: inline-block;
vertical-align: top;
padding-left: $gutter;
vertical-align: top;
width: 100%;
box-sizing: border-box;
// Reset letter spacing.
letter-spacing: normal;
text-rendering: auto;
@content;
}
// Defines selectors for a class based grid system. Only includes a few common
// sizes at the moment, but can be expanded as necessary.
@mixin grid-setup($namespace: "") {
.#{$namespace}1-1 { width: 100%; }
.#{$namespace}1-2 { width: 50%; }
.#{$namespace}1-3 { width: 33.333%; }
.#{$namespace}2-3 { width: 66.666%; }
.#{$namespace}1-4 { width: 25%; }
.#{$namespace}3-4 { width: 75%; }
}
h/static/styles/mixins/responsive.scss 0 → 100644
View file @ ff4f996b
$break-wide-handheld: 480px !default;
$break-tablet: 768px !default;
$break-desktop: 1024px !default;
// DEPRECATED: Use mobile first mixins defined below.
@mixin respond-to($media) {
@if type-of($media) == 'string' {
@if $media == 'handhelds' {
@media only screen and (max-width: $break-wide-handheld) { @content; }
}
@else if $media == 'wide-handhelds' {
@media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
}
@else if $media == 'tablets' {
@media only screen and (min-width: $break-tablet + 1) and (max-width: $break-desktop) { @content; }
}
@else if $media == 'desktops' {
@media only screen and (min-width: $break-desktop + 1) { @content; }
}
}
@else if type-of($media) == 'list' {
@if index($media, 'handhelds') {
@media only screen and (max-width: $break-wide-handheld) { @content; }
}
@if index($media, 'wide-handhelds') {
@media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
}
@if index($media, 'tablets') {
@media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop){ @content; }
}
@if index($media, 'desktops') {
@media only screen and (min-width: $break-desktop + 1) { @content; }
}
}
}
// Mobile first media queries. Encorages development to work with mobile and
// modify as the viewport grows rather than designing for individual bands.
@mixin wide-handheld-and-up {
@media only screen and (min-width: $break-wide-handheld + 1) {
@content;
}
}
@mixin tablet-and-up {
@media only screen and (min-width: $break-tablet + 1) {
@content;
}
}
@mixin desktop-and-up {
@media only screen and (min-width: $break-desktop + 1) {
@content;
}
}
h/static/styles/responsive.scss deleted 100644 → 0
View file @ be049d67
$break-small: 480px !default;
$break-medium: 768px !default;
$break-large: 1024px !default;
@mixin respond-to($media) {
@if type-of($media) == 'string' {
@if $media == 'handhelds' {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == 'wide-handhelds' {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
}
@else if $media == 'tablets' {
@media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; }
}
@else if $media == 'desktops' {
@media only screen and (min-width: $break-large + 1) { @content; }
}
}
@else if type-of($media) == 'list' {
@if index($media, 'handhelds') {
@media only screen and (max-width: $break-small) { @content; }
}
@if index($media, 'wide-handhelds') {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
}
@if index($media, 'tablets') {
@media only screen and (min-width: $break-medium + -1) and (max-width: $break-large){ @content; }
}
@if index($media, 'desktops') {
@media only screen and (min-width: $break-large + 1) { @content; }
}
}
}
h/static/styles/topbar.scss
View file @ ff4f996b
@import 'base';
@import 'responsive';
@import 'mixins/responsive';
body {
background-color: transparent;
......@@ -42,7 +41,7 @@ body {
.inner {
margin: 0 auto;
max-width: $break-medium;
max-width: $break-tablet;
padding: 0 4em;
position: relative;
......
h/static/styles/yui_grid.scss deleted 100644 → 0
View file @ be049d67
/*
Namespace-aware yui_grid mixin courtesy of Alex Kissinger (@voidfiles).
https://gist.github.com/voidfiles/3362608
*/
@import 'responsive';
@mixin yui_grid($namespace:'') {
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
.#{$namespace}yui3-g {
letter-spacing: -0.31em; /* webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */
word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.#{$namespace}yui3-u,
.#{$namespace}yui3-u-1,
.#{$namespace}yui3-u-1-2,
.#{$namespace}yui3-u-1-3,
.#{$namespace}yui3-u-2-3,
.#{$namespace}yui3-u-1-4,
.#{$namespace}yui3-u-3-4,
.#{$namespace}yui3-u-1-5,
.#{$namespace}yui3-u-2-5,
.#{$namespace}yui3-u-3-5,
.#{$namespace}yui3-u-4-5,
.#{$namespace}yui3-u-1-6,
.#{$namespace}yui3-u-5-6,
.#{$namespace}yui3-u-1-8,
.#{$namespace}yui3-u-3-8,
.#{$namespace}yui3-u-5-8,
.#{$namespace}yui3-u-7-8,
.#{$namespace}yui3-u-1-12,
.#{$namespace}yui3-u-5-12,
.#{$namespace}yui3-u-7-12,
.#{$namespace}yui3-u-11-12,
.#{$namespace}yui3-u-1-24,
.#{$namespace}yui3-u-5-24,
.#{$namespace}yui3-u-7-24,
.#{$namespace}yui3-u-11-24,
.#{$namespace}yui3-u-13-24,
.#{$namespace}yui3-u-17-24,
.#{$namespace}yui3-u-19-24,
.#{$namespace}yui3-u-23-24 {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
.#{$namespace}yui3-u-1 {
display: block;
width: auto;
}
.#{$namespace}yui3-u-1-2 {
width: 50%;
}
.#{$namespace}yui3-u-1-3 {
width: 33.33333%;
}
.#{$namespace}yui3-u-2-3 {
width: 66.66666%;
}
.#{$namespace}yui3-u-1-4 {
width: 25%;
}
.#{$namespace}yui3-u-3-4 {
width: 75%;
}
.#{$namespace}yui3-u-1-5 {
width: 20%;
}
.#{$namespace}yui3-u-2-5 {
width: 40%;
}
.#{$namespace}yui3-u-3-5 {
width: 60%;
}
.#{$namespace}yui3-u-4-5 {
width: 80%;
}
.#{$namespace}yui3-u-1-6 {
width: 16.656%;
}
.#{$namespace}yui3-u-5-6 {
width: 83.33%;
}
.#{$namespace}yui3-u-1-8 {
width: 12.5%;
}
.#{$namespace}yui3-u-3-8 {
width: 37.5%;
}
.#{$namespace}yui3-u-5-8 {
width: 62.5%;
}
.#{$namespace}yui3-u-7-8 {
width: 87.5%;
}
.#{$namespace}yui3-u-1-12 {
width: 8.3333%;
}
.#{$namespace}yui3-u-5-12 {
width: 41.6666%;
}
.#{$namespace}yui3-u-7-12 {
width: 58.3333%;
}
.#{$namespace}yui3-u-11-12 {
width: 91.6666%;
}
.#{$namespace}yui3-u-1-24 {
width: 4.1666%;
}
.#{$namespace}yui3-u-5-24 {
width: 20.8333%;
}
.#{$namespace}yui3-u-7-24 {
width: 29.1666%;
}
.#{$namespace}yui3-u-11-24 {
width: 45.8333%;
}
.#{$namespace}yui3-u-13-24 {
width: 54.1666%;
}
.#{$namespace}yui3-u-17-24 {
width: 70.8333%;
}
.#{$namespace}yui3-u-19-24 {
width: 79.1666%;
}
.#{$namespace}yui3-u-23-24 {
width: 95.8333%;
}
.#{$namespace}yui3-u-none {
display: none;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment