Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
masonstrap
Commits
f6a9b994
Verified
Commit
f6a9b994
authored
Sep 22, 2017
by
David Haynes
🙆
Browse files
Parity with prod, navbar, etc.
parent
952c687f
Pipeline
#1595
passed with stages
in 1 minute and 21 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
gulpfile.js
View file @
f6a9b994
...
...
@@ -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
...
...
src/html/index.html
View file @
f6a9b994
...
...
@@ -31,20 +31,49 @@
<title>
Masonstrap 4
•
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"
>
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
src/scss/_components.scss
View file @
f6a9b994
// Masonstrap 4.0 Components
\ No newline at end of file
src/scss/_variables.scss
View file @
f6a9b994
...
...
@@ -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'
)
);
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment