graphicalhouse/craftyons

Craft CMS + Tachyons website scaffolding with a few choice plugins. With thanks to https://github.com/nystudio107/craft

CLIETNAME

A Craft CMS and Tachyons website scaffold for Graphical House projects. With thanks to nystudio107., _(*1)

1) Create a new project folder in your Repos/ directory or your preferred location. (Note Craftyons will use this folder name as the site path for Valet - you can always change it later), _(*2)

2) In Terminal, CD to the project folder you just made and run composer create-project graphicalhouse/craftyons . -s RC to get started, _(*3)

Requirements

This package assumes you have the following installed: - Node.JS and npm - Composer - Gulp - LiveReload for Chrome, _(*4)

Assumptions made

• You're using a Mac and Laravel Valet as your development environment
• Gulp is used for workflow automation, again with thanks to nystudio107
• Tachyons CSS is used as a CSS framework
• Animate CSS is available from the node_modules directory if required

Installation

1) Initial Craftyons Setup

Run composer create-project graphicalhouse/craftyons . -s RC from your desired project folder, and follow the instructions., _(*5)

2) Craft Setup

Run ./craft setup from your project folder, _(*6)

3) Craftyons Setup

Run ./craftyons-setup welcome from your project folder, _(*7)

4) Link your project folder with Valet, secure it, and open

Run valet link && valet secure && valet open && gulp, _(*8)

5) Enable LiveReload by clicking the dot icon in the top right of Chrome

The dot will turn solid to show that LiveReload is running. Any CSS added or changed to /src/css will now be minified to /web/css/, _(*9)

Running locally with LiveReload in Chrome

• Run gulp from the project folder
• Open https://PROJECTNAME.dev in Chrome or use valet open

Resources

• A Gulp Workflow for Frontend Development Automation
• Atom snippets that help you quickly generate .json models for CraftCMS. (These work nicely with the Architect plugin)

Working Notes

Run chmod 770 craftyons-setup to get the script to run from the command line, _(*10)

Need to automate the first Tachyons compile cd node_modules/tachyons-custom && npm install && npm start, _(*11)

And then move the resulting css file to /src/css cp node_modules/tachyons-custom/css/tachyons.css src/css, _(*12)

Both of the above in one command eeeeek cd node_modules/tachyons-custom && npm install && npm start && quit, _(*13)

Or even better cd node_modules/tachyons-custom && npm install && npm run build:css && cp css/tachyons.css ../../src/css && cd ../../ && ls && echo Tachyons moved to src folder, now launching website && valet link && valet secure && valet open, _(*14)