styles for Respoke web properties
This repo has shared styles for Respoke websites.
# this format tells NPM to use github.com/respoke/style
npm i --save-dev respoke/style
Stylesheet usage
Be sure to add the include paths to the SASS configuration in your build process. Otherwise you will need to provide the full path to the file you wish to import.
var sass = require('gulp-sass');
var respokeStyle = require('respoke-style');
gulp.task('sass', function () {
return gulp.src('styles')
.pipe(sass({
includePaths: respokeStyle.includeStylePaths()
}));
});
@import 'base';
.my-content {
color: $text;
}
The basic usage is to just include the base.scss
file which includes all the
components, helpers, bourbon, neat, config options, and base element styles.
(See example above).
To use Bourbon, Neat, and Respoke variables and helpers without the added cruft
of the actual styles then just import respoke-style.scss
.
@import 'respoke-style';
.my-content {
color: $text;
}
.my-button {
@include button-dark;
}
SassDoc generation
To generate the SassDoc run the gulp task and open the generated html file.
gulp sassdoc && open sassdoc/index.html
Jade template usage
To include the provided mixins for Jade just include the mixins.jade file at the top of your template.
@include node_modules/respoke-style/mixins
doctype html
html
head
body
+navbar('dark')
p Some custom paragraph text
To include a shared template you will need to provide the Jade helpers to the
template compilation method either globally or locally. There is a
renderSharedTemplate
method that will output the compiled shared template. It
can take an option second locals
object to pass variables.
var jade = require('gulp-jade');
var respokeStyle = require('respoke-style');
gulp.task('jade', function () {
return gulp.src('templates')
.pipe(jade({
locals: respokeStyle.templateLocals
}))
});
doctype html
html
head
!= renderSharedTemplate('head')
body
p Some custom paragraph text
!= renderSharedTemplate('footer')
Assets
These are files you may want to reuse. You will probably want to copy them
during your build. See the example Gruntfile copy
task.
./assets/
./assets/images/
./assets/js/
Exported paths
See the list of exported asset paths in ./index.js
.
You can use these paths as local variables for your SCSS and Jade, or in your build script. See the example Gruntfile.
var respokeStyle = require('respoke-style');
assetPaths = respokeStyle.paths.assets
assetPaths = respokeStyle.paths.styles
assetPaths = respokeStyle.paths.templates
Your project structure
When you copy the ./assets
to your local project, you must serve the
./assets/js/
folder at the root of your website such that it is at the /js/
path (required by ./templates/head.jade
).
Example Gruntfile
See ./SampleGruntfileUsage.js
for an example of building the Respoke styles into one of your projects.
Style guide
To view the style guide run the gulp task and open your browser to
http://localhost:1236
.
gulp style-guide