Skip to content
This repository

Setting up a vertical rhythm for typography with compass #954

Closed
wants to merge 18 commits into from

3 participants

Chris Nicola Chris Michel Mark Hayes
Chris Nicola

This uses the compass vertical rhythm mixin to setup the typography
settings in addition to modular scale. The fonts and line-heights are
set in pixels to make this work sensibly. When Compass changes to
support rems with a pixel fall back that can be used instead.

I've also added class based font sizes so that font sizes can be used
regardless of header level. It isn't all that common that H1 is always
the same size in all contexts and with the new HTML5 sematics it will be
pretty common for most headings in a hierarchy of content to be H1's.

Setting up a vertical rhythm for typography with compass
This uses the compass vertical rhythm mixin to setup the typography
settings in addition to modular scale. The fonts and line-heights are
set in pixels to make this work sensibly. When Compass changes to
support rems with a pixel fall back that can be used instead.

I've also added class based font sizes so that font sizes can be used
regardless of header level. It isn't all that common that H1 is always
the same size in all contexts and with the new HTML5 sematics it will be
pretty common for most headings in a hierarchy of content to be H1's.
19a49cd
Chris Nicola

This addresses issue #947. This is a hastily thrown together change so please let me know what you think. I'm not that familiar with all of Foundation yet so I'm not sure what impact it might have. It looks ok on the typography page though.

I did change the important number to 40px as otherwise the line-height of h1 tags is excessive (66px for a 44px font whereas 40px fits nicely in a 44px line height). Overall I think it looks decent.

added some commits September 29, 2012
Adjust a few more margins to complete the vertical ryhthm
Also loosen the rules to allow half lines for the line-heights of larger
fonts. This means the line-heights increase from 22px, 33px, 44px, 55px
instead of 22px, 44px, 66px. This is almost undetectable visually but
avoids large gaps between lines for certain header sizes.
392cf80
Vertical rhythm for ui components c1d1fd2
Adjust horizontal rule VR to compenstate for 1px border 843ac73
Chris Nicola

Don't pull this just yet, I'm still working on forms and other elements. Need a few more days and need to look at each item.

In the end it isn't going to be perfect, that appears to be somewhat impossible, but rather a reasonable set of defaults. It's possible we may want to make this an option or module that can be imported if people want a vertical rhythm default.

The main idea is that much like having a horizontal grid, we are setting up a vertical grid based around the baseline (or an even division of the baseline like 1/2) so that things in parallel line up and also so that text lines have a smooth even rhythm (which helps with readability). I've set the default grid beat to 11px with the baseline at 22px for a base font of 14px.

added some commits October 05, 2012
Setup VR for form elements adjust buttons slightly
I won't be setting a VR for buttons because the sizes don't quite work
right. It will be up to users to decide how they want their button to
fit in the vertical grid by setting margins as needed.
bf94ae2
Set $topBarHeight to $baseLineHeight * 2 c8ed0ce
Fix line-height setting on all elements b61cae0
Adds class to add some body padding when using a fixed topbar b0ce381
Adjust navigation elements for vertical rhythm 2efd403
Vertical rhythm setup for tabs e7ac63f
Tweaking typography to absolute pixel perfection afe4566
Chris Nicola

This is almost finished. @zurbchris I'd love some feedback from you guys. If you want to see exactly how the effect works uncomment line: 8 in _typography.scss and it will draw a vertical grid at 22px for you and you can see how the paragraphs continue to stay in rhythm no matter what.

I could still tweak the buttons and forms a bit more, but they are obviously a bit harder and it is ok for some elements to come out of rhythm from time to time as long as things get back in step afterwards.

added some commits October 05, 2012
Adjust grid typography and adjust grid demo for borders
The block-grid has been given consistent top and bottom padding to keep
it in rhythm. I'm not sure if this breaks a desired effect with the
smaller padding sizes as blocks became smaller.
065740d
Fixes prefix and postfix style buttons. a606c1d
Fixing up VR for form elements specifically fieldsets and custom
Noticed a problem with a <br/> under the custom checkbox area in the
demo. It is overlapping the previous row causing it to report height
incorrectly. A div with a space in it works though.
090ef20
Comment out vertical rhythm debugging lines a1af76c
Fix margin on progress bar so it doesn't throw of rhythm f3c84a3
Chris Michel

