CSS Grid is available on the most of the major browsers now and it is time for us to use this powerful native CSS layout system.

The collection below will give you all the necessary resources, tutorials, articles and examples to get started with CSS Grid.

All links below are great but if you are running out of time, I would recommend to check out those links with 👍 first.

The latest resources comes with 🎉.

I have built Responsive Mondrian Art with CSS grid. Please check it out and gives me loves if you liked it 💛 🙌

References

• W3C
• 👍 A Complete Guide to CSS Grid — CoDrops
• 👍 A Complete Guide to Grid — CSS Tricks
• CSS Grid Layout — MDN
• Best Practices With CSS Grid Layout

Can I Use?

• 👍 CSS Grid Layout

Tutorials

• 👍 Grid by Example
• Learning CSS Grids
• 👍 🎬 CSS Grid Layout Crash Course
• How to create a simple layout with CSS Grid Layouts
• 👍 Here’s a Super Quick Way to Try out CSS Grid
• Building a Trello Layout with CSS Grid and Flexbox
• CSS Grid Layout Slideshow
• 👍 CSS Grid Gotchas And Stumbling Blocks
• An Introduction to CSS Grid Layout: Part 1
• 👍 Getting to know CSS Grid Layout
• 👍 🎬 CSS Grids for Everyone
• How to prototype websites quickly with CSS Grid
• Learn CSS Grid in 5 Minutes
• Introduction to CSS Grid Layout
• 🎬 CSS Grid Explained in 7 Minutes (with diagrams and code)
• 👍🎬 CSS Grid with Wes Bos
• Grid to Flex

Articles & Talks & Examples

• 👍 Responsive Mondrian Art with CSS Grid
• An Introduction to the CSS Grid Layout Module
• Practical CSS Grid: Adding Grid to an Existing Design
• Case Study: My First Practical CSS Grid Layout
• 3 CSS Grid Features That Make My Heart Flutter
• Playing with CSS Grids
• 🎧 CSS Grid with Jen Simmons & Rachel Andrew
• Breaking Out With CSS Grid Layout
• Replace Bootstrap Layouts with CSS Grid
• The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment
• Will we be flattening our HTML for CSS Grids?
• How to combine Flexbox and CSS grids for efficient layouts
• 🎬 CSS Grid Layout by Rachel Andrew — An Event Apart video
• Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins
• Comic book style layout with CSS Grid
• A fearless guide to using CSS Grid today
• 👍 Rebuilding slack.com
• Naming Things In CSS Grid Layout
• The Story of CSS Grid, from Its Creators
• Monopoly board
• How to Build a Grid Inspector
• 👍 Flexbox and Grids, your layout’s best friends
• Using CSS Grid: Supporting Browsers Without Grid
• Aspect Ratios for Grid Items
• CSS Grid Starter Layouts
• 👍 Common Responsive Layouts with CSS Grid (and some without!)
• 👍 How to make your HTML responsive by adding a single line of CSS
• Design Systems and CSS Grid
• Calendar with CSS Grid
• 🎬 CSS Grid in Production
• How to recreate Medium’s article layout with CSS Grid
• CSS Grid Layout secrets revealed
• 11 Things I Learned Reading the CSS Grid Specification
• 🎬 Designing for 4-sided viewports with CSS Grid
• Introducing CSS Gridish: An Open Source Tool to Help Your Team Adapt CSS Grid Today
• Recreating the GitHub Contribution Graph with CSS Grid Layout
• 👍 CSS Grid layout — crossed sections
• Counting With CSS Counters and CSS Grid
• Using Media Queries For Responsive Design In 2018
• How I design with CSS grid
• 🎬 SmashingConf London 2018 — RACHEL ANDREW
• CSS Grid for UI Layouts
• 🎬 Whitespace on The Web! — with CSS Grid
• 🎬 CSS Grid like you are Jan Tschichold
• Styling Empty Cells With Generated Content And CSS Grid Layout
• 🎬 Modern Layouts with CSS Grid: Revolutionizing Visual Design on the Web
• Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
• How We Adopted CSS Grid at Scale
• CSS Grid Application Layout in Production
• Getting rid of “grid-” prefix on CSS Grid Layout gutter properties
• Another Collection of Interesting Facts About CSS Grid
• Editorial Design and CSS Grid: Inspiration and examples
• Using pseudo-elements with CSS Grid
• 🎬 How to use CSS grid today in the real world
• More accessible markup with display: contents
• Grid Level 2 and Subgrid
• CSS Grid: More flexibility with minmax()
• CSS Grid — Responsive layouts and components
• New CSS Features That Are Changing Web Design
• Using grids to create copies
• 🎬 Overlap on the Web, Graphic Design Made Easy with CSS Grid
• Grid Layout with Motion Hover Effect and Content Preview
• Getting Started With CSS Layout
• The CSS Grid Layout vs CSS Frameworks Debate
• 🎬 CSS Grid Eliminates Margin Collapsing?!?
• 3 CSS Grid Layouts
• How To: Use CSS Grid to Mix and Match Design Patterns
• The Layouts of Tomorrow
• CSS Grid Level 2: Here Comes Subgrid
• CSS Grid in IE: CSS Grid and the New Autoprefixer
• The Quirks of CSS Grid and Absolute Positioning
• Gallery Grid With CSS Grid
• How to quickly prototype apps with CSS Grid and CSS Variables
• How to build complicated grids using CSS grid
• Isometric eCommerce CSSGrid
• 🎬 9 Biggest Mistakes with CSS Grid
• 🎬 Should I try to use the IE version of Grid Layout? Revisited for 2018
• Don’t use empty or low content for your design system grid examples
• Preventing a Grid Blowout
• Creating Layouts with CSS Grid
• 🎉 Creating horizontal scrolling containers the right way [CSS Grid]

