Unverified Commit a9894d29 authored by David Haynes's avatar David Haynes
Browse files

Landing page added (rename index to demo)

- plus apparently "name" cannot include capitol letters dangit
parent 2e443741
Pipeline #1057 passed with stage
in 56 seconds
......@@ -35,7 +35,7 @@ module.exports = function (grunt) {
}
},
watch: {
files: ['*/_variables.scss', '*/_masonstrap.scss', 'index.html'],
files: ['*/_variables.scss', '*/_masonstrap.scss', 'index.html', 'demo.html'],
tasks: 'build',
options: {
livereload: true,
......
<!-- HTML5 definition -->
<!DOCTYPE html>
<html lang="en">
<!-- Header content -->
<head>
<!-- Metatags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Chrome on Android navbar color -->
<meta name="theme-color" content="#006633">
<!-- Opengraph tags -->
<meta property="og:url" content="http://srct.gmu.io/masonstrap/">
<meta property="og:type" content="website">
<meta property="og:title" content="SRCT Masonstrap">
<!--<meta property="og:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->
<meta property="og:description" content="Easily provide any web project with Mason branding.">
<meta property="og:site_name" content="SRCT Masonstrap">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="SRCT">
<!-- Twitter card tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@MasonSRCT">
<meta name="twitter:creator" content="@MasonSRCT">
<meta name="twitter:url" content="http://srct.gmu.io/masonstrap/">
<meta name="twitter:title" content="SRCT Masonstrap">
<meta name="twitter:description" content="Easily provide any web project with Mason branding.">
<!--<meta name="twitter:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->
<!-- Title -->
<title>Masonstrap 4.0</title>
<!-- Load in static content -->
<link rel="icon" href="assets/img/favicon.ico" sizes="16x16">
<link rel="stylesheet" href="masonstrap/masonstrap.css" media="screen">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<!-- Body content -->
<body>
<!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<!-- Responsive toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target=".dual-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Containter for main navbar content -->
<div class="container">
<!-- Brand logo + title -->
<a class="navbar-brand d-flex mx-auto" href="#">
<img src="assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
</a>
<!-- Elements that will be collapsed in responsive mode -->
<div class="navbar-collapse collapse dual-collapse">
<!-- Unordered list of elements -->
<ul class="navbar-nav mr-auto">
<!-- Example nav-item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- Example dropdown including links to source files -->
<li class="nav-item dropdown">
<!-- Dropdown for source files -->
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Source files<span class="caret"></span>
</a>
<!-- Rounded dropdown-menu -->
<div class="rounded dropdown-menu">
<!-- Example dropdown-item -->
<a class="dropdown-item" href="#">Open in JSFiddle (TODO)</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css" target="_blank">masonstrap.min.css
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.css" target="_blank">masonstrap.css
</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_variables.scss" target="_blank">_variables.scss
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss" target="_blank">_masonstrap.scss
</a>
</div>
</li>
</ul>
<!-- Unordered list of elements, with margin-left: auto -->
<ul class="navbar-nav ml-auto">
<!-- Example nav-item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- Example nav-item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Begin giant container for the entirety of the page content -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<br />
<h1>Masonstrap</h1>
<!-- dynamic version number -->
<h4 id="version"></h4>
<br />
<p class="lead">Easily provide any web project with Mason branding.</p>
<!-- Navbar
================================================== -->
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<!-- Header title -->
<div class="page-header">
<h1 id="navbars">Navbars
<hr />
</h1>
</div>
<div class="bs-component">
<!-- Example navbar 1 -->
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<div class="bs-component">
<!-- Example navbar 2 -->
<nav class="navbar navbar-toggleable-md navbar-inverse bg-classic">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarColor02" aria-controls="navbarColor02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Buttons ======================================================= -->
<div class="bs-docs-section">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1 id="buttons">Buttons
<hr />
</h1>
</div>
</div>
</div>
<p class="bs-component">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-secondary disabled">Secondary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</p>
<div class="bs-component">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop3">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
<div class="bs-component">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
<p class="bs-component">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</p>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Checkbox 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Checkbox 3
</label>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>
</div>
<div class="bs-component">
<div class="btn-group-vertical" data-toggle="buttons">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</div>
</div>
<!-- Typography ================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="typography">Typography
<hr />
</h1>
</div>
</div>
</div>
<!-- Headings -->
<div class="row">
<div class="col-lg-4">
<div class="bs-component">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3>
Heading
<small class="text-muted">with muted text</small>
</h3>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<h2>Example body text</h2>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu
leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following is <strong>rendered as bold text</strong>.</p>
<p>The following is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<h2>Emphasis classes</h2>
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
</div>
<!-- Blockquotes -->
<div class="row">
<div class="col-lg-12">
<h2 id="type-blockquotes">Blockquotes</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="bs-component">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="col-lg-6">
<div class="bs-component">
<blockquote class="blockquote blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>Display Sizing</h2>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="bs-component">
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
</div>
</div>
</div>
<!-- Tables ================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">Tables
<hr />
</h1>
</div>
<h3>Non Responsive Table</h3>
<div class="bs-component">
<table class="table table-striped table-hover table-bordered">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-active">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
<h3>Responsive Table</h3>
<div class="bs-component">
<table class="table table-responsive table-striped table-hover table-bordered">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>