rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' of http://git.local.twitter.com/bootstrap

Browse Source
This commit is contained in:
Mark Otto 2011-08-17 22:26:25 -07:00
commit 68007404a8
12 changed files with 134 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

28
README.md
View File

@ -1,9 +1,13 @@
TWITTER BASELINE
----------------
TWITTER BOOTSTRAP
=================
Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.
To get started -- checkout http://twitter.github.com/bootstrap!
== Usage ==
Usage
-----
You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.
@ -19,21 +23,27 @@ Or if you prefer, the standard css way:
For more info, refer to the docs!
== Reporting bugs ==
Reporting bugs
--------------
Please create an issue here on github! :P
== AUTHORS ==
AUTHORS
-------
**Mark Otto**
http://twitter.com/mdo
+ http://twitter.com/mdo
+ http://github.com/markdotto
**Jacob Thornton**
http://twitter.com/fat
+ http://twitter.com/fat
+ http://github.com/fat
== Copyright and License ==
Copyright and License
---------------------
Copyright 2011 Twitter, Inc.

28
bootstrap-1.0.0.css vendored
View File

@ -6,12 +6,11 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Fri Jul 29 13:03:43 PDT 2011
* Date: Tue Aug 16 22:54:18 PDT 2011
*/
/*
* Reset.less
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
*/
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body {
margin: 0;
padding: 0;
@ -125,9 +124,7 @@ aside {
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
*/
/* Baseline Grid System
-------------------------------------------------- */
* ------------------------------------------------------------------------------------------- */
.row {
zoom: 1;
}
@ -338,8 +335,6 @@ aside {
.row .offset12:first-child {
margin-left: 720px !important;
}
/* Structural Layout
-------------------------------------------------- */
html, body {
background-color: #fff;
}
@ -376,8 +371,6 @@ div.container-fluid div.content {
max-width: 1180px;
margin-left: 240px;
}
/* Base Styles
-------------------------------------------------- */
a {
color: #0069d6;
text-decoration: none;
@ -639,12 +632,9 @@ pre {
border-radius: 3px;
white-space: pre-wrap;
}
/*
* Forms.less
/* Forms.less
* Base styles for various input types, form layouts, and states
*/
/* Global form styles
-------------------------------------------------- */
* ------------------------------------------------------------- */
form {
margin-bottom: 18px;
}
@ -981,9 +971,7 @@ form.form-stacked div.actions {
/*
* Tables.less
* Tables for, you guessed it, tabular data
*/
/* Baseline styles
-------------------------------------------------- */
* ---------------------------------------- */
table {
width: 100%;
margin-bottom: 18px;
@ -1003,8 +991,6 @@ table th {
font-weight: bold;
border-bottom-width: 2px;
}
/* Zebra-striping
-------------------------------------------------- */
table.zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
}

10
docs/index.html
View File

@ -5,7 +5,7 @@
<title>Twitter Bootstrap</title>
<!-- Le styles -->
<link href="../bootstrap-1.0.0.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap-1.0.0.css" rel="stylesheet" type="text/css">
<link href="assets/css/docs.css" rel="stylesheet" type="text/css">
<!-- Le javascript -->
@ -58,21 +58,21 @@
<h6>Hotlink the CSS</h6>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1">&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css</textarea>
<textarea class="copy-code" rows="1">&lt;link type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css"></textarea>
</form>
</div>
<div class="span5 columns">
<h6>Use it with LESS</h6>
<p>A fan of using LESS.js? No problem, just clone the repo and add these lines:</p>
<form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" type="text/css" href="http://twitter.github.com/bootstrap.less&gt;
&lt;script src="less.js"&gt;&lt;/script&gt;</textarea>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" type="text/css" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form>
</div>
<div class="span5 columns">
<h6>Fork on GitHub</h6>
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
<p><a href="" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
</div>
</div>
</div>

3
lib/bootstrap.less vendored
View File

@ -20,4 +20,5 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";
@import "patterns.less";

22
lib/forms.less
View File

@ -1,14 +1,14 @@
/*
* Forms.less
/* Forms.less
* Base styles for various input types, form layouts, and states
*/
* ------------------------------------------------------------- */
/* Global form styles
-------------------------------------------------- */
// FORM STYLES
// -----------
form {
margin-bottom: @baseline;
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
@ -21,14 +21,17 @@ form {
color: @grayDark;
}
}
// Parent element that clears floats and wraps labels and fields together
div.clearfix {
margin-bottom: @baseline;
}
// Set font for forms
label, input, select, textarea {
#font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
padding-top: 6px;
@ -39,15 +42,18 @@ form {
text-align: right;
color: @grayDark;
}
// Shift over the inside div to align all label's relevant content
div.input {
margin-left: 150px;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
// Inputs, Textareas, Selects
input[type=text],
input[type=password],
@ -79,6 +85,7 @@ form {
border-color: #ccc;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
@ -86,6 +93,7 @@ form {
::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states
input[type=text],
input[type=password],
@ -102,6 +110,7 @@ form {
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
// Error styles
div.error {
background: lighten(@red, 57%);
@ -133,6 +142,7 @@ form {
}
}
}
// Form element sizes
.input-mini, input.mini, textarea.mini, select.mini {
width: 60px;
@ -155,6 +165,7 @@ form {
textarea.xxlarge {
overflow-y: scroll;
}
// Turn off focus for disabled (read-only) form elements
input[readonly]:focus,
textarea[readonly]:focus,
@ -194,6 +205,7 @@ div.actions {
.help-inline {
padding-left: 5px;
}
// Big blocks of help text
.help-block {
display: block;

35
lib/patterns.less
View File

@ -2,7 +2,8 @@
* Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */
// Topbar
// TOPBAR
// ------
// Topbar for Branding and Nav
@ -17,11 +18,13 @@ div.topbar {
overflow: visible;
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
// Links get text shadow
a {
color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Hover and active states for links
ul li a:hover,
ul li.active a,
@ -31,6 +34,7 @@ div.topbar {
color: @white;
text-decoration: none;
}
// Logo
a.logo {
float: left;
@ -46,6 +50,7 @@ div.topbar {
margin-right: 6px;
}
}
// Search Form
form {
float: left;
@ -65,6 +70,7 @@ div.topbar {
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @grayLighter;
@ -89,6 +95,7 @@ div.topbar {
}
}
}
// Navigation
ul {
display: block;
@ -120,6 +127,7 @@ div.topbar {
background-color: rgba(0,0,0,.5);
}
}
// Dropdowns
&.primary-nav li ul {
left: 0;
@ -207,6 +215,7 @@ div.topbar {
color: #fff;
}
}
// Dividers (basically an hr)
&.divider {
height: 1px;
@ -215,6 +224,7 @@ div.topbar {
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 5px 0;
}
// Section separaters
span {
clear: both;
@ -230,7 +240,8 @@ div.topbar {
}
}
// Page Headers
// PAGE HEADERS
// ------------
div.page-header {
@ -243,7 +254,7 @@ div.page-header {
}
// Error Styles
// ERROR STYLES
// ------------
// One-liner alert bars
@ -336,7 +347,7 @@ div.block-message {
}
// Navigation
// NAVIGATION
// ----------
// Common tab and pill styles
@ -353,6 +364,7 @@ ul.pills {
}
}
}
// Basic Tabs
ul.tabs {
width: 100%;
@ -378,6 +390,7 @@ ul.tabs {
}
}
}
// Basic pill nav
ul.pills {
li {
@ -403,8 +416,8 @@ ul.pills {
}
// Pagination
// --------------------------------------------------
// PAGINATION
// ----------
div.pagination {
height: @baseline * 2;
@ -442,7 +455,7 @@ div.pagination {
}
// Wells
// WELLS
// -----
div.well {
@ -456,7 +469,7 @@ div.well {
}
// Modals
// MODALS
// ------
div.modal-backdrop {
@ -510,7 +523,7 @@ div.modal {
}
// Popover Arrows
// POPOVER ARROWS
// --------------
#popoverArrow {
@ -548,7 +561,7 @@ div.modal {
}
}
// Twipsy
// TWIPSY
// ------
div.twipsy {
@ -580,7 +593,7 @@ div.twipsy {
}
// Popovers
// POPOVERS
// --------
.popover {

8
lib/preboot.less
View File

@ -2,7 +2,8 @@
* Variables and mixins to pre-ignite any new web development project
* ------------------------------------------------------------------ */
// Variables
// VARIABLES
// ---------
// Links
@ -37,10 +38,7 @@
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Color Scheme
// ------------
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@ -53,7 +51,7 @@
@analog2: spin(@baseColor, -22);
// Mixins
// MIXINS
// ------
// Clearfix for clearing floats like a boss

21
lib/reset.less
View File

@ -1,20 +1,21 @@
/*
* Reset.less
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
*/
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// ERIC MEYER RESET
// ----------------
// Eric Meyer reset
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
// HTML5
header,
section,
footer,
article,
aside {
// -----
header, section, footer, article, aside {
display: block;
}
}

20
lib/scaffolding.less
View File

@ -1,14 +1,15 @@
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
*/
* ------------------------------------------------------------------------------------------- */
/* Baseline Grid System
-------------------------------------------------- */
// GRID SYSTEM
// -----------
.row {
.clearfix();
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
@ -26,7 +27,7 @@
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
@ -43,8 +44,8 @@
}
/* Structural Layout
-------------------------------------------------- */
// STRUCTURAL LAYOUT
// -----------------
html, body {
background-color: #fff;
@ -78,8 +79,8 @@ div.container-fluid {
}
/* Base Styles
-------------------------------------------------- */
// BASE STYLES
// -----------
// Links
a {
@ -125,6 +126,7 @@ a {
.box-shadow(@shadow);
}
}
// Help Firefox not be a jerk about adding extra padding to buttons
button.btn,
input[type=submit].btn {

43
lib/tables.less
View File

@ -1,11 +1,11 @@
/*
* Tables.less
* Tables for, you guessed it, tabular data
*/
* ---------------------------------------- */
/* Baseline styles
-------------------------------------------------- */
// BASELINE STYLES
// ---------------
table {
width: 100%;
@ -28,8 +28,8 @@ table {
}
/* Zebra-striping
-------------------------------------------------- */
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
table.zebra-striped {
@ -41,8 +41,9 @@ table.zebra-striped {
background-color: #f5f5f5;
}
}
// Tablesorting styles w/ jQuery plugin
th.header { // For tablesorter tables, make THs have a pointer on hover
th.header {
cursor: pointer;
&:after {
width: 0px;
@ -61,13 +62,17 @@ table.zebra-striped {
.opacity(30);
}
}
// Style the sorted column headers (THs)
th.headerSortUp,
th.headerSortDown { // Style the sorted column headers (THs)
th.headerSortDown {
background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
.border-radius(3px 3px 0 0);
}
th.header:hover { // Style the ascending (reverse alphabetical) column header
// Style the ascending (reverse alphabetical) column header
th.header:hover {
&:after {
visibility:visible;
}
@ -75,14 +80,18 @@ table.zebra-striped {
th.actions:hover {
background-image: none;
}
// Style the descending (alphabetical) column header
th.headerSortDown,
th.headerSortDown:hover { // Style the descending (alphabetical) column header
th.headerSortDown:hover {
&:after {
visibility:visible;
.opacity(60);
}
}
th.headerSortUp { // Style the ascending (reverse alphabetical) column header
// Style the ascending (reverse alphabetical) column header
th.headerSortUp {
&:after {
border-bottom: none;
border-left: 4px solid transparent;
@ -93,6 +102,7 @@ table.zebra-striped {
.opacity(60);
}
}
// Blue Table Headings
th.blue {
color: @blue;
@ -101,6 +111,7 @@ table.zebra-striped {
th.headerSortUp.blue, th.headerSortDown.blue {
background-color: lighten(@blue, 40%);
}
// Green Table Headings
th.green {
color: @green;
@ -109,36 +120,40 @@ table.zebra-striped {
th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
background-color: lighten(@green, 40%);
}
// Red Table Headings
th.red {
color: @red;
border-bottom-color: @red;
}
th.headerSortUp.red, th.headerSortDown.red { // backround color is 20% of border color
th.headerSortUp.red, th.headerSortDown.red {
background-color: lighten(@red, 50%);
}
// Yellow Table Headings
th.yellow {
color: @yellow;
border-bottom-color: @yellow;
}
th.headerSortUp.yellow, th.headerSortDown.yellow { // backround color is 20% of border color
th.headerSortUp.yellow, th.headerSortDown.yellow {
background-color: lighten(@yellow, 40%);
}
// Orange Table Headings
th.orange {
color: @orange;
border-bottom-color: @orange;
}
th.headerSortUp.orange, th.headerSortDown.orange { // backround color is 20% of border color
th.headerSortUp.orange, th.headerSortDown.orange {
background-color: lighten(@orange, 40%);
}
// Purple Table Headings
th.purple {
color: @purple;
border-bottom-color: @purple;
}
th.headerSortUp.purple, th.headerSortDown.purple { // backround color is 20% of border color
th.headerSortUp.purple, th.headerSortDown.purple {
background-color: lighten(@purple, 40%);
}
}

10
lib/type.less
View File

@ -3,7 +3,7 @@
* ---------------------------------------------------------------------------------------- */
// Body text
// BODY TEXT
// ---------
p {
@ -15,7 +15,8 @@ p {
}
}
// Headings
// HEADINGS
// --------
h1, h2, h3, h4, h5, h6 {
@ -65,8 +66,7 @@ h6 {
}
// Colors
// COLORS
// ------
// Unordered and Ordered lists
@ -108,7 +108,7 @@ dl {
}
}
// Misc
// MISC
// ----
// Horizontal rules