Skip to content

Instantly share code, notes, and snippets.

@boottheme

boottheme/README.md

Created March 2, 2013 22:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save boottheme/5073653 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save boottheme/5073653 to your computer and use it in GitHub Desktop.
Download ZIP
Created by Anonymous at BootTheme (http://www.boottheme.com)
Raw
bootstrap.min.css
/* Import this gist into BootTheme to generate CSS */
Raw
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>BootTheme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Demo of Twitter Bootstrap and BootTheme">
<meta name="author" content="boottheme">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- TODO: make sure bootstrap.min.css points to BootTheme generated file
-->
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- TODO: make sure bootstrap-responsive.min.css points to BootTheme
generated file -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css"
rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container-fluid">
<!-- -->
<header class="" id="overview">
<h1>Preview of changes in this theme.</h1>
<div class="subnav">
<ul class="nav nav-pills">
<li>
<a href="#navbar">Navbar</a>
</li>
<li>
<a href="#herounit">Hero Unit</a>
</li>
<li>
<a href="#typography">Typography</a>
</li>
<li>
<a href="#tables">Tables</a>
</li>
<li>
<a href="#buttons">Buttons</a>
</li>
<li>
<a href="#forms">Forms</a>
</li>
<li>
<a href="#alerts">Form States & Alerts</a>
</li>
<li>
<a href="#miscellaneous">Miscellaneous</a>
</li>
</ul>
</div>
</header>
<!-- Navbar -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Link One</a>
</li>
<li>
<a href="#">Link Two</a>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Dropdown Two<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action One</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Action Two</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
<!-- /navbar -->
</section>
<!-- Hero Unit -->
<section id="herounit">
<div class="page-header">
<h1>Hero Unit</h1>
</div>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This page shows Bootstrap components. Customize variables in the left
panel and preview changes here.</p>
<p>
<a class="btn btn-primary btn-large">Learn more &raquo;</a>
</p>
</div>
</section>
<!-- Typography -->
<section id="typography">
<div class="page-header">
<h1>Typography</h1>
</div>
<!-- Headings & Paragraph Copy -->
<div class="row">
<div class="span4">
<div class="well">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
</div>
<div class="span4">
<h3>Example body text</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
odio sem nec elit. Donec sed odio dui.</p>
</div>
<div class="span4">
<h3>Example addresses</h3>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@gmail.com</a>
</address>
</div>
</div>
</section>
<!-- Tables -->
<section id="tables">
<div class="page-header">
<h1>Tables</h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
<th>Column Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 4</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 4</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
<td>Row 3, Col 4</td>
</tr>
</tbody>
</table>
</section>
<!-- Buttons -->
<section id="buttons">
<div class="page-header">
<h1>Buttons</h1>
</div>
<div class="button-toolbar">
<a class="btn" href="#">Default</a>
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-info" href="#">Info</a>
<a class="btn btn-success" href="#">Success</a>
<a class="btn btn-warning" href="#">Warning</a>
<a class="btn btn-danger" href="#">Danger</a>
<a class="btn btn-inverse" href="#">Inverse</a>
<a class="btn btn-danger" href="#"><i class="icon-fire"></i> Fire</a>
</div>
</section>
<!-- Forms -->
<section id="forms">
<div class="page-header">
<h1>Forms</h1>
</div>
<form class="form-horizontal">
<legend>Test Sign Up</legend>
<fieldset>
<div class="control-group">
<label class="control-label" for="signupName">User Name</label>
<div class="controls">
<input type="text" class="input-large" id="login">
<p class="help-block">Enter name</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="signupEmailid">Email</label>
<div class="controls">
<input type="text" class="input-medium" id="signup-emailid">
<p class="help-block">Please verify email id. You will receive confirmation email</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="signupPassword">Password</label>
<div class="controls">
<input type="password" class="input-small" id="signupPassword">
<p class="help-block">Password must have 8 characters</p>
</div>
</div>
</fieldset>
<div class="form-actions">
<button id="signupButton" class="btn btn-primary">Sign Up</button>
</div>
</form>
</section>
<!-- Form States & Alerts -->
<section id="alerts">
<div class="page-header">
<h1>Form States & Alerts</h1>
</div>
<div class="row-fluid">
<div class="span4">
<h3>Error or danger</h3>
<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button> <strong>Oh snap!</strong> Change a few things up and try submitting
again.</div>
</div>
<div class="span4">
<h3>Success</h3>
<div class="alert alert-success">
<button class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read this important
alert message.</div>
</div>
<div class="span4">
<h3>Information</h3>
<div class="alert alert-info">
<button class="close" data-dismiss="alert">×</button> <strong>Heads up!</strong> This alert needs your attention, but
it's not super important.</div>
</div>
</div>
<!-- Miscellaneous -->
<section id="miscellaneous">
<div class="page-header">
<h1>Miscellaneous</h1>
</div>
<hr>
<hr>
</div>
</section>
<br>
<br>
<br>
<br>
<!-- Footer==================================================- ->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
<!-- Le javascript==================================================-
->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</body>
</html>
Raw
main.css
/* add CSS here */
Raw
main.js
// add JavaScript here
Raw
variables.less
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: @black;
// Links
// -------------------------
@linkColor: #1e3d7a;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @serifFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit;
@headingsFontWeight: bold;
@headingsColor: inherit;
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25;
@fontSizeSmall: @baseFontSize * 0.85;
@fontSizeMini: @baseFontSize * 0.75;
@paddingLarge: 11px 19px;
@paddingSmall: 2px 10px;
@paddingMini: 0 6px;
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Tables
// -------------------------
@tableBackground: transparent;
@tableBackgroundAccent: #f9f9f9;
@tableBackgroundHover: #f5f5f5;
@tableBorder: #ddd;
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px;
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;
// Wells
// -------------------------
@wellBackground: #f5f5f5;
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackgroundHighlight: lighten(@navbarBackground,5%);
@navbarBackground: lighten(#91a9d1,20%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @textColor;
@navbarLinkColor: @textColor;
@navbarLinkColorHover: @textColor;
@navbarLinkColorActive: @textColor;
@navbarLinkBackgroundHover: @textColor;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination
// -------------------------
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Hero unit
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment