Skip to content
Browse files

Simplified helper functions

  • Loading branch information...
1 parent 23f102c commit 23227faa8617cf0924f3cf8d0c28962d51a0689d @lesjames committed Jun 28, 2012
Showing with 39 additions and 87 deletions.
  1. +0 −62 elements/css/style.css
  2. +8 −8 elements/sass/_structure.scss
  3. +14 −9 elements/sass/framework/_grid-helpers.scss
  4. +17 −8 readme.md
View
62 elements/css/style.css
@@ -257,26 +257,6 @@ head {
width: 0;
}
-body::after {
- content: '';
- position: fixed;
- top: 0;
- bottom: 0;
- pointer-events: none;
- background: -webkit-gradient(linear, 0% 50%, 80 50%, color-stop(25%, transparent), color-stop(25%, rgba(255, 0, 0, 0.1)), color-stop(100%, rgba(255, 0, 0, 0.1)));
- background: -webkit-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -moz-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -o-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -ms-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- left: 0;
- right: 20px;
- -webkit-background-size: 25%;
- -moz-background-size: 25%;
- -o-background-size: 25%;
- background-size: 25%;
-}
-
/* Grid based on https://github.com/necolas/griddle by Nicolas Gallagher (@necolas) */
.wrapper {
margin-left: 1.25em;
@@ -337,27 +317,6 @@ body::after {
}
@media (min-width: 46.25em) {
- body::after {
- content: '';
- position: fixed;
- top: 0;
- bottom: 0;
- pointer-events: none;
- background: -webkit-gradient(linear, 0% 50%, 80 50%, color-stop(25%, transparent), color-stop(25%, rgba(255, 0, 0, 0.1)), color-stop(100%, rgba(255, 0, 0, 0.1)));
- background: -webkit-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -moz-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -o-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -ms-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- left: 50%;
- width: 46.25em;
- margin-left: -23.125em;
- -webkit-background-size: 80px;
- -moz-background-size: 80px;
- -o-background-size: 80px;
- background-size: 80px;
- }
-
head {
width: 9px;
}
@@ -381,27 +340,6 @@ body::after {
}
}
@media (min-width: 61.25em) {
- body::after {
- content: '';
- position: fixed;
- top: 0;
- bottom: 0;
- pointer-events: none;
- background: -webkit-gradient(linear, 0% 50%, 80 50%, color-stop(25%, transparent), color-stop(25%, rgba(255, 0, 0, 0.1)), color-stop(100%, rgba(255, 0, 0, 0.1)));
- background: -webkit-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -moz-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -o-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: -ms-linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- background: linear-gradient(left, transparent 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 80px);
- left: 50%;
- width: 61.25em;
- margin-left: -30.625em;
- -webkit-background-size: 80px;
- -moz-background-size: 80px;
- -o-background-size: 80px;
- background-size: 80px;
- }
-
head {
width: 12px;
}
View
16 elements/sass/_structure.scss
@@ -1,9 +1,9 @@
-// Variables
+// Grid Variables
// =============================================================================
$grid-column: 60px;
$grid-gutter: 20px;
-$grid-overlay: true; // generate visual grid overlay
+$grid-overlay: false; // generate visual grid overlay
$ie-support: false; // fallback breakpoint
// Import grid framework
@@ -16,13 +16,13 @@ $ie-support: false; // fallback breakpoint
// =============================================================================
@include breakpoint(9) {
- .content { width: fluid-cell(5,9); }
- .sub-content { width: fluid-cell(4,9); }
- .feature { width: fluid-cell(3,9); }
+ .content { width: fluid(5); }
+ .sub-content { width: fluid(4); }
+ .feature { width: fluid(3); }
}
@include breakpoint(12) {
- .content { width: fluid-cell(8,12); }
- .sub-content { width: fluid-cell(4,12); }
- .feature { width: fluid-cell(4,12); }
+ .content { width: fluid(8); }
+ .sub-content { width: fluid(4); }
+ .feature { width: fluid(4); }
}
View
23 elements/sass/framework/_grid-helpers.scss
@@ -6,16 +6,17 @@ $grid-gutter: 20px !default; // can be px, em, or %
$grid-overlay: false !default; // generate visual grid overlay
$ie-support: false !default; // number of columns for IE fallback (must match a breakpoint)
$grid-direction: left !default; // switch to 'right' for rtl
+$current-bp: 0; // init breakpoint variable
// Functions
// =============================================================================
// column widths for elements with .grid-cell class
-@function fixed-cell($col) { @return $col * ( em($grid-column) + em($grid-gutter) ) }
-@function fluid-cell($col, $avail) { @return (100% / $avail) * $col; }
+@function fixed($col) { @return $col * ( em($grid-column) + em($grid-gutter) ) }
+@function fluid($col, $avail: $current-bp) { @return (100% / $avail) * $col; }
// column width for elements not in grid
-@function fixed-col($col) { @return $col * ( em($grid-column) + em($grid-gutter) ) - em($grid-gutter) }
+@function no-grid-fixed($col) { @return $col * ( em($grid-column) + em($grid-gutter) ) - em($grid-gutter) }
// Breakpoint mixin
// =============================================================================
@@ -24,27 +25,31 @@ $grid-direction: left !default; // switch to 'right' for rtl
head { width: 0; }
@mixin breakpoint($min, $max: false) {
+
+ // set current breakpoint for fluid function
+ $current-bp: $min;
+
@if ($max) {
// create min/max mq
@if ($min == 0) {
- @media ( max-width: fixed-cell($max) + em($grid-gutter) ) { @content }
+ @media ( max-width: fixed($max) + em($grid-gutter) ) { @content }
} @else {
- @media ( min-width: fixed-cell($min) + em($grid-gutter) ) and ( max-width: fixed-cell($max) + em($grid-gutter) ) { @content }
+ @media ( min-width: fixed($min) + em($grid-gutter) ) and ( max-width: fixed($max) + em($grid-gutter) ) { @content }
}
} @else {
// create min width mq
- @media ( min-width: fixed-cell($min) + em($grid-gutter) ) {
+ @media ( min-width: fixed($min) + em($grid-gutter) ) {
@if($grid-overlay) { @include grid-overlay($min); }
// create hook for js
head { width: #{$min + 'px'}; }
// proper sizing of wrapper
- .wrapper { width: fixed-cell($min) - em($grid-gutter); margin-left: auto; margin-right: auto; }
+ .wrapper { width: fixed($min) - em($grid-gutter); margin-left: auto; margin-right: auto; }
@content
}
// ie fallback
@if ($ie-support and $min <= $ie-support) {
.lt-ie9 {
- .wrapper { width: fixed-cell($min) - em($grid-gutter); margin-left: auto; margin-right: auto; }
+ .wrapper { width: fixed($min) - em($grid-gutter); margin-left: auto; margin-right: auto; }
@content
}
}
@@ -60,7 +65,7 @@ head { width: 0; }
@include background(linear-gradient(left, transparent $grid-gutter, transparentize(red, .9) $grid-gutter, transparentize(red, .9) $grid-gutter + $grid-column));
@if ($col) {
left: 50%;
- width: fixed-cell($col) + em($grid-gutter); margin-left: fixed-cell($col) / -2 - (em($grid-gutter)/2);
+ width: fixed($col) + em($grid-gutter); margin-left: fixed($col) / -2 - (em($grid-gutter)/2);
@include background-size($grid-gutter + $grid-column);
} @else {
left: 0; right: $grid-gutter;
View
25 readme.md
@@ -39,13 +39,14 @@ fluid widths.
### Helper Functions
-`fluid-cell($col, $available)` calculates a percentage based on how many columns you want
-against how many columns are available.
+`fluid($col)` calculates a percentage based on how many columns you want. Has an optional
+second argument that can override the number of availiable columns when calulating the
+percentage.
-`fixed-cell($col)` calculates a fixed width for grid cells. Since this function accounts
+`fixed($col)` calculates a fixed width for grid cells. Since this function accounts
for border-box padding you should only use this function for sizing `.grid-cell` units.
-`fixed-col($col)` calculates a fixed width for items outside of the grid system. This function
+`no-grid-fixed($col)` calculates a fixed width for items outside of the grid system. This function
does not assume border-box sizing and should be applied to elements other than `.grid-cell` units.
## The Breakpoint Mixin
@@ -59,20 +60,20 @@ auto generated for each break point.
// 8 column breakpoint
@include breakpoint(8){
.fluid-demo {
- .grid-cell { width: fluid-cell(4,8); }
+ .grid-cell { width: fluid(4); }
}
.fixed-demo {
- .grid-cell { width: fixed-cell(2); }
+ .grid-cell { width: fixed(2); }
}
}
// 12 column breakpoint
@include breakpoint(12){
.fluid-demo {
- .grid-cell { width: fluid-cell(3,12); }
+ .grid-cell { width: fluid(3); }
}
.fixed-demo {
- .grid-cell { width: fixed-cell(3); }
+ .grid-cell { width: fixed(3); }
}
}
```
@@ -153,8 +154,15 @@ Breakpoint creates a hidden label (width on the head tag) that can be read by Ja
the current number of columns to your scripts. This can be used to conditionally load
assests at certain breakpoints or trigger other scripty stuff.
+### Vertical Rhythm
+
+Added Zurb Foundation's implementation of vertical rhythm. This requires the
+[Modular Scale](https://github.com/scottkellum/modular-scale) gem
+to be importated into the config.rb file.
+
## Changelog
+6/28/12 - Simplified helper functions. Added vertical rhythm component.
6/11/12 - Reorg and cleanup. Added JS hook and script
5/28/12 - Pushed version 2.0
@@ -166,6 +174,7 @@ Breakpoint uses the following frameworks and technologies:
[normalize.css](http://necolas.github.com/normalize.css/),
[Griddle](https://github.com/necolas/griddle),
[Frameless Grid](http://framelessgrid.com/),
+[Zurb Foundation](https://github.com/zurb/foundation/blob/3.0-scss/scss/typography.scss),
[Sass](http://sass-lang.com/),
[Compass](http://compass-style.org/)

0 comments on commit 23227fa

Please sign in to comment.
Something went wrong with that request. Please try again.