jretza / craft-foundation-6

Craft CMS with Foundation 6.4.3 GULP/SASS Starter Kit - 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.

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

or

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

craft-foundation-6's Issues

JavaScript Issue

Hi JR,

I've just started using craft-foundation-6 and it's great, really enjoying it!
One big issue I'm having is the JavaScript:

When I use something like:
$(document).ready(function(){
$('.featureBanner').slick();
});

I'm getting this returned instead:
(0, _jquery2.default)(document).ready(function () {
(0, _jquery2.default)('.featureBanner').slick();
});

This could be completely my own mistake, I'm new to craft, but do you know of a way to fix this issue I'm having?

Any help would be appreciated, thanks!
Matthew

Bare bones, but too bare.

Would be great to incorporate original output of what Foundation generates for reference. I'm talking about the index.html boilerplate that is generated on foundation build. I've created a simple foundation setup to serve as reference, but it would be nice if this were included.

I see this as bare bones and very customizable - which I like. Was there reason of removing the style guide? I would like to hear what you use as an alternative.