Commit 8be35011 authored by David Haynes's avatar David Haynes

More cleanup of bootswatch junk, README tweaks

- man this repo is quite the beast
parent 1bf5aa86
Pipeline #946 passed with stage
in 28 seconds
......@@ -2,7 +2,7 @@
A project of [GMU SRCT](http://srct.gmu.edu).
Masonstrap is a custom theme for bootstrap customized with GMU brand colors and
Masonstrap is a custom theme for bootstrap customized with GMU brand colors and
elements. It aims to easily provide any web project with Mason branding.
## Enabling Masonstrap for Your Project
......@@ -10,60 +10,56 @@ elements. It aims to easily provide any web project with Mason branding.
This repo contains all of the necessary components to build and modify masonstrap
on your local machine. If you'd like just `masonstrap.min.css` head over to our
[pipelines page](https://git.gmu.edu/srct/masonstrap/pipelines) and download the
[pipelines page](https://git.gmu.edu/srct/masonstrap/pipelines) and download the
latest build of the css.
Additionally this link should grab you the latest css build:
https://git.gmu.edu/srct/masonstrap/builds/artifacts/master/download?job=build_css
Masonstrap bundles bootstrap 3.0 and normalize.css for you.
Masonstrap bundles bootstrap 3.7 and normalize.css for you.
## Building Masonstrap
<legend></legend>
If you would like to make changes to values or behaviors in Masonstrap you will
If you would like to make changes to values or behaviors in Masonstrap you will
need to do some quick setup.
1. Ensure node.js is installed:
On Ubuntu: `$ sudo apt-get install npm`
On macOS, make sure you have [Homebrew](http://brew.sh) then `$ brew install node`
On Windows, download it [here](https://nodejs.org/en/download/).
2. In the root directory of this project run:
2. In the root directory of this project run:
`$ npm install`
3. You will also need to have Grunt installed globally on your system:
3. You will also need to have Grunt installed globally on your system:
`$ npm install -g grunt-cli`
4. Finally, run:
`$ grunt swatch:masonstrap` to have masonstrap.css and masonstrap.min.css built.
`$ grunt swatch:masonstrap` to build masonstrap.css and masonstrap.min.css.
### Stylesheet test webpage
Run:
`grunt`
to spin up a local server at [http://0.0.0.0:3000](http://0.0.0.0:3000) that
will host a test webpage displaying all of the masonstrap elements styled with
your locally built css files.
to spin up a local server at [http://0.0.0.0:3000](http://0.0.0.0:3000) that
will host a test webpage displaying all of the masonstrap elements styled with
your locally built css files. It will also rebuild masonstrap when it detects
that changes have been made and livereload the page for you.
## Making changes to Masonstrap
After that, you are free to make whatever changes you like to the css files in masonstrap/
and the css will be updated accordingly when `grunt swatch:masonstrap` is run. Additionally,
`grunt watch` can be run to have grunt watch masonstrap/ for any changes and auto-build
masonstrap.
Masonstrap consists of two LESS files. `variables.less`, which is included by default
in Bootstrap, allows you to customize [these settings](http://getbootstrap.com/customize/#less-variables).
Masonstrap consists of two LESS files. `variables.less`, which is included by
default in Bootstrap, allows you to customize [these settings](http://getbootstrap.com/customize/#less-variables).
`bootswatch.less` introduces more extensive structural changes.
These files are also available in SASS.
......
body{padding-top:50px}body>.navbar{-webkit-transition:background-color .3s ease-in;transition:background-color .3s ease-in}@media (min-width:768px){body>.navbar-transparent{background-color:transparent}body>.navbar-transparent .navbar-nav>.open>a{background-color:transparent!important}}#home{padding-top:0}#home .navbar-brand{padding:13.5px 15px 12.5px}#home .navbar-brand>img{display:inline;margin:0 10px;height:100%}#banner{min-height:300px;border-bottom:none}.table-of-contents{margin-top:1em}.page-header h1{font-size:4em}.bs-docs-section{margin-top:6em}.bs-docs-section h1{padding-top:100px}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:700}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:9em 0 2em;background-color:#141d27;background-image:url(../img/bg.jpg);background-size:cover;background-attachment:fixed;color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width:767px){.splash{padding-top:4em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
\ No newline at end of file
body{padding-top:50px}body>.navbar{-webkit-transition:background-color .3s ease-in;transition:background-color .3s ease-in}@media (min-width:768px){body>.navbar-transparent{background-color:transparent}body>.navbar-transparent .navbar-nav>.open>a{background-color:transparent!important}}#home{padding-top:0}#home .navbar-brand{padding:13.5px 15px 12.5px}#home .navbar-brand>img{display:inline;margin:0 10px;height:100%}#banner{min-height:300px;border-bottom:none}.table-of-contents{margin-top:1em}.page-header h1{font-size:4em}.bs-docs-section{margin-top:6em}.bs-docs-section h1{padding-top:100px}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:700}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:9em 0 2em;background-color:#141d27;background-image:url(../img/bg.jpg);background-size:cover;background-attachment:fixed;color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width:767px){.splash{padding-top:4em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
\ No newline at end of file
body {
padding-top: 50px;
> .navbar {
-webkit-transition: background-color 300ms ease-in;
transition: background-color 300ms ease-in;
}
}
@media (min-width: 768px) {
body {
> .navbar-transparent {
background-color: transparent;
.navbar-nav > .open > a {
background-color: transparent !important;
}
}
}
}
#home {
padding-top: 0px;
.navbar-brand {
padding: 13.5px 15px 12.5px;
> img {
display: inline;
margin: 0 10px;
height: 100%;
}
}
}
#banner {
min-height: 300px;
border-bottom: none;
}
.table-of-contents {
margin-top: 1em;
}
.page-header {
h1 {
font-size: 4em;
}
}
.bs-docs-section {
margin-top: 6em;
h1 {
padding-top: 100px;
}
}
.bs-component {
position: relative;
.modal {
position: relative;
top: auto;
right: auto;
left: auto;
bottom: auto;
z-index: 1;
display: block;
&-dialog {
width: 90%;
}
}
.popover {
position: relative;
display: inline-block;
width: 220px;
margin: 20px;
}
}
#source-button {
position: absolute;
top: 0;
right: 0;
z-index: 100;
font-weight: bold;
}
.nav-tabs {
margin-bottom: 15px;
}
.progress {
margin-bottom: 10px;
}
footer {
margin: 5em 0;
li {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
}
p {
clear: left;
margin-bottom: 0;
}
}
.splash {
padding: 9em 0 2em;
background-color: #141d27;
background-image: url(../img/bg.jpg);
background-size: cover;
background-attachment: fixed;
color: #fff;
text-align: center;
.logo {
width: 160px;
}
h1 {
font-size: 3em;
}
#social {
margin: 2em 0;
}
.alert {
margin: 2em 0;
}
}
.section-tout {
padding: 4em 0 3em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background-color: #eaf1f1;
.fa {
margin-right: 0.5em;
}
p {
margin-bottom: 3em;
}
}
.section-preview {
padding: 4em 0 4em;
.preview {
margin-bottom: 4em;
background-color: #eaf1f1;
.image {
position: relative;
}
.image:before {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
pointer-events: none;
}
.options {
padding: 1em 2em 2em;
border: 1px solid rgba(0, 0, 0, 0.05);
border-top: none;
text-align: center;
p {
margin-bottom: 2em;
}
}
}
.dropdown-menu {
text-align: left;
}
.lead {
margin-bottom: 2em;
}
@media (max-width: 767px) {
.image img {
width: 100%;
}
}
}
.sponsor {
#carbonads {
max-width: 240px;
margin: 0 auto;
}
.carbon-text {
display: block;
margin-top: 1em;
font-size: 12px;
}
.carbon-poweredby {
float: right;
margin-top: 1em;
font-size: 10px;
}
}
@media (max-width: 767px) {
.splash {
padding-top: 4em;
.logo {
width: 100px;
}
h1 {
font-size: 2em;
}
}
#banner {
margin-bottom: 2em;
text-align: center
}
}
\ No newline at end of file
......@@ -519,7 +519,7 @@
<td>Column content</td>
</tr>
</tbody>
</table>
</table>
</div><!-- /example -->
</div>
</div>
......@@ -1252,16 +1252,7 @@
<ul class="list-unstyled">
<li class="pull-right"><a href="#top">Back to top</a></li>
<li><a href="">Blog</a></li>
<li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
<li><a href="https://twitter.com/bootswatch">Twitter</a></li>
<li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
<li><a href="">API</a></li>
<li><a href="">Support</a></li>
</ul>
<p>Made by <a href="http://thomaspark.co" rel="nofollow">Thomas Park</a>. Contact him at <a href="mailto:thomas@bootswatch.com">thomas@bootswatch.com</a>.</p>
<p>Code released under the <a href="https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE">MIT License</a>.</p>
<p>Based on <a href="http://getbootstrap.com" rel="nofollow">Bootstrap</a>. Icons from <a href="http://fortawesome.github.io/Font-Awesome/" rel="nofollow">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts" rel="nofollow">Google</a>.</p>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment