Verified Commit f6a9b994 authored by David Haynes's avatar David Haynes 🙆
Browse files

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' ...@@ -16,7 +16,7 @@ const dest = './build'
// Move fonts to build/fonts // Move fonts to build/fonts
gulp.task('fonts', () => gulp.src('./node_modules/font-awesome/fonts/fontawesome-webfont.woff2').pipe(connect.reload()) 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 // Move html to build/html
...@@ -27,22 +27,22 @@ gulp.task('html', () => gulp.src(src + '/html/*.html').pipe(connect.reload()) ...@@ -27,22 +27,22 @@ gulp.task('html', () => gulp.src(src + '/html/*.html').pipe(connect.reload())
// Optimize images and move them to build/img // Optimize images and move them to build/img
gulp.task('img', () => gulp.src(src + '/img/*').pipe(connect.reload()) gulp.task('img', () => gulp.src(src + '/img/*').pipe(connect.reload())
.pipe(imagemin()) .pipe(imagemin())
.pipe(gulp.dest(dest + '/img/')) .pipe(gulp.dest(dest + '/masonstrap/img/'))
); );
// Move required js files to build/js // Move required js files to build/js
gulp.task('js', () => { gulp.task('js', () => {
let bootstrap = gulp.src('./node_modules/bootstrap/dist/js/bootstrap.min.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') 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') 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') 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()) return merge(bootstrap, jquery, popper, masonstrap).pipe(connect.reload())
}); });
...@@ -56,7 +56,7 @@ gulp.task('sass', () => gulp.src(src + '/scss/*.scss').pipe(connect.reload()) ...@@ -56,7 +56,7 @@ gulp.task('sass', () => gulp.src(src + '/scss/*.scss').pipe(connect.reload())
.pipe(gulp.dest(dest + '/css/')) .pipe(gulp.dest(dest + '/css/'))
.pipe(uglifycss()) .pipe(uglifycss())
.pipe(rename({extname: ".min.css"})) .pipe(rename({extname: ".min.css"}))
.pipe(gulp.dest(dest + '/css/') .pipe(gulp.dest(dest + '/masonstrap/css/')
)); ));
// Run task whenever associated files change // Run task whenever associated files change
......
...@@ -31,20 +31,49 @@ ...@@ -31,20 +31,49 @@
<title>Masonstrap 4 &bull; Home</title> <title>Masonstrap 4 &bull; Home</title>
<!-- Load in static content --> <!-- Load in static content -->
<link rel="icon" href="/img/favicon.ico" sizes="16x16"> <link rel="icon" href="/masonstrap/img/favicon.ico" sizes="16x16">
<link rel="stylesheet" href="/css/masonstrap.min.css" media="screen"> <link rel="stylesheet" href="/masonstrap/css/masonstrap.min.css" media="screen">
</head> </head>
<body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button type="button" class="btn btn-primary">Primary</button> <a class="navbar-brand d-flex mx-auto" href="#">
</body> <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>
</footer> </footer>
<!-- load in external js --> <!-- load in external js -->
<script src="/js/jquery.min.js"></script> <script src="/masonstrap/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script> <script src="/masonstrap/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/masonstrap/js/bootstrap.min.js"></script>
</html> </html>
\ No newline at end of file
// Masonstrap 4.0 Components // Masonstrap 4.0 Components
\ No newline at end of file
...@@ -53,9 +53,10 @@ $universal-palette: ( ...@@ -53,9 +53,10 @@ $universal-palette: (
/* /*
The neutral palette can stand alone or be used to complement any of 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 color palettes. A neutral tone is also a great bridge to drop
the other palettes. Using two strong colors from one of the other palettes between two colors from one of the other palettes. Using two strong colors
with a neutral gives you flexibility without color overload. from one of the other palettes with a neutral gives you flexibility without
color overload.
*/ */
$neutral-palette: ( $neutral-palette: (
light-gray: #D1D3D5, light-gray: #D1D3D5,
...@@ -78,3 +79,68 @@ $neutral-palette: ( ...@@ -78,3 +79,68 @@ $neutral-palette: (
@warn "Unknown `#{$key}` in $neutral-palette."; @warn "Unknown `#{$key}` in $neutral-palette.";
@return null; @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