Challenges

• 👍 Grid Garden

Tools & Libraries

• CSS Grid Cheat Sheet
• CSS Grid highlighting
• Griddy
• Hexi-Flexi Grid
• Grid Examples
• CSS Grid Template Builder
• cssgr.id
• Layoutit!
• 👍 GRID: A Simple Visual Cheatsheet for CSS Grid Layout

❤️ Do you know any good links for CSS Grid?

If you would like to share any good CSS grid links, please send me the link in the comment below or through my Twitter @iamryanyu.

Learn awesome front-end skills and boost your front-end career at FrontEnd30.com today 👍

Few weeks ago, I have shared the step by step guid of how to animate SVG with GSAP. In this article, I will show you how to animate a button with Vivus JS which helps you draw SVG line.

Before reading further, if you are interested in finding out which one to use between CSS and JS for animation, check out my previous article, Face Off: CSS vs JS Animation.

Preparation

The details of animation are:

• By default, the button will have no background color, but the gray thick border (10px).
• On hover, the background color will appear from the center to outer diagonally. The background animation will not fully cover the whole button but will stop to give a bit of space at the top right and bottom left corner.
• Also on hover, two lines will start to draw. First one starts from the top left and ends at the bottom right. Second one starts from the bottom right and ends at the top left.

For this animation, we will use with:

• jQuery
• Vivus JS
• OOCSS (to dynamically change the color of the button)

Step 1: Initial Button Layout

By default, we will show a button with no background color and gray border.

HTML

<a href=”#” class=”btn btn-stroke-draw”>
  <span class=”btn__txt”>This is<br/>black button</span>
</a>

SASS

.btn {
  background-color: transparent;
  border: 0;
  display: inline-block;
  text-decoration: none;
}

.btn-stroke-draw {
  height: 113px;
  overflow: hidden;
  position: relative;
  width: 341px;

  &::before {
    border: 10px solid $btn-gray-stroke;
    content: '';
    height: calc(100% — 20px);
    left: 0;
    opacity: 1;
    position: absolute;
    transition: opacity $transition;
    width: calc(100% — 20px);
  }
}

.btn__txt {
  text-align: center;
  z-index: 1;

  .btn-stroke-draw & {
    // Flex container
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
  }
}

.btn will reset the button style and .btn-stroke-draw will contain all the initial button styles including the border.

Step 2: On Hover, Filling the Background Color

For the FS (functional Specifications) #2 above, when you hover on the button, we will fill the background color diagonally. In order to do this, we need to decide the color theme of the button; we will apply the black color for this example.

For the black color, we will add .btn-black OOCSS in the button element and add black hover styles in SASS.

HTML

<a href=”#” class=”btn btn-stroke-draw btn-black”>
  <span class=”btn__txt”>This is<br/>black button</span>
</a>

SASS

.btn-stroke-draw {
  &:hover::before {
    opacity: 0;
  }

  &::after {
    content: '';
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: all $transition;
    width: 100%;
  }

  // Overlay color on hover
  &.btn-black::after {
    background-color: $btn-black-bg;
  }

  &:hover::after {
    height: 230%;
    opacity: 1;
  }
}

.btn__txt {
  // Font Color
  .btn-black & {
    color: $btn-black-font;
    transition: color $transition;
  }

  .btn-black:hover & {
    color: $btn-black-font-hover;
  }
}

This diagonally filling effect can be found in Codrop, Creative Button Styles. Basically the effect is happening in ::after pseudo element. By default, you set the ::after with height: 0 and rotate to 45 degree. When you hover on the button, the height will be increased to 230% with transition.

Step 3: Draw the Border on Hover

For the FS #3 above, we need one more animation, on hover, drawing the border line. To do this, we will use a plugin called Vivus JS. This is a library providing a lot of options for you to draw line on SVG path.

What we will be doing is we will add a sqare shaped SVG with two paths on top of the ::after pseudo. And then we will add new attribute (data-btnstroke-index) in the button element to assign the index so that we know which button the line should be drawn on.

HTML

<a href=”#” class=”btn btn-stroke-draw btn-black” data-btnstroke-index="0">
  <span class=”btn__txt”>This is<br/>black button</span>
  <svg xmlns=”http://www.w3.org/2000/svg" version=”1.1" viewbox=”0 0 341 113">
    <path fill=”none” d=”M0 0 H341 V113" stroke-width=”20"></path>
    <path fill=”none” d=”M341 113 H0 V0" stroke-width=”20"></path
  </svg>
