diff --git a/_config.scss b/_config.scss index d413a34..41af47c 100644 --- a/_config.scss +++ b/_config.scss @@ -1,5 +1,327 @@ -// Main configuration +// Default configuration // ------------------------------------------------------------------------------ -$default_space: 8px; -$default_font_size: 15px; \ No newline at end of file +// TEXT +// ------------------------------------------------------------------------------ + +$default_font_size: 15px !default; +$basic_size: $default_font_size; +$size_1: $basic_size * 4; + +$basic_line: 1; + +$head_size_1: 3.1em; +$head_size_2: 2.5em; +$head_size_3: 1.8em; +$head_size_4: 1.35em; + +$text_size_1: 1em; +$text_size_2: 20; + + +$default_line_height: 1.5 !default; +$text_line_1: $default_line_height; +$head_line_1: $text_line_1; +$head_line_2: $text_line_1; +$head_line_3: $text_line_1; +$head_line_4: $text_line_1; + +$primary_font_family: #{'Roboto', sans-serif}; +$secondary_font_family: #{'Roboto', sans-serif}; +$third_font_family: #{'Courier New', monospace}; + +$alternative_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans}; + +$basic_indent: 2em; + + +// COLORS +// ------------------------------------------------------------------------------ + +$alpha_color: #fad803; +$bravo_color: #d30a51; +$charlie_color: #273f8b; +$delta_color: #b7e0f0; +$echo_color: #52bed1; +$foxtrot_color: #0c85ff; + +$black: black; +$white: white; +$medium_gray: lighten($black, 50%); + + +$basic_font_color: $black; +$basic_head_color: $black; + +$basic_link_color: $echo_color; +$basic_highlight_color: $white; +$basic_action_color: $foxtrot_color; + +$basic_background_color: $medium_gray; +$light_color: lighten($basic_background_color,5%); +$dark_color: darken($basic_background_color,10%); + +$basic_border_color: $black; + +// default shadow colors +// $shadow_color: fade-out($medium_gray, 0.5); + + + +// LAYOUT +// ------------------------------------------------------------------------------ + +$basic_width: 96%; +$width_2: 80%; +$width_3: 60%; +$width_4: 48%; + +$default_space: 8px !default; +$basic_space: $default_space; +$half_space: $basic_space / 2; +$space_2: $basic_space * 2; +$space_3: $basic_space * 4; +$space_4: $basic_space * 8; +$space_5: $basic_space * 16; +$tiny_space: 1px; + +$basic_corner: 4px; + +$basic_border_width: $tiny_space; +$border_width_4: $tiny_space * 4; +$border_width_8: $tiny_space * 8; +$basic_border: $tiny_space solid $basic_border_color; +$cell_border: $tiny_space solid $dark_color; + +$basic_aside_width: 20%; + + + +// IO +// ------------------------------------------------------------------------------ + +$basic_io_font_color: darken($white, 10%); +$basic_io_background_color: lighten($black, 25%); +$basic_shadow: inset 0 1px 3px rgba($black, 0.06); +$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); + + + +// ANIMATIONS +// ------------------------------------------------------------------------------ + +$basic_duration: 150ms; +$basic_timing: ease; + + + + +// HARDWARE BREAKPOINTS +// ------------------------------------------------------------------------------ + +$tablet: "screen and (max-width: 64em)"; +$tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)"; +$tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)"; + +$mobile: "screen and (max-width: 30em)"; +$mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)"; +$mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)"; + +$screen_small: 1024px; +$screen_medium: 1280px; +$screen_large: 1920px; + + + +// VENDOR PREFIX +// ------------------------------------------------------------------------------ + +$prefix_defaults: -moz- -webkit- -o- -ms- ''; +$webkit_support: -webkit- ''; +$moz_support: -moz- ''; +$ms_support: -ms- ''; +$moz_webkit_support: -moz- -webkit- ''; +$moz_ms_support: -moz- -ms- ''; +$webkit_ms_support: -webkit- -ms- ''; + + + +// The config file is intended to allow users to quickly redefine core elements of the design +// that will cascade throughout the css to get your design up and running FAST! + +// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md + +/////// Typography configuration/////// +// ----------------------------------------------------------------------------- +// $font_size: 12; +// +// $heading_1: 46; +// $heading_2: 32; +// $heading_3: 28; +// $heading_4: 18; +// $heading_5: 18; +// $heading_6: 18; +// +// $line: $font_size * 1.5; +// +// $small_point_size: 10; +// $large_point_size: 14; +// +// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; +// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; +// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; + +// $icon_font_alpha: #{'ico-fonts'}; + +/////// Default webfont directory/////// +// ----------------------------------------------------------------------------- +// $webfont_directory: "/fonts/"; + +/////// default image directory /////// +// ----------------------------------------------------------------------------- +// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible, +// so simply referencing the images directory will be fine. +// $imgDir: "/images/"; + +/////// OOCSS generic base colors/////// +// ----------------------------------------------------------------------------- +// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs. +// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created +// by magic, unicorns and fairy dust! + +// $alpha_primary: #5a2e2e; // red +// $bravo_primary: #3e4147; // green +// $charlie_primary: #fffedf; // yellow +// $delta_primary: #2a2c31; // blue +// $echo_primary: #dfba69; // accent + +// $alpha_gray: #333; //black + +/////// Toadstool color math /////// +// ----------------------------------------------------------------------------- +// Local color functions to create default color palette +//@import "color/color_math"; +//@import "color/grayscale_math"; +//@import "color/color_defaults"; + +/////// Grid configuration /////// +// ----------------------------------------------------------------------------- +// setting default units of measurement for Toadstool grid solution +// $grid_type: 12; // sets default column grid +// $grid_uom: percent; // use either ``em`` or ``percent`` +// $grid_padding_l: 0; // sets default left/right padding inside grid block +// $grid_padding_r: 0; // sets default left/right padding inside grid block +// $grid_padding_tb: 0; // sets default top/bottom padding inside grid block +// $grid_border: 0; // sets default border width on all grid blocks +// $grid_child: none; // sets parent child relationship between grid blocks +// $grid_align: default; // by default grids float left. Optional argument is ``center`` +// $col_base: 10; // equal to 10px in the standard 960.gs +// $col_gutter: $col_base * 2; // sets default grid gutter width +// $grid_960: 960 / 100%; // grid math for percentages + + + +/////// HTML 5 feature colors /////// +// ----------------------------------------------------------------------------- +// used with the `ins` tag +// http://www.w3schools.com/tags/tag_ins.asp +// $ins_color: $charlie_color; + +// used with the `mark` tag +// http://www.w3schools.com/html5/tag_mark.asp +// $mark_color: $charlie_color; + +// webkit tap highlight color +// $webkit_tap_hightlight: $delta_color_bravo; + +// overrides the default content selection color in the browser +// $selection_color: $charlie_color; +// $selection_text_color: $primary_text; + + + +/////// Config defaults for forms /////// +// ----------------------------------------------------------------------------- +// $alert_background_color: $alpha_color; + +// $input_disabled: $bravo_gray; +// $input_disabled_bkg: lighten($input_disabled, 75%); +// $input_disabled_border: lighten($input_disabled, 50%); +// $input_disabled_text: lighten($input_disabled, 50%); +// +// $form_field_background_color: $white; +// $form_field_focus_color: $white; +// $form_field_fail_bkg: $alpha_color_juliet; + +// $form_field_border: $charlie_gray; +// $form_field_border_fail: $alpha_color_echo; +// $form_field_focus_border_color: $charlie_gray; + +// $form_field_text_fail: $alpha_color_echo; +// $form_label_color: $alpha_gray; +// $optional_field_text_color: $delta_gray; +// $instructional_text: $charlie_gray; +// $placeholder_text: $hotel_gray; +// $inline_alert_bkg_color: $alpha_color_delta; +// $inline_alert_text_color: $white; + +// Non-color defaults (currently not represented in the SG view) +// --------------------------------------------------------- +// $form_field_border_radius: $standard_round_corner; +// $form_field_text: $primary_text; +// $form_field_height: 35; +// $form_field_padding: 6; +// $form_label_weight: bold; +// $form_label_lineheight: 20; +// $inline_alert_lineheight: 30; +// $inline_alert_left_padding: 12; +// $inline_alert_weight: bold; +// $inline_alert_top_margin: 12; +// $inline_alert_border_width: 1; + + + +/////// Config defaults for buttons /////// +// ----------------------------------------------------------------------------- +// $button-color: $delta-color; +// $button-text-color: $white; +// $button-line-height: 32; +// $button-border-radius: 3; +// $button-padding: 20; +// $button-font-size: 18; +// $button-weight: bold; +// $button-text-shadow: true; +// $button-box-shadow: true; + +/////// Config defaults for ``standard_rounded_border`` mixin /////// +// ----------------------------------------------------------------------------- +// $standard_round_corner: 3; // sets default border radius +// $standard_corner_width: 1px; // sets default border width +// $standard_border_color: $border_color; // sets default border color + +/////// Config defaults for ``standard_block_spacing`` mixin /////// +// ----------------------------------------------------------------------------- +// $default_block_spacing: 20; // sets margin-bottom + +/////// Config defaults for site border style /////// +// ----------------------------------------------------------------------------- +// $standard_border_style: solid; + +/////// Config defaults for ``standard_hr`` mixin /////// +// ----------------------------------------------------------------------------- +// $standard_hr_spacing: 40; // sets padding and margin bottom +// $standard_hr_color: $delta_gray; +// $standard_hr_width: 1px; + +/////// Config values for all default shadows /////// +// ----------------------------------------------------------------------------- +// $h-shadow: 0; // horizontal shadow settings +// $v-shadow: 2; // vertical shaddow settings +// $blur: 3; // blur settings +// +// $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin +// $ih-shadow: 0; // inset horizontal shadow settings +// $iv-shadow: 2; // inset vertical shaddow settings +// $is-shadow: 2; // inset spread shaddow settings +// $iblur: 3; // inset blur settings + diff --git a/_default.scss b/_default.scss index ada18a4..923d584 100644 --- a/_default.scss +++ b/_default.scss @@ -1,323 +1,7 @@ -// Default configuration +// Main configuration // ------------------------------------------------------------------------------ -// TEXT -// ------------------------------------------------------------------------------ - -$basic_size: $default_font_size; -$size_1: $basic_size * 4; - -$basic_line: 1; - -$head_size_1: 3.1em; -$head_size_2: 2.5em; -$head_size_3: 1.8em; -$head_size_4: 1.35em; - -$text_size_1: 1em; -$text_size_2: 20; - -$text_line_1: 1.5; -$head_line_1: $text_line_1; -$head_line_2: $text_line_1; -$head_line_3: $text_line_1; -$head_line_4: $text_line_1; - -$primary_font_family: #{'Roboto', sans-serif}; -$secondary_font_family: #{'Roboto', sans-serif}; -$third_font_family: #{'Courier New', monospace}; - -$alternative_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans}; - -$basic_indent: 2em; - - -// COLORS -// ------------------------------------------------------------------------------ - -$alpha_color: #fad803; -$bravo_color: #d30a51; -$charlie_color: #273f8b; -$delta_color: #b7e0f0; -$echo_color: #52bed1; -$foxtrot_color: #0c85ff; - -$black: black; -$white: white; -$medium_gray: lighten($black, 50%); - - -$basic_font_color: $black; -$basic_head_color: $black; - -$basic_link_color: $echo_color; -$basic_highlight_color: $white; -$basic_action_color: $foxtrot_color; - -$basic_background_color: $medium_gray; -$light_color: lighten($basic_background_color,5%); -$dark_color: darken($basic_background_color,10%); - -$basic_border_color: $black; - -// default shadow colors -// $shadow_color: fade-out($medium_gray, 0.5); - - - -// LAYOUT -// ------------------------------------------------------------------------------ - -$basic_width: 96%; -$width_2: 80%; -$width_3: 60%; -$width_4: 48%; - -$tiny_space: 1px; -$basic_space: $default_space; -$half_space: $basic_space / 2; -$space_2: $basic_space * 2; -$space_3: $basic_space * 4; -$space_4: $basic_space * 8; -$space_5: $basic_space * 16; - -$basic_corner: 4px; - -$basic_border_width: $tiny_space; -$border_width_4: $tiny_space * 4; -$border_width_8: $tiny_space * 8; -$basic_border: $tiny_space solid $basic_border_color; -$cell_border: $tiny_space solid $dark_color; - -$basic_aside_width: 20%; - - - -// IO -// ------------------------------------------------------------------------------ - -$basic_io_font_color: darken($white, 10%); -$basic_io_background_color: lighten($black, 25%); -$basic_shadow: inset 0 1px 3px rgba($black, 0.06); -$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); - - - -// ANIMATIONS -// ------------------------------------------------------------------------------ - -$basic_duration: 150ms; -$basic_timing: ease; - - - - -// HARDWARE BREAKPOINTS -// ------------------------------------------------------------------------------ - -$tablet: "screen and (max-width: 64em)"; -$tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)"; -$tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)"; - -$mobile: "screen and (max-width: 30em)"; -$mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)"; -$mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)"; - -$screen_small: 1024px; -$screen_medium: 1280px; -$screen_large: 1920px; - - - -// VENDOR PREFIX -// ------------------------------------------------------------------------------ - -$prefix_defaults: -moz- -webkit- -o- -ms- ''; -$webkit_support: -webkit- ''; -$moz_support: -moz- ''; -$ms_support: -ms- ''; -$moz_webkit_support: -moz- -webkit- ''; -$moz_ms_support: -moz- -ms- ''; -$webkit_ms_support: -webkit- -ms- ''; - - - -// The config file is intended to allow users to quickly redefine core elements of the design -// that will cascade throughout the css to get your design up and running FAST! - -// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md - -/////// Typography configuration/////// -// ----------------------------------------------------------------------------- -// $font_size: 12; -// -// $heading_1: 46; -// $heading_2: 32; -// $heading_3: 28; -// $heading_4: 18; -// $heading_5: 18; -// $heading_6: 18; -// -// $line: $font_size * 1.5; -// -// $small_point_size: 10; -// $large_point_size: 14; -// -// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; -// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; -// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; - -// $icon_font_alpha: #{'ico-fonts'}; - -/////// Default webfont directory/////// -// ----------------------------------------------------------------------------- -// $webfont_directory: "/fonts/"; - -/////// default image directory /////// -// ----------------------------------------------------------------------------- -// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible, -// so simply referencing the images directory will be fine. -// $imgDir: "/images/"; - -/////// OOCSS generic base colors/////// -// ----------------------------------------------------------------------------- -// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs. -// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created -// by magic, unicorns and fairy dust! - -// $alpha_primary: #5a2e2e; // red -// $bravo_primary: #3e4147; // green -// $charlie_primary: #fffedf; // yellow -// $delta_primary: #2a2c31; // blue -// $echo_primary: #dfba69; // accent - -// $alpha_gray: #333; //black - -/////// Toadstool color math /////// -// ----------------------------------------------------------------------------- -// Local color functions to create default color palette -//@import "color/color_math"; -//@import "color/grayscale_math"; -//@import "color/color_defaults"; - -/////// Grid configuration /////// -// ----------------------------------------------------------------------------- -// setting default units of measurement for Toadstool grid solution -// $grid_type: 12; // sets default column grid -// $grid_uom: percent; // use either ``em`` or ``percent`` -// $grid_padding_l: 0; // sets default left/right padding inside grid block -// $grid_padding_r: 0; // sets default left/right padding inside grid block -// $grid_padding_tb: 0; // sets default top/bottom padding inside grid block -// $grid_border: 0; // sets default border width on all grid blocks -// $grid_child: none; // sets parent child relationship between grid blocks -// $grid_align: default; // by default grids float left. Optional argument is ``center`` -// $col_base: 10; // equal to 10px in the standard 960.gs -// $col_gutter: $col_base * 2; // sets default grid gutter width -// $grid_960: 960 / 100%; // grid math for percentages - - - -/////// HTML 5 feature colors /////// -// ----------------------------------------------------------------------------- -// used with the `ins` tag -// http://www.w3schools.com/tags/tag_ins.asp -// $ins_color: $charlie_color; - -// used with the `mark` tag -// http://www.w3schools.com/html5/tag_mark.asp -// $mark_color: $charlie_color; - -// webkit tap highlight color -// $webkit_tap_hightlight: $delta_color_bravo; - -// overrides the default content selection color in the browser -// $selection_color: $charlie_color; -// $selection_text_color: $primary_text; - - - -/////// Config defaults for forms /////// -// ----------------------------------------------------------------------------- -// $alert_background_color: $alpha_color; - -// $input_disabled: $bravo_gray; -// $input_disabled_bkg: lighten($input_disabled, 75%); -// $input_disabled_border: lighten($input_disabled, 50%); -// $input_disabled_text: lighten($input_disabled, 50%); -// -// $form_field_background_color: $white; -// $form_field_focus_color: $white; -// $form_field_fail_bkg: $alpha_color_juliet; - -// $form_field_border: $charlie_gray; -// $form_field_border_fail: $alpha_color_echo; -// $form_field_focus_border_color: $charlie_gray; - -// $form_field_text_fail: $alpha_color_echo; -// $form_label_color: $alpha_gray; -// $optional_field_text_color: $delta_gray; -// $instructional_text: $charlie_gray; -// $placeholder_text: $hotel_gray; -// $inline_alert_bkg_color: $alpha_color_delta; -// $inline_alert_text_color: $white; - -// Non-color defaults (currently not represented in the SG view) -// --------------------------------------------------------- -// $form_field_border_radius: $standard_round_corner; -// $form_field_text: $primary_text; -// $form_field_height: 35; -// $form_field_padding: 6; -// $form_label_weight: bold; -// $form_label_lineheight: 20; -// $inline_alert_lineheight: 30; -// $inline_alert_left_padding: 12; -// $inline_alert_weight: bold; -// $inline_alert_top_margin: 12; -// $inline_alert_border_width: 1; - - - -/////// Config defaults for buttons /////// -// ----------------------------------------------------------------------------- -// $button-color: $delta-color; -// $button-text-color: $white; -// $button-line-height: 32; -// $button-border-radius: 3; -// $button-padding: 20; -// $button-font-size: 18; -// $button-weight: bold; -// $button-text-shadow: true; -// $button-box-shadow: true; - -/////// Config defaults for ``standard_rounded_border`` mixin /////// -// ----------------------------------------------------------------------------- -// $standard_round_corner: 3; // sets default border radius -// $standard_corner_width: 1px; // sets default border width -// $standard_border_color: $border_color; // sets default border color - -/////// Config defaults for ``standard_block_spacing`` mixin /////// -// ----------------------------------------------------------------------------- -// $default_block_spacing: 20; // sets margin-bottom - -/////// Config defaults for site border style /////// -// ----------------------------------------------------------------------------- -// $standard_border_style: solid; - -/////// Config defaults for ``standard_hr`` mixin /////// -// ----------------------------------------------------------------------------- -// $standard_hr_spacing: 40; // sets padding and margin bottom -// $standard_hr_color: $delta_gray; -// $standard_hr_width: 1px; - -/////// Config values for all default shadows /////// -// ----------------------------------------------------------------------------- -// $h-shadow: 0; // horizontal shadow settings -// $v-shadow: 2; // vertical shaddow settings -// $blur: 3; // blur settings -// -// $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin -// $ih-shadow: 0; // inset horizontal shadow settings -// $iv-shadow: 2; // inset vertical shaddow settings -// $is-shadow: 2; // inset spread shaddow settings -// $iblur: 3; // inset blur settings +$default_font_size: 15px; +$default_line_height: 1.5; +$default_space: 8px; diff --git a/_hippie.scss b/_hippie.scss index ce233a3..cc6315c 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -30,8 +30,8 @@ // Adjustments can be made by copying values from _default.scss to _config.scss // Be careful though changes will get lost if hippie gets updated // ----------------------------------------------------------------------------- -@import "default"; // DO NOT EDIT -@import "config"; // EDIT THIS +@import "default"; // EDIT +@import "config"; // DO NOT EDIT