Weave

Prototyping made easy.

Features

• 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

Getting Started

1. Clone the project

   $ git clone git@github.com:kjbrum/weave.git <project-name>
   

2. Install the dependencies

   $ npm install
   

3. Development

   $ npm run dev
   

4. Staging/Production

   $ npm run build
   

Development Notes

New Pages

• New site pages should be placed in the src/pages folder with the a .twig extension.
• 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.json file can be used for supplying data to all pages.
• Each page in the src/pages folder can have an accompanying JSON data file.
• This data file will be placed in the src/data folder 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 %}
  

License

Copyright © Kyle Brumm. Weave is free to use on whatever and may be redistributed under the terms specified in the license.