-
-
Notifications
You must be signed in to change notification settings - Fork 142
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Some opinionated moves based on using bitters a couple times #2
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
@import "normalize"; | ||
@import "bourbon"; | ||
@import "base/grid-settings"; | ||
@import "neat"; | ||
@import "base/base"; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,5 +3,4 @@ | |
@import "forms"; | ||
@import "tables"; | ||
@import "lists"; | ||
@import "layout"; | ||
@import "flashes"; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
$column: 90px; | ||
$gutter: 30px; | ||
$grid-columns: 12; | ||
$max-width: em(1088); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
body { | ||
color: $base-color; | ||
font-family: $base-font-family; | ||
font-size: $base-font-size; | ||
line-height: $base-line-height; | ||
} | ||
|
||
hgroup { | ||
margin-bottom: $base-line-height * .5; | ||
} | ||
|
||
h1, h2, h3, h4, h5, h6 { | ||
text-rendering: optimizeLegibility; // Fix the character spacing for headings | ||
} | ||
|
||
h1 { | ||
font-size: em(36); // = 36px | ||
line-height: em(44, 36); // 44px = $base-line-height @ 2x | ||
margin: .5em 0; // 22px = $base-line-height | ||
} | ||
|
||
h2 { | ||
font-size: em(32); // = 32px | ||
line-height: $base-line-height; // = 44px = $base-line-height @ 2x | ||
margin: .25em 0; // = 11px = 1/2 $base-line-height | ||
} | ||
|
||
h3 { | ||
font-size: em(28); // = 28px | ||
line-height: em(33, 28); // = 33px = $base-line-height * .75 | ||
margin: em(11, 28) 0 0; // = 11px = $base-line-height / 2 | ||
} | ||
|
||
h4 { | ||
font-size: em(24); // = 24px | ||
line-height: $base-line-height; // = 33px = $base-line-height * .75 | ||
margin: .5em 0 0; // = 11px = $base-line-height / 2 | ||
} | ||
|
||
h5, h6 { | ||
font-size: em(20); // = 20px | ||
line-height: $base-line-height; // = 22px | ||
margin: 0; | ||
} | ||
|
||
p { | ||
font-size: $base-font-size; | ||
font-weight: normal; | ||
margin: 0 0 ($base-line-height / 2); | ||
} | ||
|
||
a:link, a:visited { | ||
color: $base-link-color; | ||
text-decoration: none; | ||
@include transition; | ||
|
||
&:hover, &:active, &:focus { | ||
color: $base-hover-color; | ||
} | ||
|
||
&:visited { | ||
color: darken($base-hover-color, 15); | ||
} | ||
} | ||
|
||
hr { | ||
border-bottom: 1px solid $base-border-color; | ||
border-left: none; | ||
border-right: none; | ||
border-top: none; | ||
margin: $base-line-height 0; | ||
} | ||
|
||
img { | ||
margin: 0; | ||
max-width: 100%; | ||
} | ||
|
||
abbr, acronym { | ||
border-bottom: 1px dotted $base-border-color; | ||
cursor: help; | ||
} | ||
|
||
address { | ||
display: block; | ||
margin: 0 0 ($base-line-height * .5); | ||
} | ||
|
||
del { | ||
color: lighten($base-color, 15%); | ||
text-decoration: line-through; | ||
} | ||
|
||
blockquote { | ||
border-left: 2px solid $base-border-color; | ||
color: lighten($base-color, 15%); | ||
font-style: italic; | ||
margin: $base-line-height 0; | ||
padding-left: $base-line-height * .5; | ||
} | ||
|
||
cite { | ||
color: lighten($base-color, 25%); | ||
font-style: italic; | ||
|
||
&:before { | ||
content: '\2014 \00A0'; | ||
} | ||
} | ||
|
||
pre, code { | ||
line-height: $base-line-height; | ||
margin: ($base-line-height * .5) 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
// All global variables -- Any variable used in more than one file | ||
|
||
// Font Stack | ||
$sans-serif: $helvetica; | ||
$serif: $georgia; | ||
$base-font-family: $sans-serif; | ||
$header-font-family: $base-font-family; | ||
|
||
// Font Sizes | ||
$base-font-size: 1em; | ||
$base-line-height: em(22); | ||
|
||
// Colors | ||
$blue: #477DCA; | ||
$dark-gray: #333; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would like to have a medium gray variable by default. Hexidecimal is base 16, meaning there are 16 values from 0 through F. We currently provide two values for grays: $dark-gray: #333;
$light-gray: #DDD; Dark-gray is the 4th stop away from black. Light gray is the 3rd stop away from white. See the visual below:
To get equal gray values within the spectrum, sass calculated the following values: $dark-gray: lighten(#000, 25%) = #404040
$med-gray: lighten(#000, 50%) = #808080
$light-gray: lighten(#000, 75%) = #BFBFBF I think we should provide the 3 hex values I calculated above. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm fine with changing the shades of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I used the |
||
$light-gray: #DDD; | ||
$light-red: #FBE3E4; | ||
$light-yellow: #FFF6BF; | ||
$light-green: #E6EFC2; | ||
|
||
// Font Colors | ||
$base-color: $dark-gray; | ||
$base-accent: $blue; | ||
|
||
// Text Link Colors | ||
$base-link-color: $base-accent; | ||
$base-hover-color: darken($base-accent, 15); | ||
|
||
// Border color | ||
$base-border-color: $light-gray; | ||
|
||
// Flash Colors | ||
$error-color: $light-red; | ||
$notice-color: $light-yellow; | ||
$success-color: $light-green; |
This file was deleted.
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't like the removal of all these $form variables.