Parity with prod, navbar, etc.

f6a9b994 · David Haynes · 952c687f · f6a9b994 · f6a9b994 · f6a9b994
Commit f6a9b994 authored Sep 22, 2017 by David Haynes 🙆
Showing with 114 additions and 18 deletions

gulpfile.js gulpfile.js +7 -7

src/html/index.html src/html/index.html +37 -8

src/scss/_components.scss src/scss/_components.scss +1 -0

src/scss/_variables.scss src/scss/_variables.scss +69 -3

No files found.
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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

--- a/src/html/index.html
+++ b/src/html/index.html
@@ -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
--- a/src/scss/_components.scss
+++ b/src/scss/_components.scss
 // Masonstrap 4.0 Components
+  
\ No newline at end of file
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -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')
+);