Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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.

Chris Nicola 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.

Chris Nicola added some commits
Chris Nicola 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
Chris Nicola Vertical rhythm for ui components c1d1fd2
Chris Nicola 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.

Chris Nicola added some commits
Chris Nicola 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
Chris Nicola Set $topBarHeight to $baseLineHeight * 2 c8ed0ce
Chris Nicola Fix line-height setting on all elements b61cae0
Chris Nicola Adds class to add some body padding when using a fixed topbar b0ce381
Chris Nicola Adjust navigation elements for vertical rhythm 2efd403
Chris Nicola Vertical rhythm setup for tabs e7ac63f
Chris Nicola 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.

Chris Nicola added some commits
Chris Nicola 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
Chris Nicola Fixes prefix and postfix style buttons. a606c1d
Chris Nicola 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
Chris Nicola Comment out vertical rhythm debugging lines a1af76c
Chris Nicola 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 chrisnicola 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
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
Commits on Sep 27, 2012
  1. Setting up a vertical rhythm for typography with compass

    Chris Nicola authored
    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.
Commits on Sep 29, 2012
  1. Adjust a few more margins to complete the vertical ryhthm

    Chris Nicola authored
    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.
Commits on Sep 30, 2012
  1. Vertical rhythm for ui components

    Chris Nicola authored
  2. Adjust horizontal rule VR to compenstate for 1px border

    Chris Nicola authored
Commits on Oct 5, 2012
  1. Setup VR for form elements adjust buttons slightly

    Chris Nicola authored
    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.
  2. Set $topBarHeight to $baseLineHeight * 2

    Chris Nicola authored
  3. Fix line-height setting on all elements

    Chris Nicola authored
  4. Adjust navigation elements for vertical rhythm

    Chris Nicola authored
  5. Vertical rhythm setup for tabs

    Chris Nicola authored
  6. Tweaking typography to absolute pixel perfection

    Chris Nicola authored
  7. Adjust grid typography and adjust grid demo for borders

    Chris Nicola authored
    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.
  8. Fixes prefix and postfix style buttons.

    Chris Nicola authored
  9. Fixing up VR for form elements specifically fieldsets and custom

    Chris Nicola authored
    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.
Commits on Oct 6, 2012
  1. Comment out vertical rhythm debugging lines

    Chris Nicola authored
Commits on Dec 1, 2012
  1. Chris Nicola

    Merge tag 'v3.2.2' into vertical-rhythm

    chrisnicola authored
    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
Commits on Dec 2, 2012
  1. Chris Nicola
