Prototyping made easy.
- Twig - Create pages/templates/partials
- Sass(SCSS) - Preprocess CSS
- Node-sass - Compile and minify Sass
- PostCSS Plugins
- Autoprefixer - Vendor prefix CSS
- Pixrem - Generate pixel fallbacks for rem units
- Flexibility - Flexbox polyfills
- SVG Symbols - Combine SVG files into symbols
- SVGO - Cleanup and minify SVG files
- Browserify/Babelify - JavaScript bundling
- Browsersync - Synchronised browser testing
-
Clone the project
$ git clone git@github.com:kjbrum/weave.git <project-name> -
Install the dependencies
$ npm install -
Development
$ npm run dev -
Staging/Production
$ npm run build
New Pages
- New site pages should be placed in the
src/pagesfolder with the a.twigextension. - These Twig files will be compiled to
dist/<path/to/file.html>and will be accessible as static pages.
Page Data
- The
src/data/default.jsonfile can be used for supplying data to all pages. - Each page in the
src/pagesfolder can have an accompanying JSON data file. - This data file will be placed in the
src/datafolder with the same hierarchy and name as the page.src/pages/news/_entry.twig==>src/data/news/_entry.json
Include and Extends
- Twig includes will need to be passed the relative path to the partial you would like to include.
{% extends '../partials/base/_layout.twig' %} {% block content %} {% include 'path/to/partial.twig' %} {% endblock %}
Copyright © Kyle Brumm. Weave is free to use on whatever and may be redistributed under the terms specified in the license.