</a>

SASS

.btn-stroke-draw {
  // Children
  svg {
    position: absolute;
    top: 0;
    left: 0;
  }

  // Stroke Color
  &.btn-black path {
    stroke: $btn-black-stroke;
  }

  &.btn-red path {
    stroke: $btn-red-stroke;
  }

  &.btn-blue path {
    stroke: $btn-blue-stroke;
  }
}

JS

jQuery(document).ready(function($) {
  var i, vivusEle, vivusItems;
  vivusItems = [];
  vivusEle = $(‘.btn-stroke-draw svg’);

  i = 0;
  while (i < vivusEle.length) {
    vivusItems.push(new Vivus(vivusEle[i], {
      duration: 30,
      type: 'async',
      start: 'manual',
      animTimingFunction: Vivus.EASE_OUT}));

    i++;
  }

  $(‘.btn-stroke-draw’).hover((function() {
    var $this, thisBtnIndex;
    $this = $(this);
    thisBtnIndex = $this.attr(‘data-btnstroke-index’);
    vivusItems[thisBtnIndex].stop().play();
  }), function() {
    var $this, thisBtnIndex;
    $this = $(this);
    thisBtnIndex = $this.attr(‘data-btnstroke-index’);
    vivusItems[thisBtnIndex].stop().play(-1);
  });
});

That’s it. It’s really simple but can produce an awesome effect. If you want to add new color theme, add new OOCSS (e.g., btn-red) and add styles accordingly.

For the complete code, please check the CodePen page here and if you have any questions, feel free to let me know.

Last week, I talked about Front-end Checklist for Component Development to help you build solid components. Today, I would like to share some plugins I usually use when I do the front-end development of websites or components.

Those lists help not only enhance your front-end development workflow, but also improve the quality of your work. Those include:

• Gulp
• Git
• SVG Sprite
• Fastclick
• Hammer JS
• jQuery Validation
• jQuery Waypoint
• GSAP/Velocity JS
• GTM & GA

Gulp

Gulp helps you automate front-end tasks for you. If you know Grunt, it’s pretty much the same.

At Squiz, we have our own Boilerplate with Gulp and it does many jobs for front-end developers. Some of them are:

• Compile SASS to CSS
• Prettify and minify JS and CSS code
• Complie different plugins in one file called plugins.min.js
• Running a web server with gulp serve
• Syncing browsers with BrowserSync
• and many more

There are a lot of debats which task manager is better, for example Grunt vs Gulp. From my experience, Gulp provides simpler and cleaner configuration logic. If you want to find out more about the comparison, check out this article. Though it’s really up to you which task runner to use.

Git

The biggest issue, while developing websites or components within a team, is collabration. Let’s say there are several developers are working on the same component, but it’s really hard to compare and merge each other’s work in one final place.

In the past, there were many methods introduced such as SVN, but the problem with SVN, for example, is the code base is centralised. That means if you cannot reach the main server (for example, no internet), basically you cannot commit.

However, Git is decentralised and you can keep committing on your local machine.

These days Git is very common way to collaborate your work with other team members and I believe most of the companies using it.

Some of the popular Git hosting companies are:

• GitHub
• Bitbucket
• GitLab

SVG Sprite

This SVG Sprite workflow has been introduced in my previous article. It helps you create SVG sprite without working on Illustrator and make the workflow much simpler and faster.

I have been using this workflow for several projects now and it has been working really well so far.

Check out this article to find out the detailed guide of how it works.

Fastclick

If you worked on the responsive websites on mobile devices, you may have found that there is 300ms delay between a physical tab and the firing of a click event.

The delay exists because the mobile browser needs to identify if you intend to do a single tap or double tap. But because of the delay, the interaction on the single tap looks laggy.

To eliminate this, Fastclick has been developed. For more details, please check their GitHub page.

Please note though, as of Chrome 32 for Android, the delay will be gone with any sites uses:

<meta name=”viewport” content=”width=device-width”>

To find out more details about this, please check this article, 300ms tap delay, gone away.

Hammer JS

If you want to remove the 300ms delay but also provide richer mobile experience, I highly recommend Hammer JS.

With Hammer JS, you can provide many recognisers such as:

• Pan
• Pinch
• Press
• Rotate
• Swipe
• Tap

Moreover, each recogniser provides many flexible options. For example, you can set the number of taps and interval for Tap.

If you want to use Hammer JS with jQuery, you need to extend it with a plugin.

Alternatively, you may also want to check out jQuery Mobile, though from my experience, it’s a bit heavier than Hammer JS.

jQuery Validation

Every websites contain at least one form. In my opinion, the form is the most important component due to most of the time, it’s directly related to the business objectives. Therefore when you develop a form, there are many things you need to consider and one of them is to properly validate the form before it’s been submitted.

There are many form validation plugins available, but I found that jQuery Validation provides a quite solid form handling solutions.

It’s very flexible so you can apply the validation check on many different scenarios such as postcode or telephone number format.

