Skip to content

Instantly share code, notes, and snippets.

@richardhealy
Created July 30, 2015 13:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richardhealy/754c8320eaa3b75a5247 to your computer and use it in GitHub Desktop.
Save richardhealy/754c8320eaa3b75a5247 to your computer and use it in GitHub Desktop.
LESS Variables for BaseKit stylesheet.less
// Don't want to use metadata.json file to define
// variables? Then just add these variables to
// the top of your stylesheet.less and you're
// good to go!!!
// Colors
@color-swatch1:#ffffff; // Background
@color-swatch2:#3295e1; // Contrast color
@color-swatch3:#444444; // Button color
@color-swatch4:#333333; // Title colour
@color-swatch5:#333333; // Paragraph colour
@color-swatch6:#333333; // Nav text colour
@color-swatch7:#000000; // Header BG colour
// Site background variables
@siteBackgroundColor:transparent;
@siteBackgroundGradientType:vertical;
@siteBackgroundGradientFrom:transparent;
@siteBackgroundGradientTo:transparent;
@siteBackgroundImageScale:original;
@siteBackgroundImage:none;
@siteBackgroundPositionX:center;
@siteBackgroundPositionY:middle;
@siteBackgroundRepeat:no-repeat;
// Heading 1
@font-swatch1-font-family:Helvetica, Arial, sans-serif;
@font-swatch1-font-size:28px;
@font-swatch1-font-weight:700;
@font-swatch1-line-height:inherit;
@font-swatch1-letter-spacing:inherit;
@font-swatch1-color:@color-swatch4;
// Heading 2
@font-swatch2-font-family:Helvetica, Arial, sans-serif;
@font-swatch2-font-size:22px;
@font-swatch2-font-weight:700;
@font-swatch2-line-height:inherit;
@font-swatch2-color:@color-swatch4;
@font-swatch2-letter-spacing:inherit;
// Heading 3
@font-swatch3-font-family:Helvetica, Arial, sans-serif;
@font-swatch3-font-size:20px;
@font-swatch3-font-weight:700;
@font-swatch3-line-height:inherit;
@font-swatch3-letter-spacing:inherit;
@font-swatch3-color:@color-swatch4;
// Heading 4
@font-swatch4-font-family:Helvetica, Arial, sans-serif;
@font-swatch4-font-size:18px;
@font-swatch4-font-weight:700;
@font-swatch4-line-height:inherit;
@font-swatch4-letter-spacing:inherit;
@font-swatch4-color:@color-swatch4;
// Paragraph
@font-swatch5-font-family:Helvetica, Arial, sans-serif;
@font-swatch5-font-size:15px;
@font-swatch5-font-weight:inherit;
@font-swatch5-line-height:28px;
@font-swatch5-letter-spacing:inherit;
@font-swatch5-color:@color-swatch5;
// Navigation Text
@font-swatch6-font-family:Helvetica, Arial, sans-serif;
@font-swatch6-font-size:16px;
@font-swatch6-font-weight:inherit;
@font-swatch6-line-height:inherit;
@font-swatch6-letter-spacing:inherit;
@font-swatch6-color:@color-swatch6;
@font-swatch6-color-hover:@color-swatch7;
@font-swatch6-background-color:@color-swatch1;
@font-swatch6-background-color-hover:@color-swatch1;
// Buttons
@font-swatch7-font-family:Helvetica, Arial, sans-serif;
@font-swatch7-font-size:16px;
@font-swatch7-font-weight:inherit;
@font-swatch7-line-height:inherit;
@font-swatch7-letter-spacing:inherit;
@font-swatch7-color:@color-swatch1;
@font-swatch7-background-color:@color-swatch3;
@font-swatch7-background-color-hover:darken(@color-swatch3,10%);
// Feature Title
@font-swatch8-font-family:Helvetica, Arial, sans-serif;
@font-swatch8-font-size:34px;
@font-swatch8-font-weight:700;
@font-swatch8-line-height:inherit;
@font-swatch8-letter-spacing:inherit;
@font-swatch8-color:@color-swatch4;
// Feature Subtitle
@font-swatch9-font-family:Helvetica, Arial, sans-serif;
@font-swatch9-font-size:20px;
@font-swatch9-font-weight:inherit;
@font-swatch9-line-height:inherit;
@font-swatch9-letter-spacing:inherit;
@font-swatch9-color:@color-swatch5;
// Company Name
@font-swatch10-font-family:Helvetica, Arial, sans-serif;
@font-swatch10-font-size:28px;
@font-swatch10-font-weight:700;
@font-swatch10-line-height:inherit;
@font-swatch10-letter-spacing:inherit;
@font-swatch10-color:@color-swatch4;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment