Skip to content

Commit 245dac0

Browse files
danielrohersdanielrohers
committed
add stylus
1 parent 0b6bf69 commit 245dac0

File tree

6 files changed

+310
-211
lines changed

6 files changed

+310
-211
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# quickness-bootstrap
22

3-
Bootstrap for static site with [gulp](http://gulpjs.com) + [pug](https://pugjs.org) + [minify](https://www.npmjs.com/package/gulp-clean-css) + [uglify](https://www.npmjs.com/package/gulp-uglify) + [image optimization](https://www.npmjs.com/package/gulp-imagemin)
3+
Bootstrap for static site with [gulp](http://gulpjs.com) + [pug](https://pugjs.org) + [stylus](https://github.com/stevelacy/gulp-stylus) + [uglify](https://www.npmjs.com/package/gulp-uglify) + [image optimization](https://www.npmjs.com/package/gulp-imagemin)
44

55
[![Build Status](https://travis-ci.org/danielrohers/quickness-bootstrap.svg?branch=master)](https://travis-ci.org/danielrohers/quickness-bootstrap)
66
[![devDependency Status](https://david-dm.org/danielrohers/quickness-bootstrap/dev-status.svg)](https://david-dm.org/danielrohers/quickness-bootstrap#info=devDependencies)

‎assets/stylesheets/example.css

Lines changed: 0 additions & 168 deletions
This file was deleted.

‎assets/stylesheets/example.styl

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/*
2+
* Globals
3+
*/
4+
5+
// Links
6+
a
7+
&focus
8+
&hover
9+
color #fff
10+
11+
// Custom default button
12+
.btn-default
13+
&hover
14+
&focus
15+
color #333
16+
text-shadow none // Prevent inheritence from `body`
17+
background-color #fff
18+
border 1px solid #fff
19+
20+
21+
/*
22+
* Base structure
23+
*/
24+
25+
html
26+
body
27+
height 100%
28+
background-color #333
29+
30+
body
31+
color #fff
32+
text-align center
33+
text-shadow 0 1px 3px rgba(0,0,0,.5)
34+
35+
// Extra markup and styles for table-esque vertical and horizontal centering
36+
37+
box-shadow(n)
38+
-webkit-box-shadow n
39+
-moz-box-shadow n
40+
box-shadow n
41+
42+
.site-wrapper
43+
display table
44+
width 100%
45+
height 100% // For at least Firefox
46+
min-height 100%
47+
box-shadow(inset 0 0 100px rgba(0,0,0,.5))
48+
49+
.site-wrapper-inner
50+
display table-cell
51+
vertical-align top
52+
53+
.cover-container
54+
margin-right auto
55+
margin-left auto
56+
57+
// Padding for spacing
58+
.inner
59+
padding 30px
60+
61+
62+
/*
63+
* Header
64+
*/
65+
.masthead-brand
66+
margin-top 10px
67+
margin-bottom 10px
68+
69+
img
70+
width 3.5rem
71+
72+
.masthead-nav
73+
> li
74+
display inline-block
75+
+ li
76+
margin-left 20px
77+
> a
78+
padding-right 0
79+
padding-left 0
80+
font-size 16px
81+
font-weight bold
82+
color #fff /* IE8 proofing */
83+
color rgba(255,255,255,.75)
84+
border-bottom 2px solid transparent
85+
> ahover
86+
> afocus
87+
background-color transparent
88+
border-bottom-color #a9a9a9
89+
border-bottom-color rgba(255,255,255,.25)
90+
.active
91+
> a
92+
> ahover
93+
> afocus
94+
color #fff
95+
border-bottom-color #fff
96+
97+
@media (min-width 768px)
98+
.masthead-brand
99+
float left
100+
101+
.masthead-nav
102+
float right
103+
104+
105+
106+
/*
107+
* Cover
108+
*/
109+
110+
.cover
111+
padding 0 20px
112+
113+
.btn-lg
114+
padding 10px 20px
115+
font-weight bold
116+
117+
118+
/*
119+
* Footer
120+
*/
121+
122+
.mastfoot
123+
color #999 // IE8 proofing
124+
color rgba(255,255,255,.5)
125+
126+
127+
/*
128+
* Affix and center
129+
*/
130+
131+
@media (min-width 768px)
132+
// Pull out the header and footer
133+
.masthead
134+
position fixed
135+
top 0
136+
137+
.mastfoot
138+
position fixed
139+
bottom 0
140+
141+
// Start the vertical centering
142+
.site-wrapper-inner
143+
vertical-align middle
144+
145+
/* Handle the widths */
146+
.masthead
147+
.mastfoot
148+
.cover-container
149+
width 100% // Must be percentage or pixels for horizontal alignment
150+
151+
152+
@media (min-width 992px)
153+
.masthead
154+
.mastfoot
155+
.cover-container
156+
width 700px

‎gulpfile.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
const fs = require('fs');
2-
const path = require('path');
31
const gulp = require('gulp');
42
const del = require('del');
5-
const cleanCSS = require('gulp-clean-css');
63
const pug = require('gulp-pug');
74
const uglify = require('gulp-uglify');
85
const imagemin = require('gulp-imagemin');
96
const webserver = require('gulp-webserver');
7+
const stylus = require('gulp-stylus');
108

119
const paths = {
1210
dist: 'dist',
@@ -44,8 +42,11 @@ gulp.task('images', ['clean:images'], () => {
4442
});
4543

4644
gulp.task('minify', ['clean:stylesheets'], () => {
47-
return gulp.src(`${paths.stylesheets}/**.css`)
48-
.pipe(cleanCSS({ compatibility: 'ie8' }))
45+
return gulp.src(`${paths.stylesheets}/**.styl`)
46+
.pipe(stylus({
47+
'include css': true,
48+
compress: true,
49+
}))
4950
.pipe(gulp.dest(`${paths.dist}/${paths.stylesheets}`));
5051
});
5152

@@ -66,7 +67,7 @@ gulp.task('watch:images', () => {
6667
});
6768

6869
gulp.task('watch:minify', () => {
69-
return gulp.watch(`${paths.stylesheets}/**.css`, ['minify']);
70+
return gulp.watch(`${paths.stylesheets}/**.styl`, ['minify']);
7071
});
7172

7273
gulp.task('watch:templates', () => {

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "quickness-bootstrap",
33
"version": "1.0.0",
4-
"description": "Bootstrap for static site with gulp + pug + minify + uglify + image optimization",
4+
"description": "Bootstrap for static site with gulp + pug + stylus + uglify + image optimization",
55
"scripts": {
66
"start": "gulp serve",
77
"deploy": "gulp dist"
@@ -21,9 +21,9 @@
2121
"devDependencies": {
2222
"del": "^2.2.0",
2323
"gulp": "^3.9.1",
24-
"gulp-clean-css": "^3.0.0",
2524
"gulp-imagemin": "^3.1.1",
2625
"gulp-pug": "^3.2.0",
26+
"gulp-stylus": "^2.6.0",
2727
"gulp-uglify": "^2.0.0",
2828
"gulp-webserver": "^0.9.1"
2929
}

0 commit comments

Comments
 (0)