However, one caveat is that its documentation is quite hard to read and difficult to find. Though once you get used to it, you won’t have much trouble using this plugin.

jQuery Waypoint

These days a lot of websites provide an interactive experience when you scroll down the page. For example, as you can see from this website, the content below the fold appears smoothly when you scroll down the page.

You can surely write vanilla JS code to detect when a section reached to a certain point in the page, however there is a really nice jQuery plugin called jQuery Waypoint, which can help you save a lot of time and provides many options.

Here are some awesome examples with Waypoint:

GSAP/Velocity JS

Most of the websites nowadays are built on animation and many animation libraries are available out there.

When you add animation to your website and components, there are several things you need to consider. To find out more about it, please check out my previous article, Face Off: CSS vs JS Animation.

My two favourite libraries are

• GSAP
• Velocity JS

You can see how those two libraries are used from my previous articles too:

• SVG Web Animation with GSAP
• Front-end Checklist for Component Development

Here are two awesome example of animation built on GSAP/Velocity JS.

GSAP

Velocity JS

GTM & GA

I am a big fan of analysing data of how users are interacting with my websites or components. In doing so, I can identify which parts need to be improved to provide better user experience.

There are many tools avaialble to collect data but my favourite tools are GTM (Google Tag Manager) with GA (Google Analytics). Both are available for free and provide huge amount of data.

I found that a lot of clients/developers just wanted to change some parts of the websites/componets with no reason (e.g., just to make it looking better), but I am strongly against it. I believe changing the websites will directly impact on the user behaviour on the page so there sholud be strong reasons of why and how it should be changed with solid data.

Some of the common data to collect are:

• How many people clicked on the button in the hero banner
• How many people interacted with the slider
• How many people dropped out on the process of checkout
• How many people scrolled down the page and how far they reached
• and many more

Summary

Those listed above are just starting point when I develop websites/components. If you know any other awesome tools or plugins, please feel free share with me.

I have been developing websites for many many years and every single time when I develop components for webpages, I go through my own checklist to prevent to having the components broken/fragile. So far, it has worked pretty well.

In this article, I would like to share the checklist I use when I develop components. Throughout the article, I will use an accordion as an example.

The list of the checklist is in order as below:

1. Understanding Component
2. JS-enabled
3. Accessibility
4. Responsiveness
5. Touch enabled
6. Animation
7. Browser/Device Compatibility
8. Print.css
9. QA

If you have any other suggestions/feedback, please share with me.

1. Understanding Component

Before I write any code, I always spend some time to understand how the component should work. For example, let’s say we are going to build an accordion looking like:

The FS (functional specifications) for the accordion will be:

1. Initially, all of the content boxes are collapsed.
2. When clicking upon the header, its child content box will be expanded.
3. When it’s expanded, the arrow will rotate 180 degree.
4. The content box will be kept expanding even if other content boxes are expanded.

2. JS-enabled

After I understand how the component should behave, the very first thing I always do is thinking about the scenario when JS is disabled.

Let’s say when we hide all of the content boxes with CSS (display: none;) to satisfy the FS #1 above, users on JS-disabled browsers will never be able to see the content in the content boxes.

All content boxes of the accordion should be expanded by default and when JS is loaded and detected, you can hide the content boxes with JS.

One way I usually do is:

1. By default, no-js class will be added in the HTML body tag.
2. In JS file, I add below code to change the no-js class to js-enabled.

$('body').removeClass('no-js').addClass('js-enabled');

When the js-enabled class is detected, the content boxes can be hidden.

$('.accordion__content').hide();

3. Accessibility

Secondly, I think about the accessibility. The accessibility should be considered at the early stage of the component development. By doing so, you can much better understand how the component should be built.

The accordion as an example should contain several ARIA tags to indicate the screen readers what is happening when interacting with the accordion.

.accordion__btn — The heading

By default, it should contain aria-expanded=”true”, aria-controls=”id of its child content box” and title=”heading description”.

<button aria-expanded=”true” aria-controls=”accordion-1" title=”Heading 1">

When JS is loaded, the aria-expanded needs to be updated to false by JS as we are going to collapse all of the content boxes.

<button aria-expanded=”false” aria-controls=”accordion-1" title=”Heading 1">

.accordion__content — The Content Box

By default, aria-hidden needs to be false. It should also contain id.

<div id=”accordion-1" aria-hidden=”false”>

When JS is loaded, the aria-hidden needs to be updated to true by JS.

<div id=”accordion-1" aria-hidden=”true”>

heydoneworks shares some great ARIA examples and you can specifically find the example for the accordion here.

My company, Squiz, also has developed a great tool to check if your web pages are met with the coding standard and passed the WCAG. It is called HTML_CodeSniffer. You should check out and start to use it.

4. Responsiveness

Once you have better ideas of the accessibility, my next consideration is how the component should work on different breakpoints.

In Web Directions few weeks ago, Ethan Marcotte and Karen McGrane empathised that we need to focus on the content level instead of the page level for the breakpoints.