I'm excited to look at this soon, been busy working on 3.2. I haven't forgotten about it.

Chris Nicola Merge tag 'v3.2.2' into vertical-rhythm
Version 3.2.2

Conflicts:
	scss/foundation/_settings.scss
	scss/foundation/common/_forms.scss
	scss/foundation/common/_typography.scss
	scss/foundation/components/_grid.scss
	scss/foundation/components/modules/_tabs.scss
	scss/foundation/components/modules/_topbar.scss
	scss/foundation/components/modules/_ui.scss
	test/forms.html
9af23de
Chris Nicola

@zurbchris I've merged in the 3.2.2 changes to make integrating this a bit easier.

Chris Michel

Awesome. We're looking to add this in 4.0!

Mark Hayes mhayes closed this February 28, 2013
Chris Nicola

@mhayes you guys change your mind about this for 4.0 or would you like me to submit another PR rebased onto 4.0?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 18 unique commits by 2 authors.

Sep 27, 2012
Setting up a vertical rhythm for typography with compass
This uses the compass vertical rhythm mixin to setup the typography
settings in addition to modular scale. The fonts and line-heights are
set in pixels to make this work sensibly. When Compass changes to
support rems with a pixel fall back that can be used instead.

I've also added class based font sizes so that font sizes can be used
regardless of header level. It isn't all that common that H1 is always
the same size in all contexts and with the new HTML5 sematics it will be
pretty common for most headings in a hierarchy of content to be H1's.
19a49cd
Sep 29, 2012
Adjust a few more margins to complete the vertical ryhthm
Also loosen the rules to allow half lines for the line-heights of larger
fonts. This means the line-heights increase from 22px, 33px, 44px, 55px
instead of 22px, 44px, 66px. This is almost undetectable visually but
avoids large gaps between lines for certain header sizes.
392cf80
Sep 30, 2012
Vertical rhythm for ui components c1d1fd2
Adjust horizontal rule VR to compenstate for 1px border 843ac73
Oct 05, 2012
Setup VR for form elements adjust buttons slightly
I won't be setting a VR for buttons because the sizes don't quite work
right. It will be up to users to decide how they want their button to
fit in the vertical grid by setting margins as needed.
bf94ae2
Set $topBarHeight to $baseLineHeight * 2 c8ed0ce
Fix line-height setting on all elements b61cae0
Adds class to add some body padding when using a fixed topbar b0ce381
Adjust navigation elements for vertical rhythm 2efd403
Vertical rhythm setup for tabs e7ac63f
Tweaking typography to absolute pixel perfection afe4566
Adjust grid typography and adjust grid demo for borders
The block-grid has been given consistent top and bottom padding to keep
it in rhythm. I'm not sure if this breaks a desired effect with the
smaller padding sizes as blocks became smaller.
065740d
Fixes prefix and postfix style buttons. a606c1d
Fixing up VR for form elements specifically fieldsets and custom
Noticed a problem with a <br/> under the custom checkbox area in the
demo. It is overlapping the previous row causing it to report height
incorrectly. A div with a space in it works though.
090ef20
Oct 06, 2012
Comment out vertical rhythm debugging lines a1af76c
Fix margin on progress bar so it doesn't throw of rhythm f3c84a3
Dec 01, 2012
Chris Nicola Merge tag 'v3.2.2' into vertical-rhythm
Version 3.2.2

Conflicts:
	scss/foundation/_settings.scss
	scss/foundation/common/_forms.scss
	scss/foundation/common/_typography.scss
	scss/foundation/components/_grid.scss
	scss/foundation/components/modules/_tabs.scss
	scss/foundation/components/modules/_topbar.scss
	scss/foundation/components/modules/_ui.scss
	test/forms.html
9af23de
Chris Nicola Fixes to forms vertical rhythm after merging 289adab
This page is out of date. Refresh to see the latest.
44  scss/foundation/_settings.scss
... ...
@@ -1,5 +1,23 @@
1 1
 // Settings file containing Foundation defaults
2 2
 
  3
+// Modular Scale Settings
  4
+
  5
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
  6
+$baseFontSize: 14px !default;
  7
+$baseLineHeight: 20px !default;
  8
