![\"Foundation](\"http:\/\/blog.jeffwilkerson.net\/wp-content\/uploads\/2019\/02\/foundation-settings.png\")
CSS Frameworks like Bootstrap and Foundation can help tremendously with ensuring consistent styling and speeding template development. Both Bootstrap and Foundation have settings files (consisting of variables and mixins) that you can leverage, resulting in two benefits . First, you can override these settings files and compile customized versions of these frameworks. You get all the styles for grids, buttons, navigation, customized to fit your brand design. Second, you can then leverage the variables and mixins in your own work, leading to rapid development of consistent styling. Setting up a workflow so that you can take advantage of these settings is not obvious, which is why I’m documenting my work.<\/p>\n\n\n\n
Basic Setup<\/h2>\n\n\n\n
The basic setup involves creating a NodeJS project, and declaring dependencies such as Gulp. For the sake of this demonstration, I will create this NodeJS project in my theme’s folder. Once my project is set up, I can begin to install the dependencies required to compile SASS. Those dependencies goes as follow:<\/p>\n\n\n\n
- \n\t
- Gulp<\/a><\/dt>\n\t
- Tool used to automate processes<\/dd>\n\n\t\n\t
- Node SASS<\/a><\/dt>\n\t
- Library to allow for SASS compilation on NodeJS <\/dd>\n\n\t
- Gulp SASS<\/a><\/dt>\n\t
- SASS plugin for Gulp<\/dd>\n\n\t\n\t
- Gulp Autoprefixer<\/a><\/dt>\n\t
- Add vendor prefixes to CSS rules; used to make non-standard CSS rules work across browsers <\/dd>\n\n\t\n\t
- CSS Nano<\/a><\/dt>\n\t
- Minifys CSS<\/dd>\n\n\t\n\t
- Gulp Sass Blob<\/a><\/dt>\n\t
- Allows globbing patterns in SASS<\/dd>\n\t\n\t
- Foundation<\/a><\/dt>\n\t
- The CSS Framework I’ll be customizing.<\/dd>\n<\/dl>\n\n\n\n
With these dependencies installed, we can start developing our Gulpfile and SASS assets, and get to the real challenge at hand, importing Foundation into our WordPress theme.<\/p>\n\n\n\n
Gulpfile with ES6 Javascript<\/h2>\n\n\n\n
Hold the presses! Lets use modern Javascript with our gulpfile. When I started this blog post, I had planned to just use the same old gulpFile I had always used. I had been reluctant to use ES6 Javascript simply because I’ve been unclear about all the dependencies needed to compile Gulp with ES6 JS on Windows. Well, it’s 20018 – there are plenty of resources out there that shows how to write ES6 Javascript.<\/p>\n\n\n\n
List of Resources for Using ES6 Javascript in Gulpfiles<\/h4>\n\n\n\n
- Using ES6 with gulp<\/a><\/li>
- Compiling ES6 with Gulp and Babel<\/a><\/li>
- Is it possible write a gulpfile in es6?<\/a><\/li><\/ul>\n\n\n\n
So how does this translate into code?<\/h3>\n\n\n\n
Here is my devDependencies from my package.json file complete with the new dependencies for Babel and ES6 transpilation:<\/p>\n\n\n\n
\n\n \"devDependencies\": {\n \"babel\": \"^6.23.0\",\n \"babel-preset-es2015\": \"^6.22.0\",\n \"babel-register\": \"^6.26.0\",\n \"babelify\": \"^7.3.0\",\n \"browserify\": \"^14.0.0\",\n }\n<\/pre>\n\n\n\nCheck out my gulpFile in my next post, where I demonstrate how to import and manually compile Foundation.<\/p>\n","protected":false},"excerpt":{"rendered":"
SASS and CSS-Preprocessing as a whole is absolutely crucial. Having spent many years writing CSS by hand, long before widely accepted standards, I felt so relieve when CSS Preprocessing came along. Most importantly, CSS Preprocessing is another tool that helps facilitate modular web design, and makes it a bit more easier to separate presentation from […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/446"}],"collection":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/comments?post=446"}],"version-history":[{"count":0,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/446\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/media?parent=446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/categories?post=446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/tags?post=446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Compiling ES6 with Gulp and Babel<\/a><\/li>