I totally agree and have always been focusing on the individual component level when dealing with the breakpoints.

The component should work well independently with any breakpoints and you should not limit the breakpoints only to few page levels, for example, mq-mobile or mq-tablet. What I usually do is to set several breakpoints (e.g., mq-700, mq-900, mq-1200 etc) for each component to make it look great on any container sizes.

For our accordion example, there is not much required for the responsiveness. Though one thing we can consider is to change the accordion to tabs on bigger container sizes but that’s out of scope in this article.

5. Touch enabled

Now we have a quite solid idea of how we are going to build the component. Before starting to write any code, we need to know if we should consider the behaviour of the component on touch enabled devices.

Our accordion example won’t need any touch behaviour but most of the time I install Hammer JS and use tap instead of click which prevents some issues on iOS such as the double click event.

Also it gives you a lot of touch gestures such as pan, pinch, press, rotate and swipe so you can provide richer user experience on touch enabled devices.

If you are going to use Hammer JS with jQuery, check out this plugin.

6. Animation

Before we code, there is one more thing you need to consider, animation. Adding animation properly to components can improve the usability and make static pages more lively.

There are few things you need to consider though when you do animation.

1. Always remember, simple is the best. Don’t try to add too many animations; it will rather distract people and significantly decrease the usability.
2. The animation should be meaningful. Having animation should indicate something has happend on user’s interaction.
3. Use proper technology. Read my previous article, Face Off: CSS vs JS Animation for more details.

For our accordion, we need to satisfy #3 FS above so we will rotate the chevron arrow with the spring effect. In my CodePen, I used Velocity JS for the animation.

7. Browser/Device Compatibility

Now it’s time to write code. Personally I use Jade, SASS and CoffeeScript with jQuery for my personal projects.

When coding, it is important to always consider the compatibility of different browsers/devices. Especially if you need to support old browsers like IE9, many latest CSS technologies won’t work (e.g., flexbox, calc, transform, transition etc).

One of the examples for our accordion is, on IE9, you cannot rotate the <svg> of chevron icon in the SVG Sprite. To rotate it, you need to wrap <svg> with <span> and rotate <span> instead of <svg>.

Consider those compatibility issues and also revisit those mentioned above while coding.

8. Print.css

We finally built our component. Before we send our awesome component to QA, we need to provide the print.css. The print styling is another long topic but you can check out this article which gives you a good starting point.

For our accordion, we need to get rid of the background color and make the font color to black. Also re-draw the borders to divide each box. Finally we will get rid of the icons.

9. QA

It is always a good idea to ask someone to test components you developed. With fresh eyes, there are always some issues picked up.

So you shall not pass QA?

If you followed the list above, I am very confident that you should be able to build very solid components and enjoy your work.

In Summary

The lists above are from my own experience and have been worked very well so far. But if you have any other suggestions/comments/questions, I am more than happy to discuss so please leave your thoughts :)

At the moment, I am working on new project which requires animating icons. In this article, I will show you how I did the animating on one of the icons with GSAP (Green Sock Animation Platform).

The end results would look like below. When you hover over the graph, it will be animated.

When I do some web animation, I usually go with 3 different methods:

• CSS
• Velocity JS
• GSAP

Here are in-depth details of when to use CSS animation over JS animation, but in general,

• if it’s something very simple, I go with CSS.
• if it’s a bit more complex, I go with Velocity JS.
• if it’s something more complex, I go with GSAP.

What We Need?

First of all, we need to prepare few things as listed below:

• SVG code: as we need to animate <path> inside SVG, we need to embed the SVG code in HTML.
• jQuery: as jQuery is a common library, we will use jQuery in this example.
• GSAP: we will animate the icon with GSAP.

SVG code

The graphic was prepared in Illustrator by our designer at Squiz and the SVG code was optimised from SVGOMG.

Please note that the classes have been added in each <path> so we can target the specific <path> element with GSAP.

jQuery

In Codepen, I have added the jQuery (version 2.2.2).

GSAP

There are two ways you can animate with GSAP:

• GSAP TweenLite: you can selectively add features. The biggest advantege over TweenMax is the minimal file size.
• GSAP TweenMax: TweenMax includes all the features of TweenLite and also extends TweenLite with more features.

In this example, we will go with TweenMax (version 1.18.3).

The Idea

When hovering over the graphic, we will animate that:

• the red bar and yellow bar will be taller. Also the star above each bar will move up
• the green bar will be shorter and the star above the bar will move down

We will also apply the spring easing effect.

GSAP

To make the bar taller/shorter, we will apply scaleY. To move the start up/down, we will apply translateY. If you want to find out what to use between position x and translateX, refer to my previous article here.

Let’s start with the bar animation. To start with, you need to call TweenMax:

TweenMax.to(selector, duration, { animation values });

For the red bar, let’s send those details below:

• selector: $(‘.graph__bar — red’)
• duration: 1.2
• animation values: scaleY: 1.5 and ease: Elastic.easeOut.config(1, 0.2)

For the easing, as mentioned above, we will apply the spring effect. You can find the all supported easing effect from Ease Visualizer.

