mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
remove theme.less and split preboot.less to mixins.less and variables.less to isolate customization from function
This commit is contained in:
Mark Otto
Vendored
+5
-3
@@ -12,9 +12,11 @@
|
||||
// CSS Reset
|
||||
@import "reset.less";
|
||||
|
||||
// Core
|
||||
@import "preboot.less";
|
||||
@import "theme.less";
|
||||
// Core variables and mixins
|
||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
|
||||
@import "mixins.less";
|
||||
|
||||
// Grid system and page structure
|
||||
@import "scaffolding.less";
|
||||
|
||||
// Styled patterns and elements
|
||||
|
||||
@@ -1,63 +1,10 @@
|
||||
/* Preboot.less
|
||||
* Variables and mixins to pre-ignite any new web development project
|
||||
* ------------------------------------------------------------------ */
|
||||
/* Variables.less
|
||||
* Snippets of reusable CSS to develop faster and keep code readable
|
||||
* ----------------------------------------------------------------- */
|
||||
|
||||
|
||||
// VARIABLES
|
||||
// ---------
|
||||
|
||||
// Links
|
||||
@linkColor: #0069d6;
|
||||
@linkColorHover: darken(@linkColor, 15);
|
||||
|
||||
// Grays
|
||||
@black: #000;
|
||||
@grayDark: lighten(@black, 25%);
|
||||
@gray: lighten(@black, 50%);
|
||||
@grayLight: lighten(@black, 75%);
|
||||
@grayLighter: lighten(@black, 90%);
|
||||
@white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
@blue: #049CDB;
|
||||
@blueDark: #0064CD;
|
||||
@green: #46a546;
|
||||
@red: #9d261d;
|
||||
@yellow: #ffc40d;
|
||||
@orange: #f89406;
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline grid
|
||||
@basefont: 13px;
|
||||
@baseline: 18px;
|
||||
|
||||
// Griditude
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Color Scheme
|
||||
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
||||
@baseColor: @blue; // Set a base color
|
||||
@complement: spin(@baseColor, 180); // Determine a complementary color
|
||||
@split1: spin(@baseColor, 158); // Split complements
|
||||
@split2: spin(@baseColor, -158);
|
||||
@triad1: spin(@baseColor, 135); // Triads colors
|
||||
@triad2: spin(@baseColor, -135);
|
||||
@tetra1: spin(@baseColor, 90); // Tetra colors
|
||||
@tetra2: spin(@baseColor, -90);
|
||||
@analog1: spin(@baseColor, 22); // Analogs colors
|
||||
@analog2: spin(@baseColor, -22);
|
||||
|
||||
|
||||
// MIXINS
|
||||
// ------
|
||||
|
||||
// Clearfix for clearing floats like a boss h5bp.com/q
|
||||
.clearfix {
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
@@ -72,7 +19,7 @@
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
.center-block {
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -207,34 +154,6 @@
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
// Shared colors for buttons and alerts
|
||||
.btn,
|
||||
.alert-message {
|
||||
// Set text color
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: @white
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger,
|
||||
&.error {
|
||||
.gradientBar(#ee5f5b, #c43c35);
|
||||
}
|
||||
// Success appears as green
|
||||
&.success {
|
||||
.gradientBar(#62c462, #57a957);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
&.info {
|
||||
.gradientBar(#5bc0de, #339bb9);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
@@ -488,6 +488,35 @@ footer {
|
||||
// BUTTON STYLES
|
||||
// -------------
|
||||
|
||||
// Shared colors for buttons and alerts
|
||||
.btn,
|
||||
.alert-message {
|
||||
// Set text color
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: @white
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger,
|
||||
&.error {
|
||||
.gradientBar(#ee5f5b, #c43c35);
|
||||
}
|
||||
// Success appears as green
|
||||
&.success {
|
||||
.gradientBar(#62c462, #57a957);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
&.info {
|
||||
.gradientBar(#5bc0de, #339bb9);
|
||||
}
|
||||
}
|
||||
|
||||
// Base .btn styles
|
||||
.btn {
|
||||
// Button Base
|
||||
|
||||
@@ -75,6 +75,7 @@ a {
|
||||
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
||||
|
||||
.row {
|
||||
.clearfix();
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
/* Theme.less
|
||||
* Customizable set of settings and tweaks for Bootstrap development
|
||||
* ----------------------------------------------------------------- */
|
||||
|
||||
|
||||
/*
|
||||
Why Theme.less?
|
||||
---------------
|
||||
Theme is a layer that has been added to Bootstrap to simplify the customization process for developers and designers. The goal of Theme is to provide a single point of customization within Bootstrap so you don't have to modify the core files.
|
||||
|
||||
How to use it
|
||||
-------------
|
||||
We repeat the default variables' values here for easy replacement. Simply modify any of these values and recompile Bootstrap for a more customize look and feel.
|
||||
|
||||
Extending it
|
||||
------------
|
||||
Feel free to create and add new variables and mixins here. The goal is to make this your playground and keep the core files intact.
|
||||
*/
|
||||
|
||||
|
||||
// Font face, size, weight, and more
|
||||
// ---------------------------------
|
||||
@baseFontSize: 13px; // base font-size
|
||||
@baseLineHeight: 18px; // base line-height of elements (incrementally increases with font-size)
|
||||
|
||||
|
||||
// Link color
|
||||
// ----------
|
||||
@linkColor: #0069d6;
|
||||
// No need to specify a link hover color because we'll automatically do that for you in Preboot
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// COMING SOON...
|
||||
// --------------
|
||||
|
||||
@baseFontFace: "Helvetica";
|
||||
|
||||
|
||||
// Primary button color
|
||||
// -----------------------------
|
||||
@primaryButtonColor: #333;
|
||||
|
||||
|
||||
// Grid system
|
||||
// ---------------------------------
|
||||
// Griditude
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
|
||||
|
||||
//
|
||||
// TODO:
|
||||
// - add ability to set app/site-wide base font-face (need better variables: @baseFontSize, @baseFontFace, @baseLineHeight, etc)
|
||||
// - add new docs section for Theme.less
|
||||
//
|
||||
@@ -0,0 +1,60 @@
|
||||
/* Variables.less
|
||||
* Variables to customize the look and feel of Bootstrap
|
||||
* ----------------------------------------------------- */
|
||||
|
||||
|
||||
// Links
|
||||
@linkColor: #0069d6;
|
||||
@linkColorHover: darken(@linkColor, 15);
|
||||
|
||||
// Grays
|
||||
@black: #000;
|
||||
@grayDark: lighten(@black, 25%);
|
||||
@gray: lighten(@black, 50%);
|
||||
@grayLight: lighten(@black, 75%);
|
||||
@grayLighter: lighten(@black, 90%);
|
||||
@white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
@blue: #049CDB;
|
||||
@blueDark: #0064CD;
|
||||
@green: #46a546;
|
||||
@red: #9d261d;
|
||||
@yellow: #ffc40d;
|
||||
@orange: #f89406;
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline grid
|
||||
@basefont: 13px;
|
||||
@baseline: 18px;
|
||||
|
||||
// Griditude
|
||||
// Modify the grid styles in mixins.less
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Color Scheme
|
||||
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
||||
@baseColor: @blue; // Set a base color
|
||||
@complement: spin(@baseColor, 180); // Determine a complementary color
|
||||
@split1: spin(@baseColor, 158); // Split complements
|
||||
@split2: spin(@baseColor, -158);
|
||||
@triad1: spin(@baseColor, 135); // Triads colors
|
||||
@triad2: spin(@baseColor, -135);
|
||||
@tetra1: spin(@baseColor, 90); // Tetra colors
|
||||
@tetra2: spin(@baseColor, -90);
|
||||
@analog1: spin(@baseColor, 22); // Analogs colors
|
||||
@analog2: spin(@baseColor, -22);
|
||||
|
||||
|
||||
|
||||
// More variables coming soon:
|
||||
// - @basefont to @baseFontSize
|
||||
// - @baseline to @baseLineHeight
|
||||
// - @baseFontFamily
|
||||
// - @primaryButtonColor
|
||||
// - anything else? File an issue on GitHub
|
||||
Reference in New Issue
Block a user