wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the codepen-embed-script handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/jwblogger/jwBlogger/wp-includes/functions.php on line 6114To be honest, the title of this blog post is misleading. Yes, I will demonstrate who I import Zurb’s Foundation CSS Framework into a WordPress theme. But the kicker is, this method can be used in any NodeJS project. <\/p>\n\n\n\n
Why would you want to manually compile Foundation and <\/p>\n\n\n\n
The objective here is to customize Foundation to fit out specific brand design. Why would you want to customize Foundation? Why wouldn’t you just use the minified version fro a CDN, and customize by overriding default styling? Well, what if the design of the site makes the site feel very open, and you want to use Foundation’s XY Grid<\/a>, but it’s default gutter size is too small? How do you compile Foundation with a custom gutter size? Furthermore, how do you reuse that custom gutter size in your own SASS development so that everything has consistent spacing? <\/p>\n\n\n\n Manually compiling Foundation starts with importing it’s At any rate, the simplest process of manually importing Foundation looks like this (assuming you installed via npm): The resulting SASS file will look like:<\/p>\n Check out this branch to see how I’ve implemented this process using Gulp.<\/a><\/strong><\/p>\n\n\n\n Manually compiling Foundation is nice, but its no different that just linking to a version of Foundation on some CDN. In fact, why are we compiling Foundation ourselves? Why don’t we simply link to the CDN version of Foundation, then override the default styling with your own styling. Well, that way always gives me headaches, that’s why. Its a hack. It requires you to use strong selectors in your SASS (to override the default styling), and its very easy to create layouts with inconsistent margins and paddings.<\/p>\n\n\n\n Even in today’s ecosystem of browsing devices and the wide variety of screen sizes out there, I still encounter clients who want “pixel perfect” design, meaning I need to match the design perfectly. If the designer made all the gutters between elements to be 50 pixels wide on desktop screens, by golly, it better be 50 pixels on desktop. For me, its much easier to ensure that consistent spacing by customizing Foundation SASS files and compiling Foundation manually. And, should the client ever wants to change the amount of spacing, I can simply change the value in my SASS files and recompile my CSS.<\/p>\n\n\n\n If we want to customize the gutters of Foundation’s grid to be 50 pixels wide on large screens, we first need to find the name of the variable we need to override. Every component in Foundation has a SASS Reference section that details the SASS variables that can be customize. <\/p>\n\n\n\n This is the point where I should refer to the documentation<\/a>, but I am not able to get the desired results when I follow what’s in the documentation. Also, if I dig deeper into Foundation’s SASS file, I realize that there many variables I need to override in order to customize the grid gutters. Because Foundation Settings variables do not use the The specific values that we need to override are The complete SASS to override the gutter variables looks like:<\/p>\n\n\n\n To compile Foundation with these variables, import these settings AFTER importing Foundation’s settings. Our main SASS file now looks like:<\/p>\n\n\n\n Look here at this branch for a complete demonstration of customizing Foundation variables.<\/a><\/strong><\/p>\n\n\n\n Along with the hundreds of settings declared in Foundation’s Settings files, one can also leverage the many mixins that come with the framework. Every component has a SASS Reference section that details the settings and mixins available for that component. For example, if you look at the SASS reference for buttons<\/a>, you’ll discover a mixin called Since we are customizing Foundation’s XY grid gutters, let’s suppose that we also want to apply those same gutters to every Let’s put this in our project so we can use it! In this demonstration, I’ll create a new SCSS file called After tweaking our gulpFile to accommodate the new site.scss file, we are ready to compile all of our styles, and take advantage of the immense library of SASS variables and mixins that come with Foundation. Our complete gulpFile looks like:<\/p>\n\n\n\n Check out this branch<\/strong><\/a> to study the full setup.<\/strong><\/p>\n\n\n\n I’ve tried to demonstrate how to use a CSS Framework in your web project to:<\/p>\n\n\n\n Feel free to study how I’ve implemented this problem. All of the code discussed in this post is displayed in this repo. Check out all the branches.<\/p>\n\n\n\n As a developer, I don’t care the specific design of the site. Instead, I care more about translating that design into a series of variables that I can apply to my markup in a consistent manner. This is especially true on WordPress sites, where design values like colors and margins can change without notice. Including Foundation into your project and leveraging the mixins and variables are a great way to build out a theme without causing headaches down the road.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" To be honest, the title of this blog post is misleading. Yes, I will demonstrate who I import Zurb’s Foundation CSS Framework into a WordPress theme. But the kicker is, this method can be used in any NodeJS project. Why would you want to manually compile Foundation and The objective here is to customize Foundation […]<\/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":[],"class_list":["post-448","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/448","targetHints":{"allow":["GET"]}}],"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=448"}],"version-history":[{"count":0,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/448\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/media?parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/categories?post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/tags?post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} Manually Compiling SASS <\/h2>\n\n\n\n
setting.scss<\/code> file. The path to this file, relative to the project’s root folder, is scss\/settings._settings.scss<\/code>. This file has all the variables used by Foundation, and these are the variables we can customize to fit our site design. The documentation suggests ” Download the latest settings file here<\/a><\/strong>, add it to your project as _settings.scss<\/code>, then import it before<\/em> Foundation itself.” In my setup, I just leveraged the existing settings.scss<\/code> file that came when I installed the Foundation package. Either way, you’re going to have a local copy of the settings.scss<\/code> file that will override the default variables.<\/p>\n\n\n\n
1. Import node_modules\/foundation-sites\/scss\/settings\/_settings.scss
2. Import node_modules\/foundation-sites\/scss\/foundation.scss
3. Include foundation-everything (or whatever components you need)<\/p>\n\n\n\n@import \"settings\/_settings.scss\";\n\n@import \"foundation.scss\";\n\n@include foundation-everything;\n<\/pre>\n\n\n\n
Customizing Foundation<\/h2>\n\n\n\n
Pixel Perfect<\/h3>\n\n\n\n
Creating SASS Variables for the Theme<\/h3>\n\n\n\n
!default flag<\/code><\/a>, I have to override the default variables AFTER I import _settings.scss<\/code>. Therefore, at this point, I’m deviating from whats currently documented and making up my own solution.<\/em><\/p>\n\n\n\n$grid-column-gutter<\/code>, $grid-padding-gutters<\/code>, $grid-margin-gutters<\/code>, and $grid-container-padding<\/code>. We can customize the size of the gutters at a given screen size if we provide a Map value, with the keys for the map being the names of the defined breakpoints. See Below. (The default breakpoint names are small<\/code>, medium<\/code>, large<\/code>, x-large<\/code>.)<\/p>\n\n\n\n$grid-column-gutter: (\n small: 30px,\n medium: 40px,\n large: 50px\n) !default;\n<\/pre>\n\n\n\n
\/\/ file: _site-settings.scss<\/strong>\n$grid-column-gutter: (\n small: 30px,\n medium: 40px,\n large: 50px\n);\n\n$grid-margin-gutters: $grid-column-gutter;\n$grid-padding-gutters: $grid-margin-gutters;\n$grid-container-padding: $grid-padding-gutters;\n<\/pre>\n\n\n\n
@import \"settings\/_settings.scss\";\n@import \"site-settings\";<\/strong>\n\n@import \"foundation.scss\";\n\n@include foundation-everything;\n<\/pre>\n\n\n\n
Using Foundation’s Mixins in Theme Development<\/h2>\n\n\n\n
button<\/code>, which will make any element look like a button. Therefore, if you want to make all links with a class of .my-random-class<\/code>, you’ll just have to include the button mixin, ie:<\/p>\n\n\n\n.my-random-class {\n @include button();\n}\n<\/pre>\n\n\n\nsection<\/code> tag that appears in an article<\/code> (tag). Well, if we look at the Mixins for the XY Grid<\/a>, we discover a mixin called xy-gutters<\/code>. If we choose to apply our grid gutters as top and bottom paddings to our section tags, the resulting SASS looks like:<\/p>\n\n\n\narticle section {\n @include xy-grid-gutters($gutter-position: top bottom, $gutter-type: padding);\n}\n<\/pre>\n\n\n\nsite.scss<\/code>, separate from the foundation-custom.scss<\/code> that was shown above. Like the foundation-custom file, we’ll import Foundation’s settings file, followed by our own site variable, before importing all of Foundation’s mixins from foundation.scss<\/code>. Finally, we can write the styles for the site. The resulting SCSS looks like:<\/p>\n\n\n\n\/\/ file: site.scss<\/strong>\n\n@import \"settings\/_settings.scss\";\n@import \"site-settings\";\n\n\/\/ Import Mixins\n@import \"foundation.scss\";\n\narticle section {\n @include xy-gutters($gutter-position: top bottom, $gutter-type: padding);\n}\n<\/pre>\n\n\n\n\/\/ file: gulpfile.babel.js<\/strong>\n'use strict';\n\nimport gulp from 'gulp';\nimport autoprefixer from 'gulp-autoprefixer';\nimport concat from 'gulp-concat';\nimport sass from 'gulp-sass';\nimport sourcemaps from 'gulp-sourcemaps';\nimport cssNano from 'gulp-cssnano';\nimport rename from 'gulp-rename';\nimport gutil from 'gulp-util';\n\nglobal.paths = {\n\tsite: {\n\t\tscss: 'assets\/scss\/*.scss',\n\t\tdist: 'dist'\n\t},\n\t'foundation': {\n\t\tscss: 'node_modules\/foundation-sites\/scss\/'\n\t}\n};\n\ngulp.task('sass', () => {\n\tgulp.src(global.paths.site.scss)\n\t\t.pipe(sass( {\n\t\t\t\tincludePaths: [global.paths.foundation.scss]\n\t\t\t} ).on('erroor', sass.logError))\n\t\t.pipe(autoprefixer())\n\t\t.pipe(gulp.dest(global.paths.site.dist))\n\t\t.pipe(rename( {suffix: '.min'} ))\n\t\t.pipe(gulp.dest(global.paths.site.dist));\n\n});\n\ngulp.task('default', ['sass']);\n<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
\n