Mastering Advanced Sass & Workflow with Zurb Foundation (Part 2)

By Harry Manchanda

Welcome back! In the previous article, we covered all the advanced topics that Sass has in its arsenal, but the thing is you need to build a website, you need a grid for your layout, you need some excellent Components, Utility library, those neat JS plugins, succinctly put you need a web framework!

In this part, we will look to implement all of the learning that we had in the previous article into the workflow of Foundation framework.

We will learn about the Foundation’s Sass Variables, and it’s Settings file, then we will deep dive into those functions and mixins that foundation provides. We will also talk about on how to build both horizontal and vertical grid semantically through mixins by generating your own classes (and not default classes).

Why Zurb Foundation?

Foundation is the most advanced responsive front-end framework in the world. Foundation 6 has been designed to get your project from prototype to production efficiently! It includes a full range of modular and flexible components that get styled easily. It has a collection of HTML, CSS, and JavaScript that contains design patterns that you can build upon on yours next website design.

It also includes an optional prototype library that you can use to prototype layouts and UI quickly. These prototype library can be quickly thrown away thanks to the mixins which helps you to use your own custom classes or swap classes for mixins in production for cleaner markup.

Why not Bootstrap? Bootstrap is world’s most popular front-end component library then why Foundation? I heard Bootstrap 4 is in Sass? Bootstrap Styling makes me feel comfortable?

I think that Bootstrap is an excellent framework and especially with their default styling as it helps the developer’s who are not good in CSS to make their website designs with ease. But the problem arises when you need to customise the project with your own CSS classes and to write your very own advanced Sass code like functions, mixins, loops, directives, and maps that compile to CSS for the browser.

At another flip of the coin, Foundation has excellent support for Sass functions and mixins which as of yet Bootstrap doesn’t have in comparison. In layman terms, right now you can’t use Bootstrap for your own Advanced Sass code, and thus Foundation is a great bet if you are looking to code up a website layout in Sass/SCSS.

Foundation Sass Installation

There are many ways to install Foundation but for Sass Installation, you first need to get Node and then the process is quite like this:

You can install the Foundation CLI by this below command. Please note that you may need sudo to run this.

npm install --global foundation-cli

After that just run foundation new and you will be able to install foundation with their interactive interface.

Running Into Problems? You can manually set this up too, click here for more info.

Sass Variables (Settings file)

The _settings.scss is a file which contains all the default variables that exist in Foundation. You can make your changes in that one file as per your requirements. You can download the latest settings file from here.

Sass Functions

Behind the scenes, Foundation is powered by a set of utility Sass functions that help them work with colors, units, selectors, and more. But this is not all; you can use them to your advantage too just like Vanilla functions in Part 1. Here are some examples:

$color1: #0875bd;
$color2: #0EA29D;
$num: 40px;
$int1: 12;
$int2: 15;

$a: color-luminance($primary-color); // Checks the luminance of $color.
$b: color-contrast($color1, $color2); // Checks the contrast ratio of two colors.
$c: strip-unit($num); // Removes the unit (e.g. px, em, rem) from a value, returning the number only.
$d: rem-calc($num); // Converts one or more pixel values into matching rem values.
$e: gcd($int1, $int2); // Finds the greatest common divisor of two integers.

And the output,

.a { color: 0.17699; } /* color-luminance($primary-color); */
.b { content: 1.6; } /* color-contrast($color1, $color2); */
.c { content: 40; } /* strip-unit($num); */
.d { content: 2.5rem; } /* rem-calc($num); */
.e { content: 3; } /* gcd($int1, $int2); */

The whole list of functions provided by foundation can be found out here.

Sass Mixins

Foundation provides mixins for generating your own classes for all the components, utility library with ease. They also provide some generic but handy mixins like CSS triangle. So, you can use those mixins to generate your own classes to create own Semantic CSS.

Yup Semantic CSS, whether it’s SMACSS or BEM or ECSS or any other CSS methodology, just use it right away in your projects.

General Mixins

Foundation includes some handy Sass mixins to quickly create styles or to extend and truly customize an existing component.

