-
Notifications
You must be signed in to change notification settings - Fork 42
/
Copy pathindex.html
106 lines (80 loc) · 7.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html>
<head>
<title>Themestrap Sample - A Bootstrap 3 Theme</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<h1 class="page-header"> Themestrap Sample
<small>(0.0.1)</small>
</h1>
<p class="lead">A theme for <a href="http://www.getbootstrap.com/">Bootstrap 3</a> by <b>Your Name</b></p>
<div class="list-group">
<a class="list-group-item" href="https://github.com/divshot/themestrap">View on GitHub</a>
<a class="list-group-item" href="examples/kitchen-sink.html">View "Kitchen Sink" Example</a>
</div>
<div class='panel panel-default text-left'>
<div class="panel-heading">
<h3>Quick Install</h3>
</div>
<div class="panel-body">
<p>Download the <a href="dist/css/bootstrap.css" download>bootstrap.css</a> or <a href="dist/css/bootstrap.min.css" download>bootstrap.min.css</a> files or install using Bower:</p>
<pre>bower install https://github.com/divshot/themestrap#master</pre>
</div>
</div>
<div class='panel panel-default text-left'>
<div class="panel-heading">
<h3>README</h3>
</div>
<div class="panel-body">
<h1>Themestrap</h1>
<p><strong>Themestrap</strong> 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.</p>
<h2>Themestrap's Philosophy</h2>
<ol>
<li>A theme should be built <em>on top</em> of the framework, with as little intrusive change as possible.</li>
<li>As the framework evolves, a theme should be easily updated to the latest version.</li>
</ol>
<p>To this end, Themestrap provides you with two simple files to modify: <strong>variables.less</strong> and <strong>theme.less</strong> (both in the <code>less</code> directory). You can tweak any and all of the Bootstrap variables in <strong>variables.less</strong> and support any additional code or classes you'd like in <strong>theme.less</strong>. The compiled theme CSS includes the Bootstrap library and will automatically pick up any overrides from variables.</p>
<h2>Creating a Theme with Themestrap</h2>
<p>To create a theme, first start by cloning the Themestrap repository into a directory named for your theme. We recommend a <code>bootstrap-theme-THEME_NAME</code> naming scheme:</p>
<pre><code>git clone https://github.com/divshot/themestrap.git bootstrap-theme-THEME_NAME</code></pre>
<p>Next, you should open <code>bower.json</code> and change the package name from <code>bootstrap-theme-themestrap</code> to match what you want your theme to be named. Now you're ready to install dependencies using <a href="http://gruntjs.com">Grunt</a> and <a href="https://github.com/bower/bower">Bower</a> (you must have these installed).</p>
<pre><code>npm install<br>bower install</code></pre>
<p>Now you're ready to go! Simply edit <code>less/variables.less</code> and <code>less/theme.less</code> to your liking. When you're ready, just run <code>grunt</code> and it will compile and minify the distribution for you. You can also run <code>grunt watch</code> to automatically compile as you work.</p>
<h2>Testing Out Your Theme</h2>
<p>We've provided a "Bootstrap Kitchen Sink" HTML file at <code>examples/kitchen-sink.html</code> 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.</p>
<p>You can start a development server at <code>http://localhost:8000</code> by running <code>grunt serve</code>. Your theme will automatically compile while the server is running.</p>
<h2>Deeper Customization</h2>
<p>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 <code>less</code> directory into your theme's <code>less</code> directory and then modifying it as necessary. Example:</p>
<pre><code>cp bower_components/bootstrap/less/alerts.less less/alerts.less</code></pre>
<p>Because it takes path priority over the Bower-installed Bootstrap LESS, it will automatically override the Bootstrap default. In fact, this is how <code>variables.less</code> works already...delete it and the default Bootstrap variables will be back in play.</p>
<h2>Releasing Your Theme</h2>
<p>Before you release your theme, you should do a few things:</p>
<ol>
<li>Make sure that you've updated the package name in <code>bower.json</code> and filled out your name, the theme name and GitHub repo info</li>
<li>Check the <code>index.html</code> file – it is generated using the information you supplied in <code>bower.json</code>. To change it to suit your needs, edit the template <code>/pages/index.html</code>.</li>
<li>Update the <code>README.md</code> file to be about your theme</li>
</ol>
<p>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 <code>gh-pages</code> branch you should have a nice way to show off your theme!</p>
<p>Also consider <a href="https://github.com/bower/bower#registering-packages">registering a Bower package</a>. If you do, remove the <code>"private": true</code> property from <code>bower.json</code>.</p>
<h2>The Themestrap Gallery</h2>
<p>We've created a <a href="http://code.divshot.com/themestrap">gallery of themes built with Themestrap</a>. If you have created a theme and want to add it to the gallery, just make a pull request to the <a href="https://github.com/divshot/themestrap/tree/gh-pages">gh-pages</a> branch of this repository.</p>
<h2>Copyright and License</h2>
<p>Copyright 2013 Divshot, Inc. under <a href="LICENSE">the Apache 2.0 license</a>.</p>
</div>
</div>
<footer>
<p><a href="https://twitter.com/share" class="twitter-share-button" data-via="divshot" data-size="large">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></p>
<p class="text-muted" style="margin-top: 100px;"><small>A <a href="https://github.com/divshot/themestrap" target="_blank">Themestrap</a> theme. Copyright © 2013 Divshot, Inc. Some rights reserved.</small></p>
</footer>
</div>
</div>
</div>
</body>
</html>