This Repo isn't actively maintained anymore since I've changed on using Gulp instead of Grunt. I've moved this Project to a new Repo (FastPlate) as well
A Barebones Responsive SCSS Boilerplate to get started with FireShell. This Boilerplate is mobile-first ready and has been inspired by Motherplate.
- Start your Project with FireShell.
- Don't 'build' your project yet.
- Copy the folders
app/
andsrc/
into your projects root folder. Some files will be overwritten. - Enjoy.
Edit src/scss/webfonts/webfonts.css
with the fonts you want to use.
In your Gruntfile.js
add '<%= project.src %>/scss/webfonts/webfonts.css'
to cssmin
:
cssmin: {
dev: {
files: {
'<%= project.assets %>/css/style.min.css': [
'<%= project.src %>/scss/webfonts/webfonts.css',
'<%= project.src %>/components/normalize-css/normalize.css',
'<%= project.assets %>/css/style.unprefixed.css'
]
}
},
dist: {
files: {
'<%= project.assets %>/css/style.min.css': [
'<%= project.src %>/scss/webfonts/webfonts.css',
'<%= project.src %>/components/normalize-css/normalize.css',
'<%= project.assets %>/css/style.prefixed.css'
]
}
}
}
CSSMIN concatenates and minifies the files but ignores (external) @import
which aren't at the very top of the css, even with processImport: false
things break. Therefor we place webfonts.css
at the top in the Gruntfile.js. Feels 'hacky' but works :).
Before building your project, check vendor/_external.scss
if you want to use Font Awesome.
If so, we'll have to edit bower.js
and Gruntfile.js
as well.
Add "font-awesome": "4.x"
to your projects bower.js
and
options: {
packageSpecific: {
'font-awesome': {
files: [
'scss/*',
'fonts/*'
],
dest: '<%= project.src %>/scss/vendor/font-awesome/',
'fonts_dest': '<%= project.assets %>/fonts/',
keepExpandedHierarchy: false
}
}
}
to bower: { dev:{ ... }}
and bower: { dist:{ ... }}
in your Gruntfile.js
. This will add Font Awesome to appropriate folders.
- Bower integration.