Skip to content

Instantly share code, notes, and snippets.

@brianfeister

brianfeister/Bootstrap Sub-theme Engine Vars

Last active October 12, 2015 12:37
Show Gist options
  • Save brianfeister/4027697 to your computer and use it in GitHub Desktop.
Save brianfeister/4027697 to your computer and use it in GitHub Desktop.
Download ZIP
Per-theme variable declarations for sub-theming engine for via Twitter Bootstrap
Raw
Bootstrap Sub-theme Engine Vars
// --------------------------------------------------
//
// SUB-THEME-SPECIFIC VARIABLES
//
// --------------------------------------------------
// Home
// -------------------------
@home-sub-theme-PrimaryColor: @primaryColor;
@home-sub-theme-AccentColor: @accentColor;
@home-sub-theme-PrimaryInverse: @accentColor;
@home-sub-theme-PrimarySubdued: mix( @home-sub-theme-PrimaryColor, @home-sub-theme-AccentColor, 90% ); // dark blue/purple
@home-sub-theme-PrimaryHSLA: hsla( hue(@home-sub-theme-PrimaryColor),
saturation(@home-sub-theme-PrimaryColor),
lightness(@home-sub-theme-PrimaryColor),
50%
);
@home-sub-theme-PrimaryHSLAlight: hsla( hue(@home-sub-theme-PrimaryColor),
saturation(@home-sub-theme-PrimaryColor),
lightness(@home-sub-theme-PrimaryColor),
25%
);
@home-sub-theme-AccentHSLA: hsla( hue(@home-sub-theme-AccentColor),
saturation(@home-sub-theme-AccentColor),
lightness(@home-sub-theme-AccentColor),
50%
);
// About
// -------------------------
@about-sub-theme-PrimaryColor: #c5e3b6; // mint green
@about-sub-theme-AccentColor: #1d075c; // dark blue/purple
@about-sub-theme-PrimaryInverse: #3f3a63; // grey blue/purple
@about-sub-theme-PrimarySubdued: mix( @about-sub-theme-PrimaryColor, @about-sub-theme-AccentColor, 90% ); // dark blue/purple
@about-sub-theme-PrimaryHSLA: hsla( hue(@about-sub-theme-PrimaryColor),
saturation(@about-sub-theme-PrimaryColor),
lightness(@about-sub-theme-PrimaryColor),
50%
);
@about-sub-theme-PrimaryHSLAlight: hsla( hue(@about-sub-theme-PrimaryColor),
saturation(@about-sub-theme-PrimaryColor),
lightness(@about-sub-theme-PrimaryColor),
25%
);
@about-sub-theme-AccentHSLA: hsla( hue(@about-sub-theme-AccentColor),
saturation(@about-sub-theme-AccentColor),
lightness(@about-sub-theme-AccentColor),
50%
);
// Events
// -------------------------
@events-sub-theme-PrimaryColor: #dda3e3; // light purle/pink
@events-sub-theme-AccentColor: #0c143b; // dark blue/purple
@events-sub-theme-PrimaryInverse: #322762; // royal purple
@events-sub-theme-PrimarySubdued: mix( @events-sub-theme-PrimaryColor, @events-sub-theme-AccentColor, 90% ); // dark blue/purple
@events-sub-theme-PrimaryHSLA: hsla( hue(@events-sub-theme-PrimaryColor),
saturation(@events-sub-theme-PrimaryColor),
lightness(@events-sub-theme-PrimaryColor),
50%
);
@events-sub-theme-PrimaryHSLAlight: hsla( hue(@events-sub-theme-PrimaryColor),
saturation(@events-sub-theme-PrimaryColor),
lightness(@events-sub-theme-PrimaryColor),
25%
);
@events-sub-theme-AccentHSLA: hsla( hue(@events-sub-theme-AccentColor),
saturation(@events-sub-theme-AccentColor),
lightness(@events-sub-theme-AccentColor),
50%
);
// Instruction
// -------------------------
@instruction-sub-theme-PrimaryColor: #373737; // almost black
@instruction-sub-theme-AccentColor: #F5EDE4; // very light grey
@instruction-sub-theme-PrimaryInverse: #F5EDE4; // almost black
@instruction-sub-theme-PrimarySubdued: mix( @instruction-sub-theme-PrimaryColor, @instruction-sub-theme-AccentColor, 90% ); // dark blue/purple
@instruction-sub-theme-PrimaryHSLA: hsla( hue(@instruction-sub-theme-PrimaryColor),
saturation(@instruction-sub-theme-PrimaryColor),
lightness(@instruction-sub-theme-PrimaryColor),
50%
);
@instruction-sub-theme-PrimaryHSLAlight: hsla( hue(@instruction-sub-theme-PrimaryColor),
saturation(@instruction-sub-theme-PrimaryColor),
lightness(@instruction-sub-theme-PrimaryColor),
25%
);
@instruction-sub-theme-AccentHSLA: hsla( hue(@instruction-sub-theme-AccentColor),
saturation(@instruction-sub-theme-AccentColor),
lightness(@instruction-sub-theme-AccentColor),
50%
);
// Gallery
// -------------------------
@gallery-sub-theme-PrimaryColor: #961234; // deep red
@gallery-sub-theme-AccentColor: #070d27; // blue/black
@gallery-sub-theme-PrimaryInverse: #0c1637; // slightly lighter blue/black
@gallery-sub-theme-PrimarySubdued: mix( @gallery-sub-theme-PrimaryColor, @gallery-sub-theme-AccentColor, 90% ); // dark blue/purple
@gallery-sub-theme-PrimaryHSLA: hsla( hue(@gallery-sub-theme-PrimaryColor),
saturation(@gallery-sub-theme-PrimaryColor),
lightness(@gallery-sub-theme-PrimaryColor),
50%
);
@gallery-sub-theme-PrimaryHSLAlight: hsla( hue(@gallery-sub-theme-PrimaryColor),
saturation(@gallery-sub-theme-PrimaryColor),
lightness(@gallery-sub-theme-PrimaryColor),
25%
);
@gallery-sub-theme-AccentHSLA: hsla( hue(@gallery-sub-theme-AccentColor),
saturation(@gallery-sub-theme-AccentColor),
lightness(@gallery-sub-theme-AccentColor),
50%
);
// Store
// -------------------------
@store-sub-theme-PrimaryColor: #b39af2; // lavendar
@store-sub-theme-AccentColor: #0a1a3d; // dark blue/purple
@store-sub-theme-PrimaryInverse: #061038; // dark blue/purple
@store-sub-theme-PrimarySubdued: mix( @store-sub-theme-PrimaryColor, @store-sub-theme-AccentColor, 90% ); // dark blue/purple
@store-sub-theme-PrimaryHSLA: hsla( hue(@store-sub-theme-PrimaryColor),
saturation(@store-sub-theme-PrimaryColor),
lightness(@store-sub-theme-PrimaryColor),
50%
);
@store-sub-theme-PrimaryHSLAlight: hsla( hue(@store-sub-theme-PrimaryColor),
saturation(@store-sub-theme-PrimaryColor),
lightness(@store-sub-theme-PrimaryColor),
25%
);
@store-sub-theme-AccentHSLA: hsla( hue(@store-sub-theme-AccentColor),
saturation(@store-sub-theme-AccentColor),
lightness(@store-sub-theme-AccentColor),
50%
);
// Booking & Contact
// -------------------------
@booking_contact-sub-theme-PrimaryColor: #2b3231; // almost black hint of aqua
@booking_contact-sub-theme-AccentColor: #c3cdc5; // light grey with hint of aqua
@booking_contact-sub-theme-PrimaryInverse: #dae3dd; // light grey with hint of aqua
@booking_contact-sub-theme-PrimarySubdued: mix( @booking_contact-sub-theme-PrimaryColor, @booking_contact-sub-theme-AccentColor, 90% ); // dark blue/purple
@booking_contact-sub-theme-PrimaryHSLA: hsla( hue(@booking_contact-sub-theme-PrimaryColor),
saturation(@booking_contact-sub-theme-PrimaryColor),
lightness(@booking_contact-sub-theme-PrimaryColor),
50%
);
@booking_contact-sub-theme-PrimaryHSLAlight: hsla( hue(@booking_contact-sub-theme-PrimaryColor),
saturation(@booking_contact-sub-theme-PrimaryColor),
lightness(@booking_contact-sub-theme-PrimaryColor),
25%
);
@booking_contact-sub-theme-AccentHSLA: hsla( hue(@booking_contact-sub-theme-AccentColor),
saturation(@booking_contact-sub-theme-AccentColor),
lightness(@booking_contact-sub-theme-AccentColor),
50%
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment