Skip to content

Commit fb23bc8

Browse files
davidtmillerdavidtmiller
committed
Bootstrap 4 Update
1 parent 240fcca commit fb23bc8

25 files changed

+15418
-3927
lines changed

‎css/landing-page.css‎

Lines changed: 79 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
/*!
2-
* Start Bootstrap - Landing Page v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/landing-page)
3-
* Copyright 2013-2017 Start Bootstrap
4-
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
5-
*/
61
body {
7-
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
2+
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3+
}
84

95
h1,
106
h2,
@@ -13,7 +9,8 @@ h4,
139
h5,
1410
h6 {
1511
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
16-
font-weight: 700; }
12+
font-weight: 700;
13+
}
1714

1815
header.masthead {
1916
position: relative;
@@ -24,55 +21,82 @@ header.masthead {
2421
-o-background-size: cover;
2522
background-size: cover;
2623
padding-top: 8rem;
27-
padding-bottom: 8rem; }
28-
header.masthead .overlay {
29-
position: absolute;
30-
background-color: #212529;
31-
height: 100%;
32-
width: 100%;
33-
top: 0;
34-
left: 0;
35-
opacity: 0.3; }
24+
padding-bottom: 8rem;
25+
}
26+
27+
header.masthead .overlay {
28+
position: absolute;
29+
background-color: #212529;
30+
height: 100%;
31+
width: 100%;
32+
top: 0;
33+
left: 0;
34+
opacity: 0.3;
35+
}
36+
37+
header.masthead h1 {
38+
font-size: 2rem;
39+
}
40+
41+
@media (min-width: 768px) {
42+
header.masthead {
43+
padding-top: 12rem;
44+
padding-bottom: 12rem;
45+
}
3646
header.masthead h1 {
37-
font-size: 2rem; }
38-
@media (min-width: 768px) {
39-
header.masthead {
40-
padding-top: 12rem;
41-
padding-bottom: 12rem; }
42-
header.masthead h1 {
43-
font-size: 3rem; } }
47+
font-size: 3rem;
48+
}
49+
}
4450

4551
.showcase .showcase-text {
46-
padding: 3rem; }
52+
padding: 3rem;
53+
}
4754

4855
.showcase .showcase-img {
4956
min-height: 30rem;
50-
background-size: cover; }
57+
background-size: cover;
58+
}
5159

5260
@media (min-width: 768px) {
5361
.showcase .showcase-text {
54-
padding: 7rem; } }
62+
padding: 7rem;
63+
}
64+
}
5565

5666
.features-icons {
5767
padding-top: 7rem;
58-
padding-bottom: 7rem; }
59-
.features-icons .features-icons-item {
60-
max-width: 20rem; }
61-
.features-icons .features-icons-item .features-icons-icon {
62-
height: 7rem; }
63-
.features-icons .features-icons-item .features-icons-icon i {
64-
font-size: 4.5rem; }
65-
.features-icons .features-icons-item:hover .features-icons-icon i {
66-
font-size: 5rem; }
68+
padding-bottom: 7rem;
69+
}
70+
71+
.features-icons .features-icons-item {
72+
max-width: 20rem;
73+
}
74+
75+
.features-icons .features-icons-item .features-icons-icon {
76+
height: 7rem;
77+
}
78+
79+
.features-icons .features-icons-item .features-icons-icon i {
80+
font-size: 4.5rem;
81+
}
82+
83+
.features-icons .features-icons-item:hover .features-icons-icon i {
84+
font-size: 5rem;
85+
}
6786

6887
.testimonials {
6988
padding-top: 7rem;
70-
padding-bottom: 7rem; }
71-
.testimonials .testimonial-item {
72-
max-width: 18rem; }
73-
.testimonials .testimonial-item img {
74-
max-width: 12rem;
75-
box-shadow: 0px 5px 5px 0px #adb5bd; }
89+
padding-bottom: 7rem;
90+
}
91+
92+
.testimonials .testimonial-item {
93+
max-width: 18rem;
94+
}
95+
96+
.testimonials .testimonial-item img {
97+
max-width: 12rem;
98+
box-shadow: 0px 5px 5px 0px #adb5bd;
99+
}
76100

77101
.call-to-action {
78102
position: relative;
@@ -83,16 +107,20 @@ header.masthead {
83107
-o-background-size: cover;
84108
background-size: cover;
85109
padding-top: 7rem;
86-
padding-bottom: 7rem; }
87-
.call-to-action .overlay {
88-
position: absolute;
89-
background-color: #212529;
90-
height: 100%;
91-
width: 100%;
92-
top: 0;
93-
left: 0;
94-
opacity: 0.3; }
110+
padding-bottom: 7rem;
111+
}
112+
113+
.call-to-action .overlay {
114+
position: absolute;
115+
background-color: #212529;
116+
height: 100%;
117+
width: 100%;
118+
top: 0;
119+
left: 0;
120+
opacity: 0.3;
121+
}
95122

96123
footer.footer {
97124
padding-top: 4rem;
98-
padding-bottom: 4rem; }
125+
padding-bottom: 4rem;
126+
}

‎css/landing-page.min.css‎

Lines changed: 1 addition & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js‎

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
var gulp = require('gulp');
22
var sass = require('gulp-sass');
3-
var browserSync = require('browser-sync').create();
43
var header = require('gulp-header');
54
var cleanCSS = require('gulp-clean-css');
65
var rename = require("gulp-rename");
76
var pkg = require('./package.json');
7+
var browserSync = require('browser-sync').create();
88