+$importantModNum: 40px !default;
  9
+$base-size: $baseFontSize $importantModNum;
  10
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
  11
+// http://www.modularscale.com by Tim Brown
  12
+// https://github.com/scottkellum/modular-scale by scottkellum
  13
+
  14
+// Compass Vertical Rhythm Settings
  15
+
  16
+$relative-font-sizing: false; 
  17
+$round-to-nearest-half-line: false;
  18
+$base-font-size: $baseFontSize;
  19
+$base-line-height: $baseLineHeight;
  20
+
3 21
 // Grid Settings
4 22
 
5 23
 $rowWidth: 1000px !default;
@@ -50,7 +68,7 @@ $defaultOpposite: right !default; // Change this to 'left' for right-to-left lan
50 68
 // Button Settings
51 69
 
52 70
 $buttonRadius: 3px !default;
53  
-$btnBase: 10px !default;
  71
+$btnBase: $baseLineHeight / 2 !default;
54 72
 
55 73
 $tinyBtnBase: $btnBase - 5 !default;
56 74
 $smallBtnBase: $btnBase - 3 !default;
@@ -58,7 +76,7 @@ $largeBtnBase: $btnBase + 5 !default;
58 76
 
59 77
 // Form Settings
60 78
 
61  
-$formSpacing: 12px !default;
  79
+$formSpacing: $baseLineHeight / 2 !default;
62 80
 $labelFontWeight: 500 !default;
63 81
 $labelFontColor: lighten(#000, 30%) !default;
64 82
 $labelBtmMargin: 3px !default;
@@ -93,19 +111,19 @@ $custFormDisabledBgColor: #ddd !default;
93 111
 
94 112
 // Tab Settings
95 113
 
96  
-$tabHeight: 40px !default;
  114
+$tabHeight: $baseLineHeight * 2 !default;
97 115
 $tabTermFontSize: 12px;
98 116
 
99 117
 // Nav Bar Settings
100 118
 
101  
-$navBarHeight: 40px !default;
  119
+$navBarHeight: $baseLineHeight * 2 !default;
102 120
 $navFlyoutBaseWidth: 250px !default;
103 121
 
104 122
 // Top Bar Settings
105 123
 
106 124
 $topBarBgColor: #222 !default;
107  
-$topBarHeight: 45px !default;
108  
-$topBarHeightMobile: 45px !default;
  125
+$topBarHeight: $baseLineHeight * 2 !default;
  126
+$topBarHeightMobile: $baseLineHeight * 2 !default;
109 127
 $topBarBtmMargin: 30px !default;
110 128
 $topBarTitleWeight: bold !default;
111 129
 $topBarTitleSize: 17px !default;
@@ -124,11 +142,11 @@ $topBarNavToggleSize: 8px !default;
124 142
 // UI Settings
125 143
 
126 144
 $thumbRadius: 3px !default;
127  
-$progBarHeight: 25px !default;
  145
+$progBarHeight: $baseLineHeight !default;
128 146
 $progBarBorderColor: darken(#fff, 20%) !default;
129 147
 $progBarBorderSize: 1px !default;
130 148
 $progBarPad: 2px !default;
131  
-$linkListBottomMargin: 17px -22px !default;
  149
+$linkListBottomMargin: $baseLineHeight -$baseLineHeight !default;
132 150
 $tableBorderRadius: 3px !default;
133 151
 
134 152
 // Tooltip Settings
@@ -245,16 +263,6 @@ $tipScreenFill: rgba(0,0,0,0.5) !default;
245 263
 $mainWidth: 80% !default;
246 264
 $complementaryWidth: 20% !default;
247 265
 
248  
-// Modular Scale Settings
249  
-
250  
-// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
251  
-$baseFontSize: 14px !default;
252  
-$importantModNum: 44px !default;
253  
-$base-size: $baseFontSize $importantModNum;
254  
-// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
255  
-// http://www.modularscale.com by Tim Brown
256  
-// https://github.com/scottkellum/modular-scale by scottkellum
257  
-
258 266
 // Media Queries
259 267
 
260 268
 $screenSmall: 768px !default;
30  scss/foundation/common/_forms.scss
@@ -3,9 +3,9 @@
3 3
 
4 4
 /* Standard Forms ---------------------- */
5 5
 
6  
-  form { margin: 0 0 ($formSpacing * $ratio); }
  6
+  form { margin: 0 0 $baseLineHeight; }
7 7
 
8  
-  .row form .row { margin: 0 (-($formSpacing / 2));
  8
+  .row form .row { margin: 0 (-($formSpacing / 2)) 0;
9 9
 
10 10
     .column, .columns { padding: 0 ($formSpacing / 2); }
11 11
 
@@ -14,20 +14,20 @@
14 14
     }
15 15
   }
16 16
 
17  
-  label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;
  17
+  label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin; line-height: $baseLineHeight - $labelBtmMargin;
18 18
 
19 19
     &.right { float: none; text-align: right; }
20  
-    &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
  20
+    &.inline { line-height: $baseLineHeight; margin-bottom: 0px; }
21 21
   }
22 22
 
23  
-  .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
24  
-  a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
  23
+  .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: $formSpacing * 3; line-height: $formSpacing * 3 - 2; }
  24
