twist aims to be a flexible Sass base to begin styling common elements. It aims to be a nicely styled by default, but offer a way to put your own stamp on it.
- Navigate into the root of the project, where the
gulpfile.js
- Open gulpfile.js
- Find
browserSyncOptions
and update the domain (if you don’t have one change it tolocalhost
)
- Open terminal
- Navigate to where the
gulpfile.js
is found - npm install
- gulp
- Navigate to the browsersync url provided in the terminal output
The default gulp task runs the serve
task. This task will load browsersync, which will watch both Sass and JavaScript. However, it will only compile Sass, JavaScript is handled by webpack. The reason for this is you can add additional scripts without having to reload gulp every time one is added.
- Open up a new terminal window where the
webpack.config.js
- Enter
npm run build
in terminal - Edit JavaScript files in
assets/js/
Using an lazysizes as an example.
- Navigate in terminal to where the
package.json
is found - Enter
npm install lazysizes --save-dev
in terminal - Open in the text editor
assets/js/global.js
- At the top of the file
import 'lazysizes'
- Configuration may be slightly different for another library but it should tell you
Sass is the preprocessor of choice with autoprefixer for backwards compatibility.
The files contained in here shouldn’t be edited, these are mixins used throughout the site. If you want to override a mixin copy it to assets/sass/site/_mixins.scss
or a new file.
This is being phased out (in favour of helpers), but there are some useful things still contained within.
Helpers are tachyons style single purpose class names, with most having associated breakpoints to apply the CSS.
The site folder is where all things that if the framework to update wouldn’t need updating. Anything that needs overriding should be put in here. Common things are also added to get started.
There are lots of variables dotted about, but framework related variables can be found in assets/sass/variables/_base.scss
. Copy the variable you want to change into assets/sass/site/_base.scss
, removing the !default
to override successfully.
These are separate to the framework and are