// 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! ///// Typography configuration ///// // ----------------------------------------------------------------------------- // $font_size: 12; // $heading_1: 32; $heading_2: 24; // $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: #{Arial, sans-serif}; // $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $heading_font_family: #{'Lato', sans-serif}; // $icon_font_alpha: #{'FontAwesome'}; // $icon_font_bravo: #{'zocial'}; ///// 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 //////// // ----------------------------------------------------------------------------- // This is a bootstrap template for creating an array of colors // If this is not for you, feel free to comment out @import "stipe/color/default_color_pallet"; // Don't like Stipe's color pallet, no worries. Uncomment these lines and go for it! // @import "color/color_math"; // @import "color/grayscale_math"; /////// 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_lr: 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 /////// axle's semantic combinations //////// // Semantic variables should always be matched up with abstract values, never semantic to semantic // ----------------------------------------------------------------------------- // abstract 'white' value to easily applied to semantic class objects // $white: #fff; // default shadow colors // $shadow_color: fade-out($alpha_gray, 0.5); // primary header font color // $primary_header_color: $alpha_gray; // primary font color for the app // $primary_text: $bravo_gray; // default link color // $href_color: $alpha_color_delta; // $href_color_alt: $delta_color_bravo; // used with the tag // http://www.w3schools.com/tags/tag_ins.asp // $ins_color: $charlie_color; // used with the 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; // default border color // $border_color: $charlie_gray; // 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: $white; // // $form_field_border: $charlie_gray; // $form_field_border_fail: $alpha_color; // $form_field_focus_border_color: $charlie_gray; // // $form_field_text: $primary_text; // $error_text: $alpha_color; // $form_field_fail: $alpha_color; // $form_field_text_fail: $alpha_color; // $instructional_text: $charlie_gray; // Config defaults for buttons // ----------------------------------------------------------------------------- // $primary_button_border_color: $bravo_color; // $secondary_button_border_color: $bravo_gray; // $button_text: $white; // 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 $iblur: 3; // inset blur settings /////////////// UI @media breakpoint defaults //////////////// // ----------------------------------------------------------------------------- // $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)"; // Compass function for creating grid background // ----------------------------------------------------------------------------- // @import "compass/layout/grid-background"; // $grid-background-total-columns: 12; // $grid-background-column-width: 60px; // $grid-background-gutter-width: 20px; // $grid-background-offset: 10px; // $grid-background-column-color: scale-color($echo_primary,$lightness:80%);