Commit f6a9b994 authored by David Haynes's avatar David Haynes 🙆

Parity with prod, navbar, etc.

parent 952c687f
Pipeline #1595 passed with stages
in 1 minute and 21 seconds
......@@ -16,7 +16,7 @@ const dest = './build'
// Move fonts to build/fonts
gulp.task('fonts', () => gulp.src('./node_modules/font-awesome/fonts/fontawesome-webfont.woff2').pipe(connect.reload())
.pipe(gulp.dest(dest + '/fonts/'))
.pipe(gulp.dest(dest + '/masonstrap/fonts/'))
);
// Move html to build/html
......@@ -27,22 +27,22 @@ gulp.task('html', () => gulp.src(src + '/html/*.html').pipe(connect.reload())
// Optimize images and move them to build/img
gulp.task('img', () => gulp.src(src + '/img/*').pipe(connect.reload())
.pipe(imagemin())
.pipe(gulp.dest(dest + '/img/'))
.pipe(gulp.dest(dest + '/masonstrap/img/'))
);
// Move required js files to build/js
gulp.task('js', () => {
let bootstrap = gulp.src('./node_modules/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest(dest + '/js/'))
.pipe(gulp.dest(dest + '/masonstrap/js/'))
let jquery = gulp.src('./node_modules/jquery/dist/jquery.min.js')
.pipe(gulp.dest(dest + '/js/'))
.pipe(gulp.dest(dest + '/masonstrap/js/'))
let popper = gulp.src('./node_modules/popper.js/dist/umd/popper.min.js')
.pipe(gulp.dest(dest + '/js/'))
.pipe(gulp.dest(dest + '/masonstrap/js/'))
let masonstrap = gulp.src(src + '/js/*.js')
.pipe(gulp.dest(dest + '/js/'))
.pipe(gulp.dest(dest + '/masonstrap/js/'))
return merge(bootstrap, jquery, popper, masonstrap).pipe(connect.reload())
});
......@@ -56,7 +56,7 @@ gulp.task('sass', () => gulp.src(src + '/scss/*.scss').pipe(connect.reload())
.pipe(gulp.dest(dest + '/css/'))
.pipe(uglifycss())
.pipe(rename({extname: ".min.css"}))
.pipe(gulp.dest(dest + '/css/')
.pipe(gulp.dest(dest + '/masonstrap/css/')
));
// Run task whenever associated files change
......
......@@ -31,20 +31,49 @@
<title>Masonstrap 4 &bull; Home</title>
<!-- Load in static content -->
<link rel="icon" href="/img/favicon.ico" sizes="16x16">
<link rel="stylesheet" href="/css/masonstrap.min.css" media="screen">
<link rel="icon" href="/masonstrap/img/favicon.ico" sizes="16x16">
<link rel="stylesheet" href="/masonstrap/css/masonstrap.min.css" media="screen">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
</body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand d-flex mx-auto" href="#">
<img src="/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top" alt="SRCT Masonstrap">
&nbsp;Masonstrap
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Demo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Source Files
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<button class="btn btn-outline-accent my-2 my-sm-0" type="submit">Download</button>
</div>
</nav>
<footer>
</footer>
<!-- load in external js -->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/masonstrap/js/jquery.min.js"></script>
<script src="/masonstrap/js/popper.min.js"></script>
<script src="/masonstrap/js/bootstrap.min.js"></script>
</html>
\ No newline at end of file
// Masonstrap 4.0 Components
\ No newline at end of file
......@@ -53,9 +53,10 @@ $universal-palette: (
/*
The neutral palette can stand alone or be used to complement any of
the other color palettes. A neutral tone is also a great bridge to drop between two colors from one of
the other palettes. Using two strong colors from one of the other palettes
with a neutral gives you flexibility without color overload.
the other color palettes. A neutral tone is also a great bridge to drop
between two colors from one of the other palettes. Using two strong colors
from one of the other palettes with a neutral gives you flexibility without
color overload.
*/
$neutral-palette: (
light-gray: #D1D3D5,
......@@ -78,3 +79,68 @@ $neutral-palette: (
@warn "Unknown `#{$key}` in $neutral-palette.";
@return null;
}
// Bootstrap Color Overrides ---------------------------------------------------
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$grays: (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
);
$blue: #007bff;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: $gray-600,
gray-dark: $gray-800
);
$theme-colors: (
primary: get-primary-palette('mason-green'),
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800,
accent: get-primary-palette('mason-gold')
);
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