So the code will look like:

TweenMax.to($('.graph__bar--red'), 1.2, {
  scaleY: 1.5,
  ease: Elastic.easeOut.config(1, 0.2)
});

Now when you hover over the graph, you will see the red bar is increasing with the spring effect. However, it doesn’t get taller from the bottom, but insted from the top. To make it taller from the bottom, we need to set the transform-origin from the bottom which looks like:

transformOrigin: '50% bottom'

So the completed code for the red bar looks like:

TweenMax.to($('.graph__bar--red'), 1.2, {
  scaleY: 1.5,
  transformOrigin: '50% bottom'
  ease: Elastic.easeOut.config(1, 0.2)
});

Now let’s make the yellow bar taller and green bar shorter.

Now when you hover out, let’s make the bar height to the original value which is 1. This time, we will not apply the transformOrigin because we just want the bars to come back to the original position.

Let’s put them all together in jQuery hover function and assign the selectors in variables.

Now the bar is animating great! It’s time to move up/down the star. This time we will use Y value which is equivalent to translateY. The code will look something like:

Let’s clean up the code by assigning repeated values to variables and combining them all together. The code looks like:

That’s all. It’s really simple to animate the icons with GSAP. Refer to GSAP TweenMax doc to find out more details.

Also if you have any questions, please feel free to leave your comments.

I found that sometimes SVG icons don’t appear on IE11 even if the SVG code looks good. One of the examples is:

and the icon should look:

The solution on IE11 is to remove the .st# classes in the <path> 😮 and define the color with CSS explained below.

So the above SVG code may should look like:

Update (23 Sep 2016):
One of my colleagues (Michal Prazuch) noted me that xlink:href is not working on Safari. I have contacted SVG gurus, Sara Soueidan and Amelia, and they suggested to keep using xlink:href for now as it will work in all browsers, old & new.

And the Safari issue has been logged here early this year:
https://bugs.webkit.org/show_bug.cgi?id=153854

I will keep an eye on it and keep you all updated.

The code below has been re-updated to reflect back this update.

Updates (14 Sep 2016):
xlink:href has been deprecated since SVG 2 so instead use href. The code below has been updated to reflect this update.

Updates (30 Apr 2016):
This article has been listed in Codrop Collective #217.

Follow me on Twitter (@iamryanyu)

This SVG Sprite Workflow has been designed and developed in order to improve the current workflow when creating a CSS spritesheet at Squiz.

A lot of resources have been researched and studied from the various places and some of them are listed below:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
• http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
• https://css-tricks.com/svg-use-external-source/
• https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

In addition, I had a great chance to attend the Web Directions - Respond 16 in Sydney (thanks a lot to my company, Squiz, for the ticket) and Sara Soueidan, who I am a big fan of, had spoken about SVG <use>. I am really happy that what she said during her speak was exactly same as how I designed this workflow, even the two polyfills.

In this article, when I say “We”, they are not only myself and the front end developers at Squiz, but also anyone using the old CSS sprite method.

The Problems

At the moment, when we need to display icons, we usually create a CSS spritesheet with SVG and PNG (as a fallback) format. To display the icons, normally, we use CSS properties like:

• background-image
• background-position

Problem 1: Extra Work

My biggest concern always has been to open the Illustrator when new icon is introduced. This is the extra work I have definitely and always wanted to get rid of and gives the front end developers more time to focus on coding.

Problem 2: No Change on Icon Color

Another problem is we cannot change the color of icons with CSS. If you wanted to change the icon color on hover, we had to add two identical icons but in different colors. I always thought there must be a way to use only one icon and change the color with CSS, but I had no luck.

Problem 3: No Change on Icon Element Color

This is not a usual case but sometimes we want to change the color of only one part of the icon with CSS, something like below:

The Solution

To resolve those problems above, what we are going to use is SVG <use>. It will save the front end developers a lot of time by:

• No needing to work on the Illustrator anymore
• Using CSS to change colors instead of from Illustrator

This Workflow is designed based on Squiz Boilerplate (Gulp version) but I am sure it will work great with your own Boilerplate.

Workflow 1 — Install Plugins/Polyfills

To start with, we will install 1 Gulp plugin and 2 polyfills.

• gulp-svg-sprite: this plugin will do all the heavy-lifting for us. It will combine all the SVG files and generate one SVG Sprite.
  And this is the configuration for Gulp:

• svgxuse: this polyfill will be used on IE 10 - Edge 12.
• SVG for Everybody: this polyfill will be used on IE 9 and below.

Workflow 2 — Boilerplate

