• Stars
    star
    215
  • Rank 183,925 (Top 4 %)
  • Language
    CSS
  • License
    Apache License 2.0
  • Created over 11 years ago
  • Updated about 11 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A simple starter kit for constructing Twitter Bootstrap 3+ themes.

Themestrap

Themestrap is a simple starter kit for constructing Twitter Bootstrap 3+ themes. It provides the skeleton for a simple, maintainable theme that always uses code directly from Bootstrap with as little replacement as possible.

Themestrap's Philosophy

  1. A theme should be built on top of the framework, with as little intrusive change as possible.
  2. As the framework evolves, a theme should be easily updated to the latest version.

To this end, Themestrap provides you with two simple files to modify: variables.less and theme.less (both in the less directory). You can tweak any and all of the Bootstrap variables in variables.less and support any additional code or classes you'd like in theme.less. The compiled theme CSS includes the Bootstrap library and will automatically pick up any overrides from variables.

Creating a Theme with Themestrap

To create a theme, first start by cloning the Themestrap repository into a directory named for your theme. We recommend a bootstrap-theme-THEME_NAME naming scheme:

git clone https://github.com/divshot/themestrap.git bootstrap-theme-THEME_NAME

Next, you should open bower.json and change the package name from bootstrap-theme-themestrap to match what you want your theme to be named. Now you're ready to install dependencies using Grunt and Bower (you must have these installed).

npm install
bower install

Now you're ready to go! Simply edit less/variables.less and less/theme.less to your liking. When you're ready, just run grunt and it will compile and minify the distribution for you. You can also run grunt watch to automatically compile as you work.

Testing Out Your Theme

We've provided a "Bootstrap Kitchen Sink" HTML file at examples/kitchen-sink.html that contains all of the various components in all of their variations. It may not be 100% exhaustive but it should give you a good idea of what your theme will look like at a glance.

You can start a development server at http://localhost:8000 by running grunt serve. Your theme will automatically compile while the server is running.

Deeper Customization

In cases where you need to do a more in-depth overhaul of a portion of Bootstrap's LESS, you may do so by simply copying over a file from Bootstrap's less directory into your theme's less directory and then modifying it as necessary. Example:

cp bower_components/bootstrap/less/alerts.less less/alerts.less

Because it takes path priority over the Bower-installed Bootstrap LESS, it will automatically override the Bootstrap default. In fact, this is how variables.less works already...delete it and the default Bootstrap variables will be back in play.

Releasing Your Theme

Before you release your theme, you should do a few things:

  1. Make sure that you've updated the package name in bower.json and filled out your name, the theme name and GitHub repo info
  2. Check the index.html file – it is generated using the information you supplied in bower.json. To change it to suit your needs, edit the template /pages/index.html.
  3. Update the README.md file to be about your theme

Once you've done that, you should push it up to GitHub. The repository is already designed to be released directly onto GitHub Pages without an additional intermediary, so if you push to the gh-pages branch you should have a nice way to show off your theme!

Also consider registering a Bower package. If you do, remove the "private": true property from bower.json.

The Themestrap Gallery

We've created a gallery of themes built with Themestrap. If you have created a theme and want to add it to the gallery, just make a pull request to the gh-pages branch of this repository.

Copyright and license

Copyright 2013 Divshot, Inc. under the Apache 2.0 license.

More Repositories

1

geo-bootstrap

A timeless Twitter Bootstrap theme built for the modern web.
HTML
2,085
star
2

bootstrap-theme-white-plum

A clean theme for Bootstrap 3 based on Themestrap.
CSS
73
star
3

bootstrap3_upgrader

A web-based utility to help you upgrade your HTML from Bootstrap 2.3 to Bootstrap 3
JavaScript
63
star
4

polymer-firebase-qa

Example Q&A realtime app powered by Polymer and Firebase.
ApacheConf
58
star
5

ele-web

Ele, the in-browser development environment for Web Components.
CSS
42
star
6

alloy

A web API for CSS preprocessors. Supports SASS, SCSS, LessCSS, and Stylus.
Ruby
41
star
7

polymerfire

A Polymer 0.8 mixin for two-way databinding with Firebase
JavaScript
29
star
8

tweetscroller

A pseudo-infinite tweet scroller that automatically refreshes a collection of your favorite tweets!
JavaScript
27
star
9

docs

Divshot's user documentation site.
HTML
25
star
10

markie

A simple Markdown editor built with AngularJS.
CSS
24
star
11

divshot-cli

Command line interface to Divshot.
JavaScript
21
star
12

buffered_undo_manager

CoffeeScript
21
star
13

sortable-list

A sortable list Web Component utilizing the Sortable.js library.
HTML
20
star
14

bootstrap-theme-cirrus