Let’s look at some of these generic mixins in the toolset

CSS Triangle: You can create a CSS triangle, which can then be used for creating dropdown arrows, dropdown pips, and much more. You can use this mixin inside a &::before or &::after selector, for attaching the triangle to an existing element. It takes three parameters: $triangle-size, $triangle-color, and $triangle-direction respectively.

.triangle-up { @include css-triangle(5px, black, up); }
.triangle-down { @include css-triangle(20px, #f00, down); }
.triangle-right { @include css-triangle(60px, green, right); }
.triangle-left { @include css-triangle(10px, blue, left); }

Here is the output for the above code (yes Foundation’s Sass does all the heavy lifting for you).

Codepen:

Hamburger Icon Mixin: You can create a menu icon with a set width, height, number of bars, and colors. This mixin uses the height of the icon and the weight of the bars to determine the spacing in between the bars. By default, it takes three parameters: $color, $color-hover, $width, $height, $weight, and $bars respectively.

.hammenu { @include hamburger($black, $dark-gray, 20px, 16px, 2px, 3); }

And with that single line of code, you just got a hamburger menu in your project. But remember, this isn’t that simple as it looks. Check out the generated code below!

Codepen:

I hope by now, you would be understanding that why these mixins are far better then choosing to go with Vanilla CSS. But this is not all, there are many more generic mixins available for you which can be found here.

Prototyping Utility Mixins

Quickly prototype layouts and UI with Foundation’s Prototyping Utility mixins. These mixins are great realizing your sketches and mockups into hi-fi coded prototype’s ultra fast.

Margin Helper Mixin: You can use the margin helper utility as a mixin too; all the values are multiplied by $global-margin which by default is equal to 1rem. It takes 4 parameters: $top, $right, $bottom, and $left respectively.

.foo { @include margin(1, 0, 2, null); }

This above code will generate the below output. See how margin-left property wasn’t printed as this mixin also accept null as a value to reduce the CSS output.

.foo {
  margin-top: 1rem !important;
  margin-right: 0rem !important;
  margin-bottom: 2rem !important; }

Box Mixin: This mixin helps you to create a square, rectangle or a circle quickly. It takes three parameters: $width, $height, and $circle respectively.

.bar { @include box(1rem, 2rem); } // Rectangle
.baz { @include box(1rem); } // Square
.shaz { @include box(1rem, $circle: true); } // Circle

And this below is the Generated output,

Codepen:

See how these utilities are so much better and easy than those utility libraries. If you looking for more, then the whole list of Prototype specific mixins can be found here.

Flexbox Utility Mixins

Flexbox makes horizontal and vertical alignment painless, with the help of CSS properties like align-items, align-self, and justify-content. It includes a handful of classes for these properties, which will work with any flexbox-enabled component.

But hey, it’s not all about those classes, you can access all those helper classes as Sass mixins also. Please note that for building your very own flexbox component, you will need to use the flex() mixin to get started.

.my-flexbox-component {
  @include flex();

  // Horizontally or vertically aligns the items within a flex container.
  // => @include flex-align($x, $y);
  @include flex-align(center, middle);

  .sidebar {
    // Vertically align a single column within a flex row.
    // Apply this mixin to a flex column.
    // => @include flex-align-self($y);
    @include flex-align-self(bottom);
  }
}

Full list of Flexbox specific mixins can be found here.

Component Specific Mixins

Foundation provides mixins for every component out there. Unfortunately, I can’t cover all the components, so I am going to provide an example for mixins of button component but please note that all the components are being included like this only so it shouldn’t be a problem.

Button Mixin: This mixin helps you to add styles to your buttons as per your needs. Please note that for more granular control over styles, you should be using the individual button mixins. It takes 5 parameters: $expand, $background, $background-hover, $color, and $style respectively.

.my-button { @include button(false, $primary-color, auto, auto, hollow); }

As you can see, I have set $background-hover, and $color to auto respectively, as this automatically generate a color for me based on the background color.

For hover, it will darken by 15% on hover, whereas producing a white or black color for $color based on the contrast with the background. Check the output now within the codepen, yes yes all this below code is generated by the above single line Sass.

Codepen:

As I said before, I can’t cover all the components, but this process is same for all the components of foundation. Head out to docs, for more components.

Horizontal Grid (Build Semantically)

You can create a horizontal grid semantically with your own classes with ease. Here is a small example for the same, thing to be denoted is that .wrapper class is our grid container so that its center’s content in our device viewport.

The .row class will be our grid, whereas .content, and .sidebar will be our custom cells. The cells have been setup in such a way that the content will take up the remaining size not used by sidebar thanks to the handy utility provided by flexbox!

HTML Markup

<div class="wrapper">
    <div class="row">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
</div>

SCSS Code

.wrapper {
  // Creates a max width container, designed to house up your grid content.
  // => @include xy-grid-container($width);
  @include xy-grid-container();
}

.row {
  // Creates a container for your flex cells.
  // => @include xy-grid($direction, $wrap);
  @include xy-grid();
}

.content {
  // Creates a cell for your grid.
  // => @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
  @include xy-cell(12);

  // Wraps a media query around the content you put inside the mixin. 
  // => @include breakpoint($value) { ... }
  @include breakpoint(medium) {
    @include xy-cell(auto);
  }
}

.sidebar {
  @include xy-cell(12);
  @include breakpoint(medium) {
      @include xy-cell(4);
  }
}

Codepen:

Vertical Grid (Build Semantically)

Inspired from CSS Grid, XY Grid was made and if there is one thing that XY Grid brought to the web framework community was the vertical grid. Vertical Grid is used for splitting up the screen vertically, lets you create a grid in a vertical direction and most commonly been used for app style layouts.

Here is a small example for this vertical grid, the thing to be denoted is that this .page will be our grid, whereas header, .content, and .footer will be our custom cells.

HTML Markup

<div class="page">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

SCSS Code

.page {
  // Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
  // => @include xy-grid-frame($vertical, $nested, $gutters, $breakpoint, $include-base);
  @include xy-grid-frame(true);

  // Creates a container for your flex cells.
  // => @include xy-grid($direction, $wrap);
  @include xy-grid(vertical, false);
}

.header {
  // Creates a cell for your grid.
  // => @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
  @include xy-cell(2, $gutter-position: top bottom, $vertical: true);
}

.content {
  @include xy-cell(7, $gutter-position: top bottom, $vertical: true);
}

.footer {
  @include xy-cell(3, $gutter-position: top bottom, $vertical: true);
}

Codepen:

I hope you loved it but hey there is a lot of more customization that you can do with XY Grid and it’s mixins. Wanna know more, head over to the docs.

Directives for Console Output

While working with the foundation framework, it’s entirely reasonable that you will face some console errors and warnings. So, for the sake of the same, you should know what all these console outputs mean. Here is a simple definition:

  1. Debug: @debug prints the value of the expression it contains (variable, math, etc.) to the console. This is ideal when you are in between of a complex bit of math, and you need to know what one of your variables contains the very right moment.

  2. Warn: @warn is a warning to the developer through which a message is sent that needs to be read, but please note that this doesn’t stop anything but instead allows the compiler to finish its job and write all the CSS. @warn is mostly suited for deprecation notices or even in the cases where you need to tell the developer to follow certain best practices.

  3. Error: @error is for stopping the Sass compiler altogether and sending the string of text as a fatal error within the compiler’s output. You should be using this when you need to send a message that stops all the process immediately. This is ideal for letting another developer know that they have messed up with something within the code and they need to correct it before moving further ahead.
// Print the output to the console.
@debug 'Red: #{$red} | Green: #{$green} | Blue: #{$blue}';

// Shows warning but doesn't break anything.
@warn 'Deprecation, $header-sizes has been replaced with $header-styles.';

// Show error and stops the whole process
@error 'No $prop specified.';

Thanks a lot…

  • If you liked my article and also my passion for teaching and want to say hello… my twitter handle is @harmanmanchanda for getting in touch! My DM’s are open to the public so just hit me up.
  • All the code discussed in the article can be found here.

Source:: scotch.io