1. Create new folder in source/svg-sprite (change the path appropriate for your own structure). When gulp-ing, new file will be created in dist/styles/mysource_files/sprite.svg (or depending on how you set it up in Gulp configuration.
2. Include svgxuse and SVG for Everybody in the foot in HTML like below:

Please note that SVG for Everybody will be only used on IE 9.

Workflow 3 — Prepare SVG Icons

Note: ask designers to provide you individual icons in SVG format.

With this workflow, we only need to deal with each SVG file individually.

1. Let’s get an icon (or icons) from designers (or yourself). Please ask the designer to set the path color in black when they create icons.
2. Go to SVGOMG and open the icon. In the right menus, keep the options as they are, but except the ‘Merge paths’. Disable it and download.
3. Open the SVG file you just downloaded in a text editor. Search for an attribute ‘fill’ and remove them. Save the file.
4. Give the appropriate name when you save. The file name will be the ID of the SVG icon and we will use it later.
5. Put the SVG files in the source/svg-sprite.

Workflow 4 — Add SVG Icons in HTML

Now this is the fun part. Let’s start with the basic markup and explore 2 scenarios.

1. The Basic

To display the SVG icon, we are going to add <use> element. If you want to know more about <use>, please refer to the resources listed above.

The very basic markup looks like:

Using href, you can reference to the external file with the ID which is same as the SVG file name.

2. Scenario 1 — OOCSS with SVG Icon

Now let’s say you want to style the SVG icons with reset, size and color. To do that, you can simply add classes to <svg> and style them in CSS.

3. Scenario 2 — Change Icon Color of Each Element

This is a bit more complex and requires extra updates in the SVG file.

Firstly, you need to go to the individual SVG file and add fill=”currentColor” in the path you want to keep the original color.

And now let’s create OOCSS for the different color in HTML.

To apply two different colors, you need to apply the fill propery so the path with fill=”currentColor” will be filled with the fill property and the path without it will be filled by the color property.

There is another occasion like you want to apply multiple colors more than two colors to the SVG icons, but we will ignore that scenario in this article. If you want to know how to do it, please let me know.

Workflow 4 — Accessibility with 3 Scenarios

1. Link with Title

Add the title along with <svg> in <a>. Also you don’t want the screen reader keep reading the icons, so add aria-hidden to <svg>.

2. Link without Title

Sometimes you don’t want the screen readers to read the title of the link. In that case, remove the title and add aria-label to <a>.

3. No Link

When this is not a link and you want the screen reader to read out, add <title> inside <svg>. And remove aria-hiddne from <svg>.

Polyfill

Why 2 Polyfills?

As svgxuse performs better than SVG for Everybody, we will use svgxuse for the main polyfill. Please read more details from svgxuse GitHub page.

However, it requires to add SVG sprite as inline (inside HTML right below opening <body>) for IE 9 and it is out of the scope for this workflow at the moment. Even though there are some benefits with inline SVG sprite, our main focus on this workflow is to host our SVG sprite in the external file.

To resolve this issue, we will call svg4everybody.js only for IE 9.

When JS is Disabled?

As those polyfills are JS based, when JS is disabled, the icons won’t appear. However, as the purpose of those icons are decorative, it is ok if the icons are not appearing (with additional CSS to style so it still look ok without the icons) unless clients insist to have them displayed when JS is disabled. In that case, we will have to provide the fallback with PNG.

Any Feedback/Comments?

If you have any questions, feedback, comments or recommendations, please feel free to let me know.

Last week I talked with one of my friends who is a senior web developer and he was asking me some web animation questions.

And I found that many developers still have some confusions between the CSS and JS animation performance so I thought I should bring it up and share it with you.

CSS animation performs better than JS animation.

When someone says this statement, you should not agree with that, nor just disagree.

Because the statement above is more than just Yes or No question.

Long time ago, jQuery was introduced and our life became much easier in JS world. However, when it comes down to jQuery animation, our life becomes more complex and slower.

One of the biggest problems with jQuery animation is that it has no mechanism to avoid ‘Layout Thrashing’.

If you have read my previous article, changing layout is quite costly.

But due to its codebase, jQuery animation cannot avoid it.

If you want to find out more about how to avoid Layout Thrashing, check out this article:
http://wilsonpage.co.uk/preventing-layout-thrashing/

Furthermore, jQuery animation needs to serve many purpose beyond animation, so its memory consumption triggers garbage collections in the browser and it causes animations to momentarily stutter.

So what you are still saying is CSS animation performs better than JS animation?

When you are comparing CSS animation with jQuery animation, the answer is YES.

However, JS animation libraries, which bypass jQuery, deliver great animation performance. My favourite two libraries are Velocity JS and GSAP (GreenSock Animation Platform).

Those JS libraries perform much better than CSS especially when you need to deal with huge number of elements at the same time.

You can compare the performance here:
http://codepen.io/GreenSock/pen/pmknI

Also the biggest benefit using JS library is you have many more options to control than CSS such as chaining, callback, promise etc.

So now you are saying JS animation performs better than CSS animation?

It depends…

JS animation performs similar (sometimes better) level of CSS animation with more controls but they are JS based so when JS is disabled, the animation won’t work.

My suggestion is:

Use CSS animation when

• the animation is simple (e.g., button hover animation)
• the animation should work even if JS is disabled (e.g., loading bar)

Use JS animation when

• the animation requires a complex timeline
• the animation is not supported in CSS or works better with JS animation. For example, slideUp/Down is better and simpler with JS than CSS because with CSS, you need to set the max-height manually.

So now when someone asks if CSS animation performs better than JS animation, you have much more to talk about :)

