Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Some opinionated moves based on using bitters a couple times #2

Closed
wants to merge 3 commits into from

3 participants

Kyle Fiedler Phil LaPier Reda Lemeden
Kyle Fiedler
Admin

No description provided.

base/_variables.scss
((8 lines not shown))
+
+// Font Sizes
+$base-font-size: 1em;
+$base-line-height: em(22);
+
+// Colors
+$blue: #477DCA;
+$dark-gray: #333;
+$light-gray: #DDD;
+$light-red: #FBE3E4;
+$light-yellow: #FFF6BF;
+$light-green: #E6EFC2;
+
+// Font Colors
+$base-color: $dark-gray;
+$base-highlight: $blue;
Phil LaPier
plapier added a note

Is there a better, more descriptive name than "highlight"?
Highlight makes me think of the color when highlighting/selecting text.

Kyle Fiedler Admin

Would accent be better?

Phil LaPier
plapier added a note

I think so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reda Lemeden kaishin commented on the diff
base/_flashes.scss
@@ -1,9 +1,3 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Flash Styles for Rails Projects
-//
-///////////////////////////////////////////////////////////////////////////////
-
Reda Lemeden Admin
kaishin added a note

:+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Phil LaPier plapier commented on the diff
base/_variables.scss
@@ -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;
Phil LaPier
plapier added a note

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:

0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F
# - # - # - ^ - # - # - # - # - # - # - # - # - # - ^ - # - #

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.

The values are actually pretty close to the existing ones:
Screen Shot 2013-03-22 at 3 37 14 PM 1

Kyle Fiedler Admin

I'm fine with changing the shades of $light-gray and $dark-gray but I don't see a reason for us to start to add in colors that we don't need. I've replaced these colors with app or site specific ones on almost every project I've done.

Phil LaPier
plapier added a note

