Commit 6b2b8e56 authored by David Haynes's avatar David Haynes

Merge branch '4-bootstrap4-sass-only'

parents 0814e8aa 05729599
Pipeline #1062 passed with stage
in 58 seconds
{
"scripts": {
"postinstall": "cp -a ./bower_components/bootstrap/fonts ./"
}
}
......@@ -15,5 +15,13 @@ Session.vim
*~
# auto-generated tag files
tags
masonstrap/masonstrap.css
masonstrap/masonstrap.min.css
masonstrap/*.css
masonstrap/*.min.css
.idea
components
node_modules
build
_site
*.lock
.sass-cache/
bower_components
image: node:4.2.6
image: node:7.6.0
build_css:
before_script:
- npm install -g grunt-cli
- npm install
- npm install -g grunt-cli
- npm install -g bower
- apt-get update
- apt-get install ruby -y
- gem install sass
- bower install --allow-root
script:
- grunt swatch:masonstrap
artifacts:
paths:
- masonstrap/masonstrap.min.css
pages:
stage: deploy
script:
- mkdir .public
- cp index.html masonstrap/masonstrap.min.css assets/css/custom.min.css bower_components/bootstrap/dist/js/bootstrap.min.js assets/js/custom.js .public
- mv .public public
- grunt build
artifacts:
paths:
- public
only:
- master
- masonstrap/masonstrap.min.css
\ No newline at end of file
......@@ -9,3 +9,24 @@ _config.yml
bower.json
Gruntfile.js
*/index.html
2/
3/
assets/
bower_components/
custom/
default/
global/
help/
tests/
_config.yml
.bowerrc
.gitignore
.travis.yml
bower.json
CNAME
composer.json
favicon.ico
Gemfile
Gruntfile.js
index.html
*/index.html
This diff is collapsed.
The MIT License (MIT)
Copyright (c) 2016 SRCT
Copyright (c) 2017 SRCT
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
......@@ -2,11 +2,10 @@
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 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
<legend></legend>
# Adding Masonstrap to your project
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
......@@ -14,57 +13,63 @@ on your local machine. If you'd like just `masonstrap.min.css` head over to our
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
[https://git.gmu.edu/srct/masonstrap/builds/artifacts/master/download?job=build_css]()
Masonstrap bundles bootstrap 3.7 and normalize.css for you.
## Building Masonstrap
<legend></legend>
# Building Masonstrap
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 Ubuntu:
sudo apt update
sudo apt install nodejs
sudo apt install npm
On macOS, make sure you have [Homebrew](http://brew.sh) then `$ brew install node`
On macOS:
1. make sure you have [Homebrew](http://brew.sh)
2. `brew install node`
On Windows, download it [here](https://nodejs.org/en/download/).
2. In the root directory of this project run:
2. You will also need Sass which is distributed as a ruby gem:
On Ubuntu:
`$ npm install`
sudo apt update
sudo apt install ruby
sudo gem install sass
3. You will also need to have Grunt installed globally on your system:
3. In the root directory of this project run:
`$ npm install -g grunt-cli`
npm install
bower install
4. Finally, run:
`$ grunt swatch:masonstrap` to build masonstrap.css and masonstrap.min.css.
grunt build
### Stylesheet test webpage
to build the css files (`masonstrap.css` and `masonstrap.min.css`) in the `masonstrap/` directory.
Run:
# Local development
`grunt`
If you would like to run the demo site on your local machine run:
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.
grunt
## Making changes to Masonstrap
This will spin up a local server at [127.0.0.1:3000]().
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.
Any changes made to the `.scss` or `.html` files will trigger a rebuild of the css and livereload of the site.
## Making changes to Masonstrap
Icon
------
website by Stock Image Folio from the Noun Project
Masonstrap consists of two Sass files. `_variables.scss`, which is included by
default in Bootstrap, allows you to customize [these settings](http://getbootstrap.com/customize/#less-variables).
`_masonstrap.scss` introduces more extensive structural changes.
exclude: ["src", "node_modules", "bower.json", "bower_components/font-awesome/src", "package.json", "README.md", "Gruntfile.js"]
exclude: ["src", "node_modules", "bower.json", "bower_components/font-awesome/src", "composer.json", "package.json", "README.md", "LICENSE", "Gruntfile.js", "Gemfile"]
include: ["_bootswatch.scss","_variables.scss"]
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}}
body {
padding-top: 100px
}
body>.navbar {
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in
}
pre {
background: #f7f7f9
}
@media (min-width: 768px) {
body>.navbar-transparent {
background-color:transparent!important
}
body>.navbar-transparent .navbar-nav>.open>a {
background-color: transparent!important
}
}
#home {
padding-top: 0
}
#home .logo .nav-link {
display: inline-block;
margin-right: -30px
}
#home .logo img {
display: inline-block;
margin: 0 10px;
width: 20%
}
#banner {
min-height: 300px;
border-bottom: none
}
.table-of-contents {
margin-top: 1em
}
.bs-docs-section {
margin-top: 6em
}
.bs-docs-section .page-header h1 {
padding: 5rem 0 2rem;
font-size: 4em
}
.bs-component {
position: relative
}
.bs-component+.bs-component {
margin-top: 1rem
}
.bs-component .card {
margin-bottom: 1rem
}
.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: 3em 0
}
#footer li {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em
}
#footer p {
clear: left;
margin-bottom: 0
}
.section-tout {
padding: 5em 0 2em;
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 img {
max-width: 100%
}
.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%
}
}
@media (max-width: 767px) {
.splash {
padding-top:4em
}
.splash .logo {
width: 100px
}
.splash h1 {
font-size: 2em
}
#banner {
margin-bottom: 2em;
text-align: center
}
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 70px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -100%; /* 12 columns */
}
.row-offcanvas-right.active
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -100%; /* 12 columns */
}
.row-offcanvas-left.active
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
\ No newline at end of file
html {
background: url(../img/expl.jpg) no-repeat center fixed;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
body {
background: transparent !important;
}
html {
font-size: 14px;
}
body {
padding-top: 100px;
}
@include media-breakpoint-up(sm) {
html {
font-size: 16px;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 20px;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 28px;
}