Lastly, get inspired by this amazing animation (and nice music too):
http://codepen.io/gordonnl/full/byouf/

I presume you know what flexbox is and how cool it is. I won’t go into details about that but if you want to find out more about flexbox, check this link out:
http://tympanus.net/codrops/css_reference/flexbox/

and play here:
http://the-echoplex.net/flexyboxes/

Have you ever wondered how you can put only the last flex item to the right but keep all other items still left?

Something like this:

Let’s check out the func spec for flexbox on W3C, especially this section:
https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

The magic happens with the auto margin. Especially pay closer attention to this line:

Prior to alignment via ‘justify-content’ and ‘align-self’, any positive free space is distributed to auto margins in that dimension.

So if you assign the auto value to the margin property, the positive free space will be taken up.

Let’s see the screenshot below without any margin set.

You will see the free space at the right side of the last flex item.

And if you apply margin-left: auto to the last item, the positive free space will be taken up to the left dimension and the last flex item will be pushed to the right.

Awesome right? It is very good if you wanted to put the last menu item to the right.

You can apply the auto value to any directions of margin like left, right, top or bottom.

And I am sure that you now know what would happen if we apply margin: auto to the second flex item :)

As always, if you have any questions, please leave your comments.

Frontendly is helping you become a really good frontend engineer 🌱🌿🌳

What is Vertical Rhythm?

Vertical Rhythm, originated from print typography, is to make the vertical spaces between elements consistent by repeated patterns.

If you see a lined paper notebook, there are guidelines so you can write your word straight, but also have repeated gaps between lines. It makes your sentences more readable.

In print, the guideline is called baseline. In web, there is also a baseline but it works a bit differently compared to print.

In print, the words are written ON the baseline something like this:

However, in web, the words are written IN the baseline:

Why is that?

It is because the web typography contains the line-height property which determines the baseline and it works differently to the print.

Real Practice in CSS

You now understand how the typography is displayed in web. It’s time to use it in real practices. There is a good tool you can easily calculate all the numbers so head over to Gridlover here:

http://www.gridlover.net/try

There are 3 factors you can change:

• Font size
• Line height
• Scale Factor

I believe you know what font size and line height are.

The scale factor is the ratio of headings size. The default scale factor is 1.618 which is the Golden Ratio.

If you scale it up/down, you will find the headings are relatively increasing/decreasing each other.

As a common practice, let’s set the figures as below:

• Font size: 16
• Line height: 1.5
• Scale Factor: 1.618

Now when you see the RHS, you will get all the necessary numbers. The most important properties for Vertical Rhythm are:

• line-height: the space within a group such as h1 or p.
• margin top/bottom: the space between groups.

When you change the font-size or line-height values, the values in RHS will be changed. But have you noticed something with the values updated?

YES! Amazing right? Jaw-dropping!

If you are still not sure, here we go.

The updated values have patterns. With the initial values I suggested to set above, you will get:

body {
 …
line-height: 24px;
padding: 24px;
 …
}

h1 {
 …
line-height: 72px;
margin-top: 24px;
 …
}

All the space related values are incremental of 24px! If you update the line-height to 1.2, you will get the values incremental of 19px!

So the spaces between lines have repeated patterns.

This is what I meant by repeated patterns at the very beginning. But what’s the deal with the repeated patterns?

Human loves patterns because patterns are predictable, soothing but not boring. The repeated patterns are used by many different industries such as photography, music, poem, meditation etc etc.

Look at the photo below. Do you feel calm (but not bored)?

That’s why giving repeated patterns to the typography spaces (also spaces between elements) makes content more readable. This is how Vertical Rhythm can improve web experience.

This week I would like to talk about one very interesting but important aspect of CSS.

Now let me give you a very simple question and you guess the answer.

If I type below in html:

<svg width=“200px” height=“300px”>…</svg>

and set the below styles in external css file:

svg {
width: 400px;
height: 500px;
}

what would be the final width and height of svg?

If you say 200px and 300px, then buy me a coffee because you are wrong.
If you say 400px and 500px, then buy me a coffee too because you are right.

What? How? Why?

Let’s see the order of styles in cascade below.

User Agent Styles < Presentation Attributes < External Styles < Document Styles < Inline Styles < Animation < Override Styles < Computed Styles

The left is overwritten by right. That means the “Presentation Attributes” are overwritten by all other styles except the “User Agent Styles”.

Now if we go back to the question above, the width and height of SVG count as low-level “author style sheets” like the “Presentation Attributes”.

That’s why it is overwritten by other styles including the external styles.

And it is important to understand this if you are dealing with svg (especially inline svg). Because for whatever reason, such as very low internet connection, if CSS is not loaded, the SVG images without width and height set in the html code will cover the entire viewport.

To avoid this issue, you always need to set the width and height in svg in html and set the proper (responsive) width and height in CSS overwriting the width and height in html. In that way, when the CSS is not loaded properly, there is still a fallback.

Hope it helps you when you deal with svg and as always if you have any questions, please feel free to let me know.