I used the light and dark variables in groupize but felt it was missing a medium gray value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
layout/_header.scss
@@ -0,0 +1,3 @@
+header.main {
Phil LaPier
plapier added a note

I don't think this empty file is needed.

Kyle Fiedler Admin

I create these 3 layout files on every single design I do. Having them here saves me that one step and I can see them having more in them in the future.

Phil LaPier
plapier added a note

But I dont use them. Having to delete them is not something I want to do.

Reda Lemeden Admin
kaishin added a note

I don't us them either. Or at least if I do, not in this particular hierarchy...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
layout/_footer.scss
@@ -0,0 +1,3 @@
+footer.main {
Phil LaPier
plapier added a note

I don't think this empty file is needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
layout/_body.scss
@@ -0,0 +1,4 @@
+body {
Phil LaPier
plapier added a note

I don't think this empty file is needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
base/_typography.scss
((8 lines not shown))
}
h2 {
font-size: em(32);
- line-height: $base-line-height * 1.75;
- margin: ($base-line-height * .75) 0;
+ line-height: em(44, 32);
Reda Lemeden Admin
kaishin added a note

Not sure why these values and what they stand for. Maybe store them in variables?

Phil LaPier
plapier added a note

I agree. I find this stuff more confusing than it needs to be. it's not quite obvious whats happening here without digging deeper into the em function.

Kyle Fiedler Admin

For some of these using the $base-line-height variable would throw off a semi baseline grid that I have. Here Its would be 2x.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Phil LaPier plapier commented on the diff
base/_forms.scss
@@ -1,21 +1,6 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Form Styles
-//
-///////////////////////////////////////////////////////////////////////////////
-
-$form-border-color: $base-border-color;
-$form-border-color-hover: darken($base-border-color, 10%);
-$form-border-color-focus: $blue; //blue default
-$form-border-radius: 3px;
-$form-box-shadow-focus: darken($form-border-color-focus, 5%);
-$form-font-size: $base-font-size;
-$form-font-family: $lucida-grande;
Phil LaPier
plapier added a note

I don't like the removal of all these $form variables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Kyle Fiedler kylefiedler closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 22, 2013
Commits on May 3, 2013
  1. Kyle Fiedler
Commits on Jul 12, 2013
  1. Kyle Fiedler

    Removed example

    kylefiedler authored
This page is out of date. Refresh to see the latest.
5 application.scss
View
@@ -0,0 +1,5 @@
+@import "normalize";
+@import "bourbon";
+@import "base/grid-settings";
+@import "neat";
+@import "base/base";
1  bitters/_base.scss → base/_base.scss
View
@@ -3,5 +3,4 @@
@import "forms";
@import "tables";
@import "lists";
-@import "layout";
@import "flashes";
6 bitters/_flashes.scss → base/_flashes.scss
View
@@ -1,9 +1,3 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Flash Styles for Rails Projects
-//
-///////////////////////////////////////////////////////////////////////////////
-
Reda Lemeden Admin
kaishin added a note

:+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
/* Success, error & notice boxes for messages and errors. */
div.error, div.notice, div.success, #flash_failure, #flash_success, #flash_notice {
margin-bottom: .75em;
50 bitters/_forms.scss → base/_forms.scss
View
@@ -1,21 +1,6 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Form Styles
-//
-///////////////////////////////////////////////////////////////////////////////
-
-$form-border-color: $base-border-color;
-$form-border-color-hover: darken($base-border-color, 10%);
-$form-border-color-focus: $blue; //blue default
-$form-border-radius: 3px;
-$form-box-shadow-focus: darken($form-border-color-focus, 5%);
-$form-font-size: $base-font-size;
-$form-font-family: $lucida-grande;
Phil LaPier
plapier added a note

I don't like the removal of all these $form variables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
-$form-width: em(300);
-
fieldset {
- background: #f1f1f1;
- border: 1px solid lighten($base-border-color, 20%);
+ background: lighten($base-border-color, 10);
+ border: 1px solid $base-border-color;
margin: 0 0 $base-line-height 0;
padding: $base-line-height $base-line-height ($base-line-height * .75) $base-line-height;
}
@@ -24,8 +9,8 @@ input,
label,
select {
display: block;
- font-family: $form-font-family;
- font-size: $form-font-size;
+ font-family: $base-font-family;
+ font-size: $base-font-size;
}
label {
@@ -44,24 +29,23 @@ label {
textarea,
#{$all-text-inputs} {
background-color: white;
- border: 1px solid $form-border-color;
- border-radius: $form-border-radius;
+ border: 1px solid $base-border-color;
box-shadow: inset 0px 1px 3px hsla(0, 0%, 0%, 0.06);
@include box-sizing(border-box);
- font-family: $form-font-family;
- font-size: $form-font-size;
+ font-family: $base-font-family;
+ font-size: $base-font-size;
margin-bottom: $base-line-height * .5;
padding: ($base-line-height * .5) ($base-line-height * .5);
@include transition(border-color);
- width: $form-width;
+ width: 100%;
&:hover {
- border-color: $form-border-color-hover;
+ border-color: darken($base-border-color, 10%);
}
&:focus {
- border-color: $form-border-color-focus;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 5px rgba($form-box-shadow-focus, 0.7);
+ border-color: $base-accent;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 5px rgba(darken($base-accent, 5%), 0.7);
outline: none;
}
}
@@ -86,17 +70,13 @@ input[type="checkbox"], input[type="radio"] {
}
select {
- width: $form-width;
+ width: 100%;
margin-bottom: $base-line-height * 1.5;
}
button,
input[type="submit"] {
- @include button(simple, #fafafa);
-
- // Button Overrides
- border-color: #BBB;
- box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.06);
- font-size: $form-font-size;
- padding: 0.7em 1.9em;
+ @include button(simple, $base-accent);
+ font-size: 1em;
+ -webkit-font-smoothing: antialiased;
}
4 base/_grid-settings.scss
View
@@ -0,0 +1,4 @@
+$column: 90px;
+$gutter: 30px;
+$grid-columns: 12;
+$max-width: em(1088);
6 bitters/_lists.scss → base/_lists.scss
View
@@ -1,9 +1,3 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base List Styles
-//
-///////////////////////////////////////////////////////////////////////////////
-
ul, ol {
list-style-position: outside;
margin-bottom: $base-line-height * .5;
8 bitters/_tables.scss → base/_tables.scss
View
@@ -1,9 +1,3 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Table Styles
-//
-///////////////////////////////////////////////////////////////////////////////
-
table {
margin: ($base-line-height * .5) 0;
width: 100%;
@@ -23,7 +17,7 @@ td {
}
caption, th, td {
- padding: $base-line-height * .5;
+ padding: ($base-line-height * .5) ($base-line-height * .5) ($base-line-height * .5) 0;
}
caption {
114 base/_typography.scss
View
@@ -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;
+}
35 base/_variables.scss
View
@@ -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;
Phil LaPier
plapier added a note

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:

0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F
# - # - # - ^ - # - # - # - # - # - # - # - # - # - ^ - # - #

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.

The values are actually pretty close to the existing ones:
Screen Shot 2013-03-22 at 3 37 14 PM 1

Kyle Fiedler Admin

I'm fine with changing the shades of $light-gray and $dark-gray but I don't see a reason for us to start to add in colors that we don't need. I've replaced these colors with app or site specific ones on almost every project I've done.

Phil LaPier
plapier added a note

I used the light and dark variables in groupize but felt it was missing a medium gray value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+$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;
12 bitters/_grid_settings.scss
View
@@ -1,12 +0,0 @@
-@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
-
-// Change the grid settings
-$column: 90px;
-$gutter: 30px;
-$grid-columns: 12;
-$max-width: em(1088);
-
-// Define your breakpoints
-$mobile: new-breakpoint(max-width 480px 4);
-$tablet: new-breakpoint(max-width 768px 8);
-$desktop: new-breakpoint(min-width 769px 12);
10 bitters/_layout.scss
View
@@ -1,10 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Basic Application Layout
-//
-///////////////////////////////////////////////////////////////////////////////
-
-html {
- body {
- }
-}
143 bitters/_typography.scss
View
@@ -1,143 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Base Typographic Styles
-//
-///////////////////////////////////////////////////////////////////////////////
-
-// Font Stack
-$sans-serif: $helvetica;
-$serif: $georgia;
-
-$base-font-family: $sans-serif;
-$header-font-family: $base-font-family;
-
-// Font Sizes
-$base-font-size: 1rem; // this isn't supported in IE8
-$base-line-height: $base-font-size * 1.375;
-
-body {
- font-family: $base-font-family;
- font-size: $base-font-size;
- line-height: $base-line-height;
- color: $base-font-color;
- -webkit-font-smoothing: antialiased;
-}
-
-h1, h2, h3, h4, h5, h6 {
- font-weight: 600;
- text-rendering: optimizelegibility; // Fix the character spacing for headings
-}
-
-h1 {
- font-size: em(44);
- line-height: $base-line-height * 2;
- margin: $base-line-height 0;
-}
-
-h2 {
- font-size: em(32);
- line-height: $base-line-height * 1.75;
- margin: ($base-line-height * .75) 0;
-}
-
-h3 {
- font-size: em(28);
- line-height: $base-line-height * 1.5;
- margin: ($base-line-height * .5) 0;
-}
-
-h4 {
- font-size: em(24);
- line-height: $base-line-height * 1.25;
- margin: ($base-line-height * .25) 0;
-}
-
-h5 {
- font-size: em(20);
- line-height: $base-line-height;
- margin: 0;
-}
-
-h6 {
- font-size: $base-font-size;
- line-height: lh();
- margin: 0;
-}
-
-p {
- font-size: $base-font-size;
- font-weight: 400;
- margin: 0 0 ($base-line-height * .5);
-}
-
-a:link, a:visited {
- color: $base-link-color;
- text-decoration: underline;
- @include transition(color, 0.1s linear);
-
- &:hover {
- color: $hover-link-color;
- }
-
- &:active, &:focus {
- color: $hover-link-color;
- }
-}
-
-hr {
- border-top: none;
- border-right: none;
- border-left: none;
- margin: $base-line-height 0;
- border-bottom: 1px solid $base-border-color;
-}
-
-img {
- margin: 0;
-}
-
-abbr, acronym {
- border-bottom: 1px dotted $base-border-color;
- cursor: help;
-}
-
-address {
- display: block;
- margin: 0 0 ($base-line-height * .5);
-}
-
-hgroup {
- margin-bottom: $base-line-height * .5;
-}
-
-del {
- color: lighten($base-font-color, 15%);
-}
-
-blockquote {
- border-left: 2px solid $base-border-color;
- color: lighten($base-font-color, 15%);
- font-style: italic;
- margin: $base-line-height 0;
- padding-left: $base-line-height * .5;
-}
-
-cite {
- font-style: italic;
- font-size: smaller;
- color: lighten($base-font-color, 25%);
-
- &:before {
- content: '\2014 \00A0';
- }
-}
-
-strong {
- font-weight: bolder;
-}
-
-pre, code {
- font-family: 'andale mono', 'monotype.com', 'lucida console', monospace, serif;
- line-height: $base-line-height;
- margin: ($base-line-height * .5) 0;
-}
31 bitters/_variables.scss
View
@@ -1,31 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-// Global Variables
-//
-///////////////////////////////////////////////////////////////////////////////
-
-
-// Colors
-///////////////////////////////////////////////////////////////////////////////
-
-$blue: #477DCA;
-$dark-gray: #333;
-$light-gray: #DDD;
-$light-red: #FBE3E4;
-$light-yellow: #FFF6BF;
-$light-green: #E6EFC2;
-
-// Font Colors
-$base-font-color: $dark-gray;
-
-// Text Link Colors
-$base-link-color: $blue;
-$hover-link-color: darken($blue, 15%);
-
-// Border color
-$base-border-color: $light-gray;
-
-// Flash Colors
-$error-color: $light-red;
-$notice-color: $light-yellow;
-$success-color: $light-green;
Something went wrong with that request. Please try again.