rmilano24/craft-foundation-6

Craft Foundation 6.4.3 Sass/Gulp Starter Kit

Configuration starter kit for Sassy Foundation 6.4.3 with CraftCMS 2 OR 3

With this simple configuration you will be able to

add the latest greatest Foundation 6.4 to your Craft site
save hours of time in front-end development
get live previews in the browser while developing without ever hitting reload (browser-sync)

You can get Foundation 6.4 a plethora of ways, we'll use the foundation-cli for this.

You can $ npm install --global foundation-cli then $ foundation new and use this starter kit in your newly initialized dir

You can grab/setup Foundation 6 one of the many other ways and copy over the _settings.scss file into your /src/ directory yourself.

Foundation Install Docs:

Foundation Installation Guide
Zurb/Foundation on Github

Note: this is simply a jumping off point for those looking to work with Foundation in their Craft build. there are endless ways to do this, if you have an idea - please feel free to add to or correct this repo, and hey, thank you.

Setup:

Step 1.

git clone https://github.com/fndaily/craft-foundation-6 your_project_dir
cd your_project_dir
npm install
cp node_modules/foundation-sites/scss/settings/_settings.scss src/scss/_settings.scss

Step 2.

Grab a copy of Craft CMS and replace the /craft/ directory with your newly downloaded copy.

Step 3.

Update "http://YOURDOMAIN.dev" in `gulpfile.babel.js` line 135

##Directory Structure:

/craft/ - where you put your craftcms installation (step 2 above)
/node_modules/ - where node gets installed when running $npm install
/site/ - where you point apache
- /lib - compiled when you run foundation watch or foundation build
  - /css
    - /display.css - the single css generated by gulpfile.babel.js (line 63)
  - /gr - fonts moved from /src/ by gulpfile.babel.js (line 42)
  - /gr - your compressed graphics generated by gulpfile.babel.js (line 90)
  - /js
    - /app.js - the single js generated by gulpfile.babel.js (line 78)
  - /svg - svg moved from /src/ by gulpfile.babel.js (line 42)
/src
- /fonts - source fonts here
- /gr - put your source graphics here and auto-compress them on build
- /js
  - /app.js - adds $(document).foundation(); at the end of your compiled js
- /scss - source foundation 6 sass files
  - /components - your custom sass/css goes inside here
  - /mixins - your custom mixins go inside here
  - /_settings.scss - a copy of the default Foundation config
  - /app.scss - included foundation dependencies
- /svg - source svg files
/config.yml - central config file to manage your paths and foundation components
/gulpfile.babel.js - where it all comes together - update according to your needs
/package.json - module configuration for your /node_modules/
/README.md - this file =)

Other notes:

Keeping your npm up-to-date

update npm globally:

$ sudo npm install npm@latest -g

Updating your project /node_modules/ (npm dependencies)

see what's outdated within /your_project_dir/:

$ npm outdated -g --depth=0

update npm packages within your_project_dir and record the new version references in your package.json:

$ npm update --save

rmilano24 / craft-foundation-6