A light, modern theme for Bootstrap 3 based on Themestrap and Revision.io.
CSS
18
star
15

superstatic-proxy

A Superstatic service for HTTP proxying of AJAX requests.
JavaScript
17
star
16

quick-deck

A fast, Markdown based boilerplate for putting together Reveal.js decks.
Handlebars
15
star
17

node-unzip-to-s3

Unzip files directly to Amazon S3 using streams.
JavaScript
13
star
18

yay

Generate random, ridiculous names for anything. Yay!
JavaScript
11
star
19

firebase-rpc

An RPC server/client utilizing Firebase as the transport.
JavaScript
10
star
20

disqus-comments

Web component for comments powered by Disqus.
HTML
10
star
21

grunt-divshot

Deploy to Divshot.io using Grunt
JavaScript
9
star
22

scouter

CSS selector specificity utility. Calculate specificity scores with ease.
JavaScript
9
star
23

superstatic-forms

A simple service for capturing submitted forms via email.
JavaScript
8
star
24

uifiddle

A playground for generating the HTML for UI components.
JavaScript
7
star
25

pvc-globals

A Polymer element for keeping track of document-global information.
HTML
7
star
26

cam-snap

Web Component for taking a quick selfie with your webcam.
HTML
6
star
27

clean-urls

Express/Connect middleware to serve static files from cleaner, extensionless urls
JavaScript
6
star
28

firebase-list

A Web Component for managing list-like data in Firebase
5
star
29

gitling

A smart HTTP git server with flexible external authorization via HTTP.
Go
5
star
30

superstatic-prerender

A prerendering service to allow static AJAX apps to get proper search engine juice.
JavaScript
5
star
31

divshot-api

Wrapper for the Divshot API
JavaScript
5
star
32

divshot-push

Deploy files to the Divshot hosting platform.
JavaScript
4
star
33

ask

A simple, chainable way to construct HTTP requests in Node or the browser.
JavaScript
4
star
34

divshot-upload

Upload app files to Divshot
JavaScript
4
star
35

markdeck

Transform Markdown into presentation-friendly HTML.
JavaScript
4
star
36

authmail

An open source microservice for no-password authentication.
Ruby
4
star
37

ele-api

Back-end API for Ele, the in-browser Web Components editor.
JavaScript
3
star
38

rack-tumblr

A middleware to mount Tumblr blogs into a Rack application.
Ruby
3
star
39

dapper

A presentation framework built with Web Components
JavaScript
3
star
40

redirects

Express/Connect middleware for segment-able url redirects
JavaScript
3
star
41

deposit

Inject dynamic resources into your html pages
JavaScript
2
star
42

cache-control

Express/Connect middleware to set url cache options with globs
JavaScript
2
star
43

superstatic-lander

The official Superstatic website
JavaScript
2
star
44

static-router

Express/Connect middleware to server static files based on glob-like routes.
JavaScript
2
star
45

pvc-spinner

A Polymer element for loading spinners and indicators.
CSS
2
star
46

boast.js

A simple way to showcase Twitter buzz about your site.
2
star
47

giphy-search

Search the Giphy engine for a sweet gif.
HTML
1
star
48

keen-query

A Web Components way to query and visualize data from the Keen API
HTML
1
star
49

divshot-env

Web Component for reading Divshot JS environment variables.
1
star
50

slashify

Express/Connect middleware to handle trailing slashes with options
JavaScript
1
star
51

impress.css

The missing half of the presentation framework Impress.js. A powerful CSS framework built with Sass for rapid slide design.
1
star
52

divshot-support

Support interface utilities for Divshot.
CSS
1
star
53

git-hosting-example

An example of Docker-powered git hosting in the style of GitHub/Heroku.
Shell
1
star
54

style_reactor.js

Compile LESS and Stylus in a Web Worker.
HTML
1
star
55

set-headers

Express/Connect middleware to set response headers based on globs
JavaScript
1
star
56

divshot.github.io

1
star
57

auth_scope

A Ruby library for parsing and using authorization scope strings.
Ruby
1
star
58

broker

Express/Connect middleware that serves local or remote static files.
JavaScript
1
star
59

mongomapper-archive

A MongoMapper plugin for soft deletion by archiving records to a second collection.
Ruby
1
star
60

wdws

Working Directory Web Service
JavaScript
1
star
61

swipe-able

UI element that can be acted upon by swiping left and right.
HTML
1
star
62

ducksboard-travis

Ruby
1
star
63

deposit-fetch

Deposit injector to fetch remote content
JavaScript
1
star
64

not-found

Express/Connect middleware to serve a default not found/404 page.
JavaScript
1
star
65

divshot-employee-map

A small example project showing how to wrap the google maps api in custom polymer elements.
1
star