Commit f5951f3a authored by Thomas Park's avatar Thomas Park

moved readme and swatchmaker to gh-pages branch

parent acb7ffef
This diff is collapsed.
Bootswatch
==========
Bootswatch is a collection of free themes for [Twitter Bootstrap](http://twitter.github.com/bootstrap/). Check it out at [bootswatch.com](http://bootswatch.com).
On GitHub, the source is located in the [gh-pages branch](https://github.com/thomaspark/bootswatch/tree/gh-pages).
Usage
-----
Head over to [Bootswatch](http://bootswatch.com) and download the `bootstrap.min.css` file associated with a theme.
In Bootstrap’s CSS directory, you’ll find a stylesheet in full (`bootstrap.css`) and minified (`bootstrap.min.css`) forms. Rename them or move them to a safe place, and replace with the downloaded file. If you ever change your mind, simply drop in another theme or switch back to the original.
For use with Rails, check out [bootswatch-rails](https://github.com/maxim/bootswatch-rails) (Sass) and [twitter-bootswatch-rails](https://github.com/scottvrosenthal/twitter-bootswatch-rails) (LESS).
Customization
------
Bootswatch is an open source project, and you’re welcome to modify the themes further. If you’re interested, fork or follow the GitHub repository. The files of interest are in the `gh-pages` branch.
Each raw theme consists of two LESS files. One is `variables.less`, which is included by default in Bootstrap and allows you to customize [these settings](http://twitter.github.com/bootstrap/less.html#variables). The other is called `bootswatch.less` and introduces more extensive structural changes.
Check out the README in the [swatchmaker directory](https://github.com/thomaspark/bootswatch/tree/master/swatchmaker) for step-by-step instructions on building your own swatch.
API
-----
A simple API is available for integrating your platform with Bootswatch.
The swatch objects are housed in an array called `themes`, and each swatch has the following properties: `name`, `description`, `preview`, `thumbnail`, `css`, `css-min`, `less`, and `less-variables`.
CORS and JSONP are supported. Send your request to `http://api.bootswatch.com`.
A simple demo, using mustache.js for templating: http://jsbin.com/asowud/1/edit
Feedback
------
Please send feedback to thomas@thomaspark.me. For more information, visit http://thomaspark.me/2012/02/introducing-bootswatch/.
Author
------
[Thomas Park](http://github.com/thomaspark)
+ http://thomaspark.me
Thanks
------
[Mark Otto](http://github.com/markdotto) and [Jacob Thornton](http://github.com/fat) for [Bootstrap](https://github.com/twitter/bootstrap).
[James Taylor](http://github.com/jostylr) for [cors-lite](https://github.com/jostylr/cors-lite).
[Zack Maril](http://github.com/zmaril) for [bootswatch/swatchmaker/watcher.rb](https://github.com/thomaspark/bootswatch/blob/master/swatchmaker/watcher.rb).
Copyright and License
----
Copyright 2012 Thomas Park
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
\ No newline at end of file
#
# BUILD BOOTSWATCH SWATCH
#
OUTPUT_PATH = swatch
bootswatch:
lessc swatchmaker.less > ${OUTPUT_PATH}/bootstrap.css
lessc --compress swatchmaker.less > ${OUTPUT_PATH}/bootstrap.min.css
lessc swatchmaker-responsive.less > ${OUTPUT_PATH}/bootstrap-responsive.css
lessc --compress swatchmaker-responsive.less > ${OUTPUT_PATH}/bootstrap-responsive.min.css
bootstrap:
-test -d bootstrap && rm -r bootstrap
curl --location -o latest_bootstrap.tar.gz https://github.com/twitter/bootstrap/tarball/master
tar -xvzf latest_bootstrap.tar.gz
mv twitter-bootstrap* bootstrap
rm latest_bootstrap.tar.gz
default:
-test -f swatch/variables.less && rm swatch/variables.less
-test -f swatch/bootswatch.less && rm swatch/bootswatch.less
curl --location -o swatch/variables.less https://raw.github.com/twitter/bootstrap/master/less/variables.less
curl --location -o swatch/bootswatch.less https://raw.github.com/thomaspark/bootswatch/master/swatchmaker/swatch/bootswatch.less
make bootswatch
.PHONY: bootswatch bootstrap default
Create your own swatch
======================
1. Download Bootstrap
------
Download and unpack [swatchmaker.zip](https://github.com/thomaspark/bootswatch/blob/master/swatchmaker/swatchmaker.zip?raw=true). In terminal, navigate to `swatchmaker/` and run the command `make bootstrap` to update to the latest version of Bootstrap.
2. Install LESS
------
If you haven't already, install LESS to your machine via NPM. More information on that here: http://lesscss.org/#-server-side-usage
3. Customize Bootstrap
------
Make your customizations to the two files found in the `swatch` directory, `variables.less` and `bootswatch.less`.
4. Build Customized Bootstrap
------
In the `swatchmaker` directory, run `make bootswatch`. The compiled CSS files will be created in the `swatch` directory.
You can run the watcher to automatically build Bootstrap whenever changes are saved with `ruby watcher.rb`. Requires `gem install directory_watcher`.
5. Reset Bootstrap
------
If you want to reset `variables.less` and `bootswatch.less` to defaults, run `make default`.
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
// Swatch 2.2.1
// Bootswatch
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
// SCAFFOLDING
// -----------------------------------------------------
// NAVBAR
// -----------------------------------------------------
// NAV
// -----------------------------------------------------
// BUTTONS
// -----------------------------------------------------
// TABLES
// -----------------------------------------------------
// FORMS
// -----------------------------------------------------
// DROPDOWNS
// -----------------------------------------------------
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
// MISC
// -----------------------------------------------------
// MEDIA QUERIES
// -----------------------------------------------------
// Swatch 2.2.1
// 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: @grayDark;
// Links
// -------------------------
@linkColor: #08c;
@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: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 1px 6px; // 24px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #bbb;
@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; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @dropdownLinkColor;
@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: #ffffff;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #777;
@navbarLinkColor: #777;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
@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);
@import "bootstrap/less/responsive.less";
@import "swatch/variables.less";
\ No newline at end of file
@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";
\ No newline at end of file
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
// Disable certain links in docs
// $('section [href^=#]').click(function (e) {
// e.preventDefault()
// })
// make code pretty
// window.prettyPrint && prettyPrint()
//
// // add-ons
// $('.add-on :checkbox').on('click', function () {
// var $this = $(this)
// , method = $this.attr('checked') ? 'addClass' : 'removeClass'
// $(this).parents('.add-on')[method]('active')
// })
// position static twipsies for components page
// if ($(".twipsies a").length) {
// $(window).on('load resize', function () {
// $(".twipsies a").each(function () {
// $(this)
// .tooltip({
// placement: $(this).attr('title')
// , trigger: 'manual'
// })
// .tooltip('show')
// })
// })
// }
// add tipsies to grid for scaffolding
// if ($('#grid-system').length) {
// $('#grid-system').tooltip({
// selector: '.show-grid > div'
// , title: function () { return $(this).width() + 'px' }
// })
// }
// fix sub nav on scroll
var $win = $(window)
, $nav = $('.subnav')
, navHeight = $('.navbar').first().height()
, navTop = $('.subnav').length && $('.subnav').offset().top - navHeight
, isFixed = 0
processScroll()
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
}
}
// tooltip demo
// $('.tooltip-demo.well').tooltip({
// selector: "a[rel=tooltip]"
// })
//
// $('.tooltip-test').tooltip()
// $('.popover-test').popover()
// popover demo
// $("a[rel=popover]")
// .popover()
// .click(function(e) {
// e.preventDefault()
// })
// button state demo
// $('#fat-btn')
// .click(function () {
// var btn = $(this)
// btn.button('loading')
// setTimeout(function () {
// btn.button('reset')
// }, 3000)
// })
// carousel demo
// $('#myCarousel').carousel()
// javascript build logic
// var inputsComponent = $("#components.download input")
// , inputsPlugin = $("#plugins.download input")
// , inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
// $('#components.download .toggle-all').on('click', function (e) {
// e.preventDefault()
// inputsComponent.attr('checked', !inputsComponent.is(':checked'))
// })
//
// $('#plugins.download .toggle-all').on('click', function (e) {
// e.preventDefault()
// inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
// })
//
// $('#variables.download .toggle-all').on('click', function (e) {
// e.preventDefault()
// inputsVariables.val('')
// })
// request built javascript
// $('.download-btn').on('click', function () {
//
// var css = $("#components.download input:checked")
// .map(function () { return this.value })
// .toArray()
// , js = $("#plugins.download input:checked")
// .map(function () { return this.value })
// .toArray()
// , vars = {}
// , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
//
// $("#variables.download input")
// .each(function () {
// $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
// })
//
// $.ajax({
// type: 'POST'
// , url: 'http://bootstrap.herokuapp.com'
// , dataType: 'jsonpi'
// , params: {
// js: js
// , css: css
// , vars: vars
// , img: img
// }
// })
// })
//
// })
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
// $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
// var url = opts.url;
//
// return {
// send: function(_, completeCallback) {
// var name = 'jQuery_iframe_' + jQuery.now()
// , iframe, form
//
// iframe = $('<iframe>')
// .attr('name', name)
// .appendTo('head')
//
// form = $('<form>')
// .attr('method', opts.type) // GET or POST
// .attr('action', url)
// .attr('target', name)
//
// $.each(opts.params, function(k, v) {
//
// $('<input>')
// .attr('type', 'hidden')
// .attr('name', k)
// .attr('value', typeof v == 'string' ? v : JSON.stringify(v))
// .appendTo(form)
// })
//
// form.appendTo('body').submit()
// }
// }
})
}(window.jQuery)
\ No newline at end of file
/* Add additional stylesheets below
-------------------------------------------------- */
/*
Bootstrap's documentation styles
Special styles for presenting Bootstrap's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
body {
position: relative;
padding-top: 90px;
/* background-color: #fff;
background-image: url(../img/grid-18px-masked.png);*/
/*background-repeat: repeat-x;*/
background-position: 0 40px;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
position: relative;
}
.jumbotron h1 {
margin-bottom: 9px;
font-size: 81px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
}
.jumbotron p {
margin-bottom: 18px;
font-weight: 300;
}
.jumbotron .btn-large {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
margin-right: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.jumbotron .btn-large small {
font-size: 14px;
}
/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
.subhead {
padding-bottom: 0;
margin-bottom: 9px;
}
.subhead h1 {
font-size: 54px;
}
/* Subnav */
.subnav {
width: 100%;
height: 36px;
background-color: #eeeeee; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}