+  a.button.prefix, a.button.postfix { padding: 0; line-height: $formSpacing * 3 - 2; text-align: center; }
25 25
   span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
26 26
 
27 27
   .prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
28 28
   .postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
29 29
 
30  
-  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
  30
+  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2) - 1; height: $formSpacing * 3; width: 100%; @include transition(all 0.15s linear);
31 31
 
32 32
     &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
33 33
 
@@ -35,12 +35,12 @@
35 35
     &[disabled] { background-color: #ddd; }
36 36
   }
37 37
 
38  
-  textarea { height: auto; }
  38
+  textarea { height: auto; line-height: $baseLineHeight; }
39 39
 
40 40
   select { width: 100%; }
41 41
 
42 42
   /* Fieldsets */
43  
-  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px 12px 0; margin: 18px 0;
  43
+  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: $formSpacing / 2 $formSpacing $formSpacing * 1.5 - 1; margin-bottom: $baseLineHeight;
44 44
 
45 45
     legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
46 46
   }
@@ -48,7 +48,7 @@
48 48
   /* Errors */
49 49
   .error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
50 50
   .error label, label.error { color: $alertColor; }
51  
-  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
  51
+  .error small, small.error { display: block; padding: $formSpacing / 4 $formSpacing / 2 - 1; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background-color: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
52 52
   .error textarea, textarea.error {
53 53
     &:focus { background: darken($white, 2%); border-color: darken($white, 30%); }
54 54
   }
@@ -56,20 +56,22 @@
56 56
 
57 57
   form.custom {
58 58
 
59  
-    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
  59
+    $radioRadius: $baseLineHeight - 6;
  60
+
  61
+    span.custom { display: inline-block; width: $radioRadius; height: $radioRadius; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
60 62
 
61 63
       &.radio { @include border-radius(100px); }
62 64
       &.checkbox {
63  
-        &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
  65
+        &:before { content: ""; display: block; line-height: 0.8; height: $radioRadius - 2; width: $radioRadius - 2; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: $radioRadius - 2; color: #fff; }
64 66
       }
65 67
       &.radio.checked {
66  
-        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
  68
+        &:before { content: ""; display: block; width: $radioRadius - 8; height: $radioRadius - 8; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
67 69
       }
68 70
       &.checkbox.checked {
69 71
         &:before { content: "\00d7"; color: $custCheckColor; }
70 72
       }
71 73
     }
72  
-    div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
  74
+    div.custom.dropdown { display: block; position: relative; width: auto; height: $baseLineHeight * 1.5; margin-bottom: $formSpacing;
73 75
 
74 76
       ul { overflow-y: auto; max-height: $custSelectDropHeight; }
75 77
       a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px $custSelectBorderColor; color: $custSelectCurrentFontColor; background-color: $custSelectBgColor; white-space: nowrap; }
54  scss/foundation/common/_typography.scss
... ...
@@ -1,5 +1,14 @@
1 1
   /* Base Type Styles Using Modular Scale ---------------------- */
2 2
 
  3
+  @import "compass/typography/vertical_rhythm";
  4
+
  5
+  @include establish-baseline;
  6
+
  7
+  /* Uncomment below to check vertical rhythm against a test background image */
  8
+  /*body { @include debug-vertical-alignment; }*/
  9
+
  10
+  body { line-height: $baseLineHeight; }
  11
+
3 12
   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td {
4 13
     margin:0;
5 14
     padding:0;
@@ -7,10 +16,11 @@
7 16
     direction: $textDirection;
8 17
   }
9 18
 
10  
-  p { font-family: inherit; font-weight: $bodyFontWeight; font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
11  
-    &.lead { font-size: ms(0) * 1.25; line-height: 1.6; margin-bottom: ms(1); }
  19
+  p { 
  20
+    font-family: inherit; font-weight: $bodyFontWeight; margin-bottom: $baseLineHeight;
  21
+    &.lead { font-size: ms(0) * 1.25; }
12 22
   }
13  
-  aside p { font-size: ms(0) - 1; line-height: 1.35; font-style: italic; }
  23
+  aside p { font-size: ms(0) - 1; font-style: italic; }
14 24
 
15 25
   h1, h2, h3, h4, h5, h6 {
16 26
     font-family: $headerFontFamily;
@@ -18,22 +28,22 @@
18 28
     font-style: $headerFontStyle;
19 29
     color: $headerFontColor;
20 30
     text-rendering: optimizeLegibility;
21  
-    line-height: 1.1;
22  
-    margin-bottom: ms(0);
23  
-    margin-top: ms(0);
24  
-    small { font-size: 60%; color: lighten($headerFontColor, 30%); line-height: 0; }
  31
+    margin-bottom: $baseLineHeight;
  32
+    small { font-size: 60%; line-height: 1; color: lighten($headerFontColor, 30%); }
25 33
   }
26 34
 
27  
-  h1 { font-size: ms(5); }
28  
-  h2 { font-size: ms(4); }
29  
-  h3 { font-size: ms(3); }
30  
-  h4 { font-size: ms(2); }
31  
-  h5 { font-size: ms(1); }
32  
-  h6 { font-size: ms(0); }
  35
+  h6, .xs   { @include adjust-font-size-to(ms(0)); }
  36
+  h5, .s    { @include adjust-font-size-to(ms(1)); }
  37
+  h4, .m    { @include adjust-font-size-to(ms(2)); }
  38
+  h3, .l    { @include adjust-font-size-to(ms(3)); }
  39
+  h2, .xl   { @include adjust-font-size-to(ms(4)); }
  40
+  h1, .xxl  { @include adjust-font-size-to(ms(5)); }
  41
+  .xxxl     { @include adjust-font-size-to(ms(6)); }
  42
+  .huge     { @include adjust-font-size-to(ms(7)); }
33 43
 
34  
-  hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }
  44
+  hr { border: solid #ddd; border-width: 1px 0 0; clear: both; height: $baseLineHeight; margin: $baseLineHeight 0 0 0; }
35 45
 
36  
-  .subheader { line-height: 1.3; color: lighten($headerFontColor, 30%); font-weight: 300; margin-bottom: ms(1); }
  46
+  .subheader { color: lighten($headerFontColor, 30%); font-weight: 300; }
37 47
 
38 48
   em, i { font-style: italic; line-height: inherit; }
39 49
   strong, b { font-weight: bold; line-height: inherit; }
@@ -41,12 +51,12 @@
41 51
   code { font-weight: bold; background: $highlightColor; }
42 52
 
43 53
   /* Lists ---------------------- */
44  
-  ul, ol, dl { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: outside; }
  54
+  ul, ol, dl { font-size: ms(0); margin-bottom: $baseLineHeight; list-style-position: outside; }
45 55
   ul {
46 56
     li {
47  
-      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
  57
+      ul, ol { margin-#{$defaultFloat}: $baseLineHeight; margin-bottom: 0; }
48 58
     }
49  
-    &.square, &.circle, &.disc { margin-#{$defaultFloat}: ms(1); }
  59
+    &.square, &.circle, &.disc { margin-#{$defaultFloat}: $baseLineHeight; }
50 60
     &.square { list-style-type: square;
51 61
       li ul { list-style: inherit; }
52 62
     }
@@ -57,17 +67,17 @@
57 67
       li ul { list-style: inherit; }
58 68
     }
59 69
     &.no-bullet { list-style: none; }
60  
-    &.large li { line-height: 21px; }
61 70
   }
62 71
   ol { margin-#{$defaultFloat}: 20px;
63 72
     li {
64  
-      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
  73
+      ul, ol { margin-#{$defaultFloat}: $baseLineHeight; margin-bottom: 0; }
65 74
     }
66 75
   }
67 76
 
68 77
   /* Blockquotes ---------------------- */
69  
-  blockquote, blockquote p { line-height: 1.5; color: lighten($headerFontColor, 30%); }
70  
-  blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-#{$defaultFloat}: 1px solid #ddd;
  78
+  blockquote, blockquote p { color: lighten($headerFontColor, 30%); }
  79
+
  80
+  blockquote { margin-bottom: $baseLineHeight; padding: $baseLineHeight / 2 $baseLineHeight; border-#{$defaultFloat}: 1px solid #ddd;
71 81
     cite { display: block; font-size: ms(0) - 1; color: lighten($headerFontColor, 20%);
72 82
       &:before { content: "\2014 \0020"; }
73 83
       a, a:visited { color: lighten($headerFontColor, 20%); }
6  scss/foundation/components/modules/_navbar.scss
@@ -32,7 +32,9 @@
32 32
 
33 33
     &.vertical { height: auto; margin-top: 0;
34 34
 
35  
-      &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(none);
  35
+      &>li:last-child { line-height: $navBarHeight - 2; }
  36
+
  37
+      &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(none); line-height: $navBarHeight - 1;
36 38
 
37 39
         &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), $defaultFloat); }
38 40
         .flyout { #{$defaultFloat}: 100%; top: -1px;
@@ -63,7 +65,7 @@
63 65
   ul.flyout, .nav-bar li ul { padding: 0; list-style: none;
64 66
 
65 67
     li { border-#{$defaultFloat}: solid 3px #CCC;
66  
-      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: (($navBarHeight / 2) - 5) ($navBarHeight / 2); @include box-shadow(0 1px 0 $shinyEdge inset);
  68
+      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: $navBarHeight - 1; padding: 0 ($navBarHeight / 2); @include box-shadow(0 1px 0 $shinyEdge inset);
67 69
         &:hover { background: darken($white, 8%); color: #333; }
68 70
       }
69 71
       &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
14  scss/foundation/components/modules/_tabs.scss
... ...
@@ -1,6 +1,6 @@
1 1
 /* Tabs ---------------------- */
2 2
 
3  
-  .tabs { list-style: none; border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: 20px;
  3
+  dl.tabs { list-style: none; border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: $baseLineHeight;
4 4
     &.contained { margin-bottom: 0; margin-left: 0; }
5 5
 
6 6
     dt, li.section-title { color: darken($white, 30%); cursor: default; display: block; float: $defaultFloat; font-size: $tabTermFontSize; height: $tabHeight; line-height: $tabHeight; padding: 0; padding-#{$defaultOpposite}: 9px; padding-#{$defaultFloat}: 20px; font-weight: normal; width: auto; text-transform: uppercase;
@@ -11,8 +11,8 @@
11 11
       a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4;
12 12
         &:focus { font-weight: bold; color: $mainColor; }
13 13
       }
14  
-      &.active { border-top: 3px solid $mainColor; margin-top: -3px;
15  
-        a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-#{$defaultFloat}: 1px solid darken($white, 10%); border-#{$defaultOpposite}: 1px solid darken($white, 10%); font-weight: bold; }
  14
+      &.active { border-top: 3px solid $mainColor;
  15
+        a { height: $tabHeight - 3; line-height: $tabHeight - 6; cursor: default; color: lighten($txtColor, 10%); background: #fff; border-#{$defaultFloat}: 1px solid darken($white, 10%); border-#{$defaultOpposite}: 1px solid darken($white, 10%); font-weight: bold; }
16 16
       }
17 17
       &:first-child { margin-#{$defaultFloat}: 0; }
18 18
     }
@@ -30,10 +30,10 @@
30 30
       }
31 31
     }
32 32
 
33  
-    &.pill { border-bottom: none; margin-bottom: 10px;
34  
-      dd, li { margin-#{$defaultOpposite}: 10px;
  33
+    &.pill { border-bottom: none; margin-bottom: $tabHeight / 8; margin-top: $tabHeight / 8; height: 3 * $tabHeight / 4;
  34
+      dd, li { margin-#{$defaultOpposite}: 10px; padding: 0 4px;
35 35
         &:last-child { margin-#{$defaultOpposite}: 0; }
36  
-        a { @include border-radius(1000px); background: darken($white, 10%); height: $tabHeight - 14; line-height: $tabHeight - 14; color: #666; }
  36
+        a { @include border-radius(1000px); background: darken($white, 10%); height: 3 * $tabHeight / 4; line-height: 3 * $tabHeight / 4; color: #666; }
37 37
 
38 38
         &.active { border: none; margin-top: 0;
39 39
           a { background-color: $mainColor; border: none; color: #fff; }
@@ -64,4 +64,4 @@
64 64
     }
65 65
   }
66 66
 
67  
-  .no-js ul.tabs-content>li { display: block; }
  67
+  .no-js ul.tabs-content>li { display: block; }
2  scss/foundation/components/modules/_topbar.scss
@@ -21,6 +21,8 @@
21 21
   /* Wrapped around .top-bar to make it fixed at the top */
22 22
   .fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
23 23
 
  24
+  body.has-fixed-topbar { padding-top: $topBarHeight; }
  25
+
24 26
   /* <nav> */
25 27
   .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
26 28
 
33  scss/foundation/components/modules/_ui.scss
@@ -24,7 +24,7 @@
24 24
 
25 25
   /* Alerts ---------------------- */
26 26
 
27  
-  div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius(3px); text-shadow: 0 -1px rgba(#000,.3); position: relative;
  27
+  div.alert-box { display: block; padding: $baseLineHeight / 4 - 1 $baseLineHeight / 2 $baseLineHeight / 4 - 1; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: $baseLineHeight / 2; @include border-radius(3px); text-shadow: 0 -1px rgba(#000,.3); position: relative;
28 28
 
29 29
     &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
30 30
     &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
@@ -38,7 +38,7 @@
38 38
 
39 39
   /* Labels ---------------------- */
40 40
 
41  
-  .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor;
  41
+  .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: $baseLineHeight - 3; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor;
42 42
 
43 43
     &.radius { @include border-radius($buttonRadius); }
44 44
     &.round { padding: 1px 7px 2px; @include border-radius(1000px); }
@@ -78,7 +78,7 @@
78 78
 
79 79
   /* Panels ---------------------- */
80 80
 
81  
-  .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px;
  81
+  .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 $baseLineHeight 0; padding: $baseLineHeight - 1;
82 82
 
83 83
     > :first-child { margin-top: 0; }
84 84
     > :last-child { margin-bottom: 0; }
@@ -97,22 +97,21 @@
97 97
 
98 98
   /* Accordion ---------------------- */
99 99
 
100  
-  ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;
  100
+  ul.accordion { margin: 0 0 $baseLineHeight - 1 0; border-bottom: 1px solid $secondaryColor;
101 101
 
102 102
     &>li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
103 103
 
104  
-      & > div.title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
  104
+      & > div.title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: $baseLineHeight / 2 - 1 $baseLineHeight / 2 $baseLineHeight / 2; margin: 0; position: relative;  border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
105 105
 
106 106
         h1, h2, h3, h4, h5 { margin: 0; }
107  
-        &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; }
  107
+        &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: $baseLineHeight / 2 + 4; }
108 108
       }
109 109
 
110  
-      .content { display: none; padding: 15px; }
  110
+      .content { display: none; padding: $baseLineHeight / 2 - 1 $baseLineHeight / 2  $baseLineHeight / 2; }
111 111
 
112 112
       &.active { border-top: 3px solid $mainColor;
113 113
 
114  
-        .title { background: $white; padding-top: 13px;
115  
-
  114
+        .title { background: $white; padding-top: $baseLineHeight / 2 - 3;
116 115
           &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); }
117 116
         }
118 117
         .content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; }
@@ -136,9 +135,9 @@
136 135
 
137 136
   /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
138 137
 
139  
-  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px;
  138
+  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: $baseLineHeight 0 $baseLineHeight / 2; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px;
140 139
 
141  
-    dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; }
  140
+    dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: $baseLineHeight / 2; }
142 141
     dt { color: #999; font-weight: $bodyFontWeight; }
143 142
     dd a { text-decoration: none; @include border-radius(1000px); }
144 143
     dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
@@ -147,11 +146,11 @@
147 146
 
148 147
   /* Pagination ---------------------- */
149 148
 
150  
-  ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px;
  149
+  ul.pagination { display: block; height: $baseLineHeight; margin-#{$defaultFloat}: -5px;
151 150
 
152  
-    li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
  151
+    li { float: $defaultFloat; display: block; height: $baseLineHeight; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
153 152
 
154  
-      a { display: block; padding: 1px 7px 1px; color: #555; }
  153
+      a { display: block; padding: 0 7px 0; color: #555; }
155 154
       &:hover a, a:focus { background: darken($white, 10%); }
156 155
       &.unavailable a { cursor: default; color: #999; }
157 156
       &.unavailable:hover a, &.unavailable a:focus { background: transparent; }
@@ -187,7 +186,7 @@
187 186
   /* Inline Link List */
188 187
   ul.inline-list, ul.link-list { margin: 0 0 $linkListBottomMargin; padding: 0; list-style: none; overflow: hidden;
189 188
 
190  
-    & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block;
  189
+    & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: $baseLineHeight; display: block;
191 190
 
192 191
       & > * { display: block; }
193 192
     }
@@ -195,7 +194,7 @@
195 194
 
196 195
   /* Keytroke Characters ---------------------- */
197 196
 
198  
-  .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }
  197
+  .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; line-height: 1; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }
199 198
 
200 199
   /* Image Thumbnails ---------------------- */
201 200
   .th { display: block;
@@ -258,7 +257,7 @@
258 257
 
259 258
   /* Progress Bar ---------------------- */
260 259
 
261  
-  div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
  260
+  div.progress { padding: $progBarPad; margin-bottom: $baseLineHeight; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
262 261
 
263 262
   	/* meter */
264 263
   	.meter { background: $mainColor; height: 100%; display: block; width:50%; }
4  test/forms.html
@@ -68,6 +68,7 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
68 68
               </div>
69 69
             </div>
70 70
             <textarea placeholder="Message"></textarea>
  71
+            <br>
71 72
           </form>
72 73
           <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of <code>.right</code> to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of <code>.inline</code> will have it vertically center against an input.</p>
73 74
 
@@ -315,7 +316,8 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
315 316
               </div>
316 317
             </div>
317 318
 
318  
-            <br />
  319
+            <div>&nbsp;</div>
  320
+
319 321
             <h5>Dropdown / Select Elements</h5>
320 322
 
321 323
             <label for="customDropdown">Dropdown Label</label>
8  test/grid.html
@@ -17,14 +17,16 @@
17 17
       background: #F4F4F4;
18 18
       margin-bottom: 10px;
19 19
     }
20  
-    .row.display .column, .row.display .columns, .block-grid li {
  20
+    .row.display .column, .row.display .columns, .block-grid li{
21 21
       background: #E7E7E7;
22 22
       border: 1px solid #DDD;
23 23
       font-size: 11px;
24 24
       text-indent: 3px;
25  
-      padding-top: 6px;
26  
-      padding-bottom: 6px;
  25
+      padding-top: 5px;
  26
+      padding-bottom: 5px;
27 27
     }
  28
+    .block-grid.five-up li,.block-grid.four-up li,  .block-grid.three-up li, .block-grid.two-up li, .block-grid.one-up li { padding-bottom: 10px; padding-top: 10px; }
  29
+
28 30
   </style>
29 31
   <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
30 32
 
1  test/navigation.html
@@ -187,7 +187,6 @@ <h4 class="subheader">Direct users around in style. There are navigation options
187 187
           <h4>Sub Nav</h4>
188 188
           <p>This simple subnav is great for moving between different states of a page.</p>
189 189
         </div>
190  
-        <br>
191 190
         <div class="eight columns">
192 191
           <dl class="sub-nav">
193 192
             <dt>Filter:</dt>
2  test/topbar.html
@@ -16,7 +16,7 @@
16 16
   <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
17 17
 
18 18
 </head>
19  
-<body>
  19
+<body class="has-fixed-topbar">
20 20
 
21 21
     <div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
22 22
       <nav class="top-bar">
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.