This page is out of date. Refresh to see the latest.
44 scss/foundation/_settings.scss
View
@@ -1,5 +1,23 @@
// Settings file containing Foundation defaults
+// Modular Scale Settings
+
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
+$baseFontSize: 14px !default;
+$baseLineHeight: 20px !default;
+$importantModNum: 40px !default;
+$base-size: $baseFontSize $importantModNum;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum
+
+// Compass Vertical Rhythm Settings
+
+$relative-font-sizing: false;
+$round-to-nearest-half-line: false;
+$base-font-size: $baseFontSize;
+$base-line-height: $baseLineHeight;
+
// Grid Settings
$rowWidth: 1000px !default;
@@ -50,7 +68,7 @@ $defaultOpposite: right !default; // Change this to 'left' for right-to-left lan
// Button Settings
$buttonRadius: 3px !default;
-$btnBase: 10px !default;
+$btnBase: $baseLineHeight / 2 !default;
$tinyBtnBase: $btnBase - 5 !default;
$smallBtnBase: $btnBase - 3 !default;
@@ -58,7 +76,7 @@ $largeBtnBase: $btnBase + 5 !default;
// Form Settings
-$formSpacing: 12px !default;
+$formSpacing: $baseLineHeight / 2 !default;
$labelFontWeight: 500 !default;
$labelFontColor: lighten(#000, 30%) !default;
$labelBtmMargin: 3px !default;
@@ -93,19 +111,19 @@ $custFormDisabledBgColor: #ddd !default;
// Tab Settings
-$tabHeight: 40px !default;
+$tabHeight: $baseLineHeight * 2 !default;
$tabTermFontSize: 12px;
// Nav Bar Settings
-$navBarHeight: 40px !default;
+$navBarHeight: $baseLineHeight * 2 !default;
$navFlyoutBaseWidth: 250px !default;
// Top Bar Settings
$topBarBgColor: #222 !default;
-$topBarHeight: 45px !default;
-$topBarHeightMobile: 45px !default;
+$topBarHeight: $baseLineHeight * 2 !default;
+$topBarHeightMobile: $baseLineHeight * 2 !default;
$topBarBtmMargin: 30px !default;
$topBarTitleWeight: bold !default;
$topBarTitleSize: 17px !default;
@@ -124,11 +142,11 @@ $topBarNavToggleSize: 8px !default;
// UI Settings
$thumbRadius: 3px !default;
-$progBarHeight: 25px !default;
+$progBarHeight: $baseLineHeight !default;
$progBarBorderColor: darken(#fff, 20%) !default;
$progBarBorderSize: 1px !default;
$progBarPad: 2px !default;
-$linkListBottomMargin: 17px -22px !default;
+$linkListBottomMargin: $baseLineHeight -$baseLineHeight !default;
$tableBorderRadius: 3px !default;
// Tooltip Settings
@@ -245,16 +263,6 @@ $tipScreenFill: rgba(0,0,0,0.5) !default;
$mainWidth: 80% !default;
$complementaryWidth: 20% !default;
-// Modular Scale Settings
-
-// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
-$baseFontSize: 14px !default;
-$importantModNum: 44px !default;
-$base-size: $baseFontSize $importantModNum;
-// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
-// http://www.modularscale.com by Tim Brown
-// https://github.com/scottkellum/modular-scale by scottkellum
-
// Media Queries
$screenSmall: 768px !default;
30 scss/foundation/common/_forms.scss
View
@@ -3,9 +3,9 @@
/* Standard Forms ---------------------- */
- form { margin: 0 0 ($formSpacing * $ratio); }
+ form { margin: 0 0 $baseLineHeight; }
- .row form .row { margin: 0 (-($formSpacing / 2));
+ .row form .row { margin: 0 (-($formSpacing / 2)) 0;
.column, .columns { padding: 0 ($formSpacing / 2); }
@@ -14,20 +14,20 @@
}
}
- label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;
+ label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin; line-height: $baseLineHeight - $labelBtmMargin;
&.right { float: none; text-align: right; }
- &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
+ &.inline { line-height: $baseLineHeight; margin-bottom: 0px; }
}
- .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; }
- a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
+ .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; }
+ a.button.prefix, a.button.postfix { padding: 0; line-height: $formSpacing * 3 - 2; text-align: center; }
span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
.prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
.postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
- 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);
+ 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);
&.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
@@ -35,12 +35,12 @@
&[disabled] { background-color: #ddd; }
}
- textarea { height: auto; }
+ textarea { height: auto; line-height: $baseLineHeight; }
select { width: 100%; }
/* Fieldsets */
- fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px 12px 0; margin: 18px 0;
+ fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: $formSpacing / 2 $formSpacing $formSpacing * 1.5 - 1; margin-bottom: $baseLineHeight;
legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
}
@@ -48,7 +48,7 @@
/* Errors */
.error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
.error label, label.error { color: $alertColor; }
- .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); }
+ .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); }
.error textarea, textarea.error {
&:focus { background: darken($white, 2%); border-color: darken($white, 30%); }
}
@@ -56,20 +56,22 @@
form.custom {
- span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
+ $radioRadius: $baseLineHeight - 6;
+
+ span.custom { display: inline-block; width: $radioRadius; height: $radioRadius; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
&.radio { @include border-radius(100px); }
&.checkbox {
- &: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; }
+ &: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; }
}
&.radio.checked {
- &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
+ &:before { content: ""; display: block; width: $radioRadius - 8; height: $radioRadius - 8; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
}
&.checkbox.checked {
&:before { content: "\00d7"; color: $custCheckColor; }
}
}
- div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
+ div.custom.dropdown { display: block; position: relative; width: auto; height: $baseLineHeight * 1.5; margin-bottom: $formSpacing;
ul { overflow-y: auto; max-height: $custSelectDropHeight; }
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
View
@@ -1,5 +1,14 @@
/* Base Type Styles Using Modular Scale ---------------------- */
+ @import "compass/typography/vertical_rhythm";
+
+ @include establish-baseline;
+
+ /* Uncomment below to check vertical rhythm against a test background image */
+ /*body { @include debug-vertical-alignment; }*/
+
+ body { line-height: $baseLineHeight; }
+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td {
margin:0;
padding:0;
@@ -7,10 +16,11 @@
direction: $textDirection;
}
- p { font-family: inherit; font-weight: $bodyFontWeight; font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
- &.lead { font-size: ms(0) * 1.25; line-height: 1.6; margin-bottom: ms(1); }
+ p {
+ font-family: inherit; font-weight: $bodyFontWeight; margin-bottom: $baseLineHeight;
+ &.lead { font-size: ms(0) * 1.25; }
}
- aside p { font-size: ms(0) - 1; line-height: 1.35; font-style: italic; }
+ aside p { font-size: ms(0) - 1; font-style: italic; }
h1, h2, h3, h4, h5, h6 {
font-family: $headerFontFamily;
@@ -18,22 +28,22 @@
font-style: $headerFontStyle;
color: $headerFontColor;
text-rendering: optimizeLegibility;
- line-height: 1.1;
- margin-bottom: ms(0);
- margin-top: ms(0);
- small { font-size: 60%; color: lighten($headerFontColor, 30%); line-height: 0; }
+ margin-bottom: $baseLineHeight;
+ small { font-size: 60%; line-height: 1; color: lighten($headerFontColor, 30%); }
}
- h1 { font-size: ms(5); }
- h2 { font-size: ms(4); }
- h3 { font-size: ms(3); }
- h4 { font-size: ms(2); }
- h5 { font-size: ms(1); }
- h6 { font-size: ms(0); }
+ h6, .xs { @include adjust-font-size-to(ms(0)); }
+ h5, .s { @include adjust-font-size-to(ms(1)); }
+ h4, .m { @include adjust-font-size-to(ms(2)); }
+ h3, .l { @include adjust-font-size-to(ms(3)); }
+ h2, .xl { @include adjust-font-size-to(ms(4)); }
+ h1, .xxl { @include adjust-font-size-to(ms(5)); }
+ .xxxl { @include adjust-font-size-to(ms(6)); }
+ .huge { @include adjust-font-size-to(ms(7)); }
- hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }
+ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; height: $baseLineHeight; margin: $baseLineHeight 0 0 0; }
- .subheader { line-height: 1.3; color: lighten($headerFontColor, 30%); font-weight: 300; margin-bottom: ms(1); }
+ .subheader { color: lighten($headerFontColor, 30%); font-weight: 300; }
em, i { font-style: italic; line-height: inherit; }
strong, b { font-weight: bold; line-height: inherit; }
@@ -41,12 +51,12 @@
code { font-weight: bold; background: $highlightColor; }
/* Lists ---------------------- */
- ul, ol, dl { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: outside; }
+ ul, ol, dl { font-size: ms(0); margin-bottom: $baseLineHeight; list-style-position: outside; }
ul {
li {
- ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
+ ul, ol { margin-#{$defaultFloat}: $baseLineHeight; margin-bottom: 0; }
}
- &.square, &.circle, &.disc { margin-#{$defaultFloat}: ms(1); }
+ &.square, &.circle, &.disc { margin-#{$defaultFloat}: $baseLineHeight; }
&.square { list-style-type: square;
li ul { list-style: inherit; }
}
@@ -57,17 +67,17 @@
li ul { list-style: inherit; }
}
&.no-bullet { list-style: none; }
- &.large li { line-height: 21px; }
}
ol { margin-#{$defaultFloat}: 20px;
li {
- ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
+ ul, ol { margin-#{$defaultFloat}: $baseLineHeight; margin-bottom: 0; }
}
}
/* Blockquotes ---------------------- */
- blockquote, blockquote p { line-height: 1.5; color: lighten($headerFontColor, 30%); }
- blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-#{$defaultFloat}: 1px solid #ddd;
+ blockquote, blockquote p { color: lighten($headerFontColor, 30%); }
+
+ blockquote { margin-bottom: $baseLineHeight; padding: $baseLineHeight / 2 $baseLineHeight; border-#{$defaultFloat}: 1px solid #ddd;
cite { display: block; font-size: ms(0) - 1; color: lighten($headerFontColor, 20%);
&:before { content: "\2014 \0020"; }
a, a:visited { color: lighten($headerFontColor, 20%); }
6 scss/foundation/components/modules/_navbar.scss
View
@@ -32,7 +32,9 @@
&.vertical { height: auto; margin-top: 0;
- &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(none);
+ &>li:last-child { line-height: $navBarHeight - 2; }
+
+ &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(none); line-height: $navBarHeight - 1;
&.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), $defaultFloat); }
.flyout { #{$defaultFloat}: 100%; top: -1px;
@@ -63,7 +65,7 @@
ul.flyout, .nav-bar li ul { padding: 0; list-style: none;
li { border-#{$defaultFloat}: solid 3px #CCC;
- 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);
+ 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);
&:hover { background: darken($white, 8%); color: #333; }
}
&.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
View
@@ -1,6 +1,6 @@
/* Tabs ---------------------- */
- .tabs { list-style: none; border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: 20px;
+ dl.tabs { list-style: none; border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: $baseLineHeight;
&.contained { margin-bottom: 0; margin-left: 0; }
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 @@
a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4;
&:focus { font-weight: bold; color: $mainColor; }
}
- &.active { border-top: 3px solid $mainColor; margin-top: -3px;
- 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; }
+ &.active { border-top: 3px solid $mainColor;
+ 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; }
}
&:first-child { margin-#{$defaultFloat}: 0; }
}
@@ -30,10 +30,10 @@
}
}
- &.pill { border-bottom: none; margin-bottom: 10px;
- dd, li { margin-#{$defaultOpposite}: 10px;
+ &.pill { border-bottom: none; margin-bottom: $tabHeight / 8; margin-top: $tabHeight / 8; height: 3 * $tabHeight / 4;
+ dd, li { margin-#{$defaultOpposite}: 10px; padding: 0 4px;
&:last-child { margin-#{$defaultOpposite}: 0; }
- a { @include border-radius(1000px); background: darken($white, 10%); height: $tabHeight - 14; line-height: $tabHeight - 14; color: #666; }
+ a { @include border-radius(1000px); background: darken($white, 10%); height: 3 * $tabHeight / 4; line-height: 3 * $tabHeight / 4; color: #666; }
&.active { border: none; margin-top: 0;
a { background-color: $mainColor; border: none; color: #fff; }
@@ -64,4 +64,4 @@
}
}
- .no-js ul.tabs-content>li { display: block; }
+ .no-js ul.tabs-content>li { display: block; }
2  scss/foundation/components/modules/_topbar.scss
View
@@ -21,6 +21,8 @@
/* Wrapped around .top-bar to make it fixed at the top */
.fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
+ body.has-fixed-topbar { padding-top: $topBarHeight; }
+
/* <nav> */
.top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
33 scss/foundation/components/modules/_ui.scss
View
@@ -24,7 +24,7 @@
/* Alerts ---------------------- */
- 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;
+ 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;
&.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
&.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
@@ -38,7 +38,7 @@
/* Labels ---------------------- */
- .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;
+ .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;
&.radius { @include border-radius($buttonRadius); }
&.round { padding: 1px 7px 2px; @include border-radius(1000px); }
@@ -78,7 +78,7 @@
/* Panels ---------------------- */
- .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px;
+ .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 $baseLineHeight 0; padding: $baseLineHeight - 1;
> :first-child { margin-top: 0; }
> :last-child { margin-bottom: 0; }
@@ -97,22 +97,21 @@
/* Accordion ---------------------- */
- ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;
+ ul.accordion { margin: 0 0 $baseLineHeight - 1 0; border-bottom: 1px solid $secondaryColor;
&>li { list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
- & > 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);
+ & > 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);
h1, h2, h3, h4, h5 { margin: 0; }
- &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; }
+ &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: $baseLineHeight / 2 + 4; }
}
- .content { display: none; padding: 15px; }
+ .content { display: none; padding: $baseLineHeight / 2 - 1 $baseLineHeight / 2 $baseLineHeight / 2; }
&.active { border-top: 3px solid $mainColor;
- .title { background: $white; padding-top: 13px;
-
+ .title { background: $white; padding-top: $baseLineHeight / 2 - 3;
&:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); }
}
.content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; }
@@ -136,9 +135,9 @@
/* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
- dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px;
+ dl.sub-nav { display: block; width: auto; overflow: hidden; margin: $baseLineHeight 0 $baseLineHeight / 2; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px;
- dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; }
+ dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: $baseLineHeight / 2; }
dt { color: #999; font-weight: $bodyFontWeight; }
dd a { text-decoration: none; @include border-radius(1000px); }
dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
@@ -147,11 +146,11 @@
/* Pagination ---------------------- */
- ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px;
+ ul.pagination { display: block; height: $baseLineHeight; margin-#{$defaultFloat}: -5px;
- li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
+ li { float: $defaultFloat; display: block; height: $baseLineHeight; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
- a { display: block; padding: 1px 7px 1px; color: #555; }
+ a { display: block; padding: 0 7px 0; color: #555; }
&:hover a, a:focus { background: darken($white, 10%); }
&.unavailable a { cursor: default; color: #999; }
&.unavailable:hover a, &.unavailable a:focus { background: transparent; }
@@ -187,7 +186,7 @@
/* Inline Link List */
ul.inline-list, ul.link-list { margin: 0 0 $linkListBottomMargin; padding: 0; list-style: none; overflow: hidden;
- & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block;
+ & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: $baseLineHeight; display: block;
& > * { display: block; }
}
@@ -195,7 +194,7 @@
/* Keytroke Characters ---------------------- */
- .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); }
+ .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); }
/* Image Thumbnails ---------------------- */
.th { display: block;
@@ -258,7 +257,7 @@
/* Progress Bar ---------------------- */
- div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
+ div.progress { padding: $progBarPad; margin-bottom: $baseLineHeight; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
/* meter */
.meter { background: $mainColor; height: 100%; display: block; width:50%; }
4 test/forms.html
View
@@ -68,6 +68,7 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
</div>
</div>
<textarea placeholder="Message"></textarea>
+ <br>
</form>
<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>
@@ -315,7 +316,8 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
</div>
</div>
- <br />
+ <div>&nbsp;</div>
+
<h5>Dropdown / Select Elements</h5>
<label for="customDropdown">Dropdown Label</label>
8 test/grid.html
View
@@ -17,14 +17,16 @@
background: #F4F4F4;
margin-bottom: 10px;
}
- .row.display .column, .row.display .columns, .block-grid li {
+ .row.display .column, .row.display .columns, .block-grid li{
background: #E7E7E7;
border: 1px solid #DDD;
font-size: 11px;
text-indent: 3px;
- padding-top: 6px;
- padding-bottom: 6px;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
+ .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; }
+
</style>
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
1  test/navigation.html
View
@@ -187,7 +187,6 @@ <h4 class="subheader">Direct users around in style. There are navigation options
<h4>Sub Nav</h4>
<p>This simple subnav is great for moving between different states of a page.</p>
</div>
- <br>
<div class="eight columns">
<dl class="sub-nav">
<dt>Filter:</dt>
2  test/topbar.html
View
@@ -16,7 +16,7 @@
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
</head>
-<body>
+<body class="has-fixed-topbar">
<div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
<nav class="top-bar">
Something went wrong with that request. Please try again.