Build the UI config file

Create the file

  1. $ touch _config.scss

Add the following code:

  1. /////// Typography configuration
  2. // *----------------------------------------
  3. $font-size: 16;
  5. $heading-1: 36;
  6. $heading-2: 32;
  7. $heading-3: 28;
  8. $heading-4: 18;
  9. $heading-5: 18;
  10. $heading-6: 18;
  12. $line: $font-size * 1.5;
  13. $small-point-size: 10;
  14. $large-point-size: 14;
  16. $primary-font-family: #{"Helvetica Neue", Arial, sans-serif};
  17. $secondary-font-family: #{"Helvetica Neue", Arial, sans-serif};
  18. $heading-font-family: #{"Helvetica Neue", Arial, sans-serif};
  21. /////// Default webfont directory
  22. // *----------------------------------------
  23. $fontDir: "fonts/";
  25. /////// Default image directory
  26. // *----------------------------------------
  27. $imgDir: "images/";
  29. /////// OOCSS generic base colors
  30. // *----------------------------------------
  31. $alpha-primary:   #5a2e2e;        // red
  32. $bravo-primary:   #3e4147;        // green
  33. $charlie-primary: #fffedf;        // yellow
  34. $delta-primary:   #2a2c31;        // blue
  35. $echo-primary:    #dfba69;        // accent
  37. $alpha-gray:      #333;           //black
  39. /////// Color math
  40. // *----------------------------------------
  41. @import "color-scale";
  44. /////// Semantic variables
  45. // *----------------------------------------
  46. // abstract 'white' value to easily applied to semantic class objects
  47. $white:                                #fff;
  49. // primary header font color
  50. $primary-header-color:                 $alpha-gray;
  52. // default heading font weight
  53. $heading-font-weight:                  normal;
  55. // primary font color for the app
  56. $primary-text:                         $alpha-gray;
  58. // default `href` link color
  59. $href-color:                           $delta-color;
  61. // default shadow colors
  62. $shadow-color:                         fade-out($alpha-color, 0.5);
  64. // default border color
  65. $border-color:                         $alpha-color;
  69. /////// HTML 5 feature colors
  70. // *----------------------------------------
  71. // used with the `ins` tag
  72. // http://www.w3schools.com/tags/tag_ins.asp
  73. $ins-color:                            $charlie-color;
  75. // used with the `mark` tag
  76. // http://www.w3schools.com/html5/tag-mark.asp
  77. $mark-color:                           $charlie-color;
  79. // webkit tap highlight color
  80. $webkit-tap-hightlight:                $delta-color;
  82. // overrides the default content selection color in the browser
  83. $selection-color:                      $charlie-color;
  84. $selection-text-color:                 $primary-text;
  88. //////// Default animation properties
  89. // *----------------------------------------
  90. $trans: .333s ease;

Add to the application.scss file

  1. /////// App Config - this is where most of your magic will happen
  2. // *----------------------------------------
  3. @import "config";