99
// Set the banner content
1010
var banner = ['/*!\n',
@@ -15,88 +15,93 @@ var banner = ['/*!\n',
1515
''
1616
].join('');
1717

18-
// Compiles SCSS files from /scss into /css
19-
gulp.task('sass', function() {
20-
return gulp.src('scss/landing-page.scss')
21-
.pipe(sass())
22-
.pipe(header(banner, {
23-
pkg: pkg
24-
}))
25-
.pipe(gulp.dest('css'))
26-
.pipe(browserSync.reload({
27-
stream: true
28-
}))
29-
});
30-
31-
// Minify compiled CSS
32-
gulp.task('minify-css', ['sass'], function() {
33-
return gulp.src('css/landing-page.css')
34-
.pipe(cleanCSS({
35-
compatibility: 'ie8'
36-
}))
37-
.pipe(rename({
38-
suffix: '.min'
39-
}))
40-
.pipe(gulp.dest('css'))
41-
.pipe(browserSync.reload({
42-
stream: true
43-
}))
44-
});
18+
// Copy third party libraries from /node_modules into /vendor
19+
gulp.task('vendor', function() {
4520

46-
// Copy vendor files from /node_modules into /vendor
47-
// NOTE: requires `npm install` before running!
48-
gulp.task('copy', function() {
21+
// Bootstrap
4922
gulp.src([
50-
'node_modules/bootstrap/dist/**/*',
51-
'!**/npm.js',
52-
'!**/bootstrap-theme.*',
53-
'!**/*.map'
23+
'./node_modules/bootstrap/dist/**/*',
24+
'!./node_modules/bootstrap/dist/css/bootstrap-grid*',
25+
'!./node_modules/bootstrap/dist/css/bootstrap-reboot*'
5426
])
55-
.pipe(gulp.dest('vendor/bootstrap'))
27+
.pipe(gulp.dest('./vendor/bootstrap'))
5628

57-
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
58-
.pipe(gulp.dest('vendor/jquery'))
29+
// Font Awesome
30+
gulp.src([
31+
'./node_modules/font-awesome/**/*',
32+
'!./node_modules/font-awesome/{less,less/*}',
33+
'!./node_modules/font-awesome/{scss,scss/*}',
34+
'!./node_modules/font-awesome/.*',
35+
'!./node_modules/font-awesome/*.{txt,json,md}'
36+
])
37+
.pipe(gulp.dest('./vendor/font-awesome'))
5938

60-
gulp.src(['node_modules/jquery.easing/*.js'])
61-
.pipe(gulp.dest('vendor/jquery-easing'))
39+
// jQuery
40+
gulp.src([
41+
'./node_modules/jquery/dist/*',
42+
'!./node_modules/jquery/dist/core.js'
43+
])
44+
.pipe(gulp.dest('./vendor/jquery'))
6245

46+
// jQuery Easing
6347
gulp.src([
64-
'node_modules/font-awesome/**',
65-
'!node_modules/font-awesome/**/*.map',
66-
'!node_modules/font-awesome/.npmignore',
67-
'!node_modules/font-awesome/*.txt',
68-
'!node_modules/font-awesome/*.md',
69-
'!node_modules/font-awesome/*.json'
48+
'./node_modules/jquery.easing/*.js'
7049
])
71-
.pipe(gulp.dest('vendor/font-awesome'))
50+
.pipe(gulp.dest('./vendor/jquery-easing'))
7251

52+
// Simple Line Icons
7353
gulp.src([
74-
'node_modules/simple-line-icons/fonts/**',
54+
'./node_modules/simple-line-icons/fonts/**',
7555
])
76-
.pipe(gulp.dest('vendor/simple-line-icons/fonts'))
56+
.pipe(gulp.dest('./vendor/simple-line-icons/fonts'))
7757

7858
gulp.src([
79-
'node_modules/simple-line-icons/css/**',
59+
'./node_modules/simple-line-icons/css/**',
60+
])
61+
.pipe(gulp.dest('./vendor/simple-line-icons/css'))
62+
63+
});
64+
65+
// Compile SCSS
66+
gulp.task('css:compile', function() {
67+
return gulp.src('./scss/**/*.scss')
68+
.pipe(sass.sync({
69+
outputStyle: 'expanded'
70+
}).on('error', sass.logError))
71+
.pipe(gulp.dest('./css'))
72+
});
73+
74+
// Minify CSS
75+
gulp.task('css:minify', ['css:compile'], function() {
76+
return gulp.src([
77+
'./css/*.css',
78+
'!./css/*.min.css'
8079
])
81-
.pipe(gulp.dest('vendor/simple-line-icons/css'))
82-
})
80+
.pipe(cleanCSS())
81+
.pipe(rename({
82+
suffix: '.min'
83+
}))
84+
.pipe(gulp.dest('./css'))
85+
.pipe(browserSync.stream());
86+
});
87+
88+
// CSS
89+
gulp.task('css', ['css:compile', 'css:minify']);
8390

8491
// Default task
85-
gulp.task('default', ['sass', 'minify-css', 'copy']);
92+
gulp.task('default', ['css', 'vendor']);
8693

8794
// Configure the browserSync task
8895
gulp.task('browserSync', function() {
8996
browserSync.init({
9097
server: {
91-
baseDir: ''
92-
},
93-
})
94-
})
98+
baseDir: "./"
99+
}
100+
});
101+
});
95102

96-
// Dev task with browserSync
97-
gulp.task('dev', ['browserSync', 'sass', 'minify-css'], function() {
98-
gulp.watch('scss/*.scss', ['sass']);
99-
gulp.watch('css/*.css', ['minify-css']);
100-
// Reloads the browser whenever HTML files change
101-
gulp.watch('*.html', browserSync.reload);
103+
// Dev task
104+
gulp.task('dev', ['css', 'browserSync'], function() {
105+
gulp.watch('./scss/*.scss', ['css']);
106+
gulp.watch('./*.html', browserSync.reload);
102107
});

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ <h2 class="mb-4">Ready to get started? Sign up now!</h2>
196196
<a href="#">Privacy Policy</a>
197197
</li>
198198
</ul>
199-
<p class="text-muted small mb-4 mb-lg-0">&copy; Start Bootstrap 2017. All Rights Reserved.</p>
199+
<p class="text-muted small mb-4 mb-lg-0">&copy; Your Website 2018. All Rights Reserved.</p>
200200
</div>
201201
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
202202
<ul class="list-inline mb-0">

0 commit comments

Comments
 (0)