Weekly News for Designers (N.235)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

Sassline →
Sassline is a set of rules and recommendations for base typography styling (and mixins) to set web text to a baseline grid easily with rems and Sass.

Tablesaw →
From the Filament Group, Tablesaw is a set of plugins for responsive tables. Plugins include Stack, Toggle, Add a Mini Map, Swipe, Add a Mini Map, Mode Switcher and Sortable.

multiscroll.js →
multiscroll.js is a simple jQuery plugin for creating multi scrolling websites with two vertical scrolling panels (half of the page slides up, the other slides down as you scroll).

Hover.css →
Hover.css is a bunch of CSS3 hover effects that can be easily applied to your own call to actions, buttons, logos, featured images and so on. Available in both SASS and CSS.

fb-flo →
From the Facebook GitHub repo, fb-flo is a Chrome extension that lets you modify running apps without reloading.

Octotree →
Octotree is a useful browser extension for Chrome, Firefox and Safari for displaying GitHub code in tree format.

Splitchar →
Splitchar is a jQuery plugin that allows you to style and design the first, second or both halves of a character.

Tutorials & Learning Resources

Google Web Fundamentals →
Google Web Fundamentals is an essential collection of information about modern web design and development.

A Complete Guide to Flexbox from CSS Tricks →

Recreating the "Design Samsung" Grid Loading Effect →
A Codrops tutorial on how to achieve the grid loading effect as seen on the "Design Samsung" site.

Android Design Tips →
Created by @destroywerk and @BPScott, Android Design Tips is a cheat sheet of suggestions and utilities for designing and developing on Android.

Free GUI Resources

Linea Iconset (160+ Icons in SVG, PNG & Icon Font Formats) →

iPhone Vector Wireframing Toolkit (AI) →

Charts and Diagrams Kit (PSD) →

Source Serif Pro (Regular, Semibold & Bold) →
Source Serif Pro is a serif font family from Adobe, designed to complement their Source Sans Pro font.

Something Inspiring

Retro-Style Poster Series of the World Cup Golden Ball Winners →
Designer Jon Rodgers has graphically designed, in a retro-style, the players that have previously won the world cup Golden Ball award.

Also Worth Reading

• A Guide To <picture> And srcset by Eric Portis →
• Using the :target pseudo-selector for alternative layouts by Vasilis van Gemert →
• Sass Color Variables That Don’t Suck by Landon Schropp →
• Tips for Creating Accessible SVG by Léonie Watson →
• The new srcset and sizes explained by Martin Wolf →