Collective #374

Original Source:


Our Sponsor
ProjectHuddle: Live Feedback On Your Web Project

A revolutionary WordPress plugin to gather client feedback directly on top of your web project. Open source, white-label & cross-platform.

Check it out


Act now to save the internet as we know it

The internet as we know it will vanish if net neutrality gets compromised. Tim Berners-Lee urges us to act now to save it.

Read it


Understanding CSS Layout And The Block Formatting Context

Rachel Andrew explains existing and new ways to create a Block Formatting Context.

Read it



Microlink is a service that let’s you collect relevant information from any website.

Check it out


Design Principles

An open source resource that collects examples of design principles. By Ben Brignell.

Check it out


30 seconds of code

A curated collection of useful JavaScript snippets that you can understand in 30 seconds or less. By Angelos Chalaris.

Check it out


What Have You Made Today?

Chrome extension written with Vue to replace the default home page. Made by Tim Holman.

Check it out


Free Font: Odachi

A unique uppercase brush font by Mehmet Reha Tugcu.

Get it


Design Systems and CSS Grid

Stuart Robson shows how to add CSS Grid to an existing design system.

Read it


Keeping Parent Visible While Child in :focus

Chris Coyier shows how to solve a tricky :focus problem.

Read it


Real Particle Blob

Number three of Eli Fitch’s December WebGL experiments.

Check it out



A beautiful nebula demo by Samsy. Made with Three.js.

Check it out


The Joy Compiler

A tool for translating idiomatic Go into concise JavaScript that works in every browser.

Check it out


Epic Spinners

Some creative CSS only loader animations.

Check it out


Canvas – Beat

An audio and canvas experiment inspired by the Propellerheads Figure iOS App. Made by Kevin Boudot.

Check it out


Calendar with CSS Grid

Jonathan Snook shows how to lay out calendar events with CSS Grid.

Read it


Specificity Visualizer

A visual way to analyze the specificity of selectors in CSS. Made by Francesco Schwarz.

Check it out



A WebGL voxel sculpting application made by Josh Shadik.

Check it out


11 Things I Learned Reading the CSS Grid Specification

Ohans Emmanuel shares some very interesting details he learned while reading the CSS Grid spec.

Check it out


Free Font: ADC Somros

A beautiful Thai font project by Anupap Jaichumnan.

Get it



A dreamy Christmas experiment created by Misaki Nakano.

Check it out


xg – shuffle

A fantastic letter experiment in WebGL by AlteredQualia.

Check it out

Collective #374 was written by Pedro Botelho and published on Codrops.

Our 10 Favorite WordPress Themes of 2017

Original Source:

As we prepare to say goodbye to 2017, it’s only natural that we look back at the year that was in a variety of design genres. Today, we’ll focus on the top WordPress themes released during the year.

While there are many ways to judge themes (looks, features, popularity, etc.), we’re going to be bold and simply say that we really like the ones on this list. They represent the spectrum of what’s available, from free to commercial, from barebones to feature-rich.

Here they are, in no particular order. Let’s celebrate our 10 favorite WordPress themes of 2017!

Minimal 20/17

Minimal 20/17 is a free child theme of the default WordPress Twenty Seventeen theme. It takes away some of the “excessive” padding of its parent, introduces a wider layout and adds in a couple of extra templates. This will save anyone wanting to build on top of the original a few steps.

Minimal 20/17


WoodMart is a commercial theme that focuses on WooCommerce shops. What really sets it apart are the advanced navigation features. Large, customizable mega menus make it a great fit for sites with a lot of product categories. Ajax product filtering enables customers to find exactly what they’re looking for. There’s something for just about every need here.


WP Generic

WP Generic may be free, but it’s got the look and feature set of a commercial theme (of course, there is the obligatory pro version as well). The theme works with the WordPress Customizer, allowing you to tweak colors and other settings to fit your needs. Overall it’s a very attractive and easy-to-read theme.

WP Generic

Course Builder

Course Builder aims to take advantage of the rise in sites using WordPress as a LMS (Learning Management System). It works in conjunction with the LearnPress plugin to help you build and sell online or offline courses. This commercial theme comes with several LearnPress premium add-ons, including plugins that work with various payment gateways, WooCommerce, Paid Memberships Pro and more.

Course Builder


CustomPress is a free theme that prides itself on being easy to customize. It’s also built for speed (based on the Milligram CSS framework) and compatibility with mobile devices. The look is clean and uncluttered.



Flexblog is further proof that blogging is still an important part of what WordPress does. And this commercial theme treats bloggers right, with lots of different layout options to suit their needs. You’ll also find different navigation/pagination styles, built in social sharing and compatibility with the WordPress Customizer.



Ariel brings an attractive, photo-centric style to blogging. The style isn’t overbearing – a welcome characteristic in this category. Included with the free theme are two slider styles, lots of sidebar options and social media icons. A pro version adds more customization options, post formats and other assorted goodies.


Get Skeleton

Get Skeleton is a free starter theme based on the popular _s (Underscores) and features the GetSkeleton CSS boilerplate. It’s meant for designers who want to create their own stunning theme, but want a solid foundation to build upon. So, no, it’s not going to win any beauty prizes out-of-the-box. It is, however, meant for serious development.

Get Skeleton


Skin shows us the fun side of WordPress themes. The design is unique and quite bold – although you can customize it to match your personality. It seems to be the perfect fit for the modern blog that’s looking to go viral. There’s lots of movement and animation, but the layout is still easy enough to follow. This one is definitely a different sort of commercial theme.



Cortex also lends itself to a more whimsically creative type of website. There are 17 home page layouts to choose from with this commercial theme – all are quite colorful. You’ll find several navigation options, including mega menus and a slide-out “hamburger” option.  Animation is also big here, with lots of floating objects to add a bit of flair to your content.


Looking Back…And Ahead

What did we learn from 2017? Well, blogging is still “in”. And developers are getting increasingly more playful with designs and features. That makes sense given the times we live in and the crowded market for themes.

But 2018 looks like it will be a whole other level of eventful when it comes to themes (and WordPress in general).  With the Gutenberg editor due to arrive, look for theme developers to race to ensure compatibility and add their own custom features based on it. It will be fascinating to see how the market adapts to this new way of creating and editing content.

Understanding CSS Layout And The Block Formatting Context

Original Source:

There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.

How To Use Underlined Text To Improve User Experience

Original Source:

(This article is supported by Adobe.) An underline is a horizontal line immediately below a portion of text. In our everyday experience, we underline to emphasize key sections of text, sometimes drawing an underline by hand below printed text. But underlines have their own place in the world of digital design. In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it’s a link.

lg2 Blends Tradition With Modernity at Taverne Louise

Original Source:

lg2 Blends Tradition With Modernity at Taverne Louise

lg2 Blends Tradition With Modernity at Taverne Louise

Dec 12, 2017

We’re just smitten with the work by lg2 for Taverne Louise in Quebec City. lg2 is Canada’s largest independent creative agency specializing in innovation, strategy, packaging, branding and design just to name a few areas of their expertise. The brief for Taverne Louise – develop a logo and an aesthetic identity for a new restaurant whose name and menu are at the crossroads of tradition and modernity. Taverne Louise is situated in Québec City’s Old Port, right in front of its namesake, Bassin Louise. Named in the honor of Queen Victoria’s daughter, a significant figure in Canada’s history, the logo reflects the restaurant’s menu, putting a modern spin on tradition. We most adore how the team at lg2 has taken Louise’s royal coat of arms and distilled it to its geometrical essence. The “O” wears an understated crown and omnipresent royal colours of gold and black give it an attractively regal air. Enjoy this delicious look at branding done right. 

art direction
graphic design

Mind-boggling Vector Illustration Work by James Gilleard

Original Source:

Mind-boggling Vector Illustration Work by James Gilleard

Mind-boggling, Vector Illustration Work by James Gilleard

Dec 12, 2017

James Gilleard shared a set of beautiful illustrations that he created in 2017. They are all vector illustration  and it definitely sets the bar at another level. The amount of details is nothing but staggering, I was trying to understand some of them like the one of Paris, or the ones with buildings and I couldn’t.  There’s just too much going on which makes me wonder how long it took it for James to create those illustrations. Below you can see some of my favorites.

We also recommend that you check out James website at – James is a designer, art director and illustrator based in London, UK. He has an incredible portfolio with more amazing vector illustration projects.

Vector Illustration

Fast Magazine – Japanese Cedar House
DB Mobile – Frankfurt redevelopment
Washington Post – Future Restaurants
Videogame Concept Art and Visual Development
Animation Backgrounds


The New Smashing Mystery Riddle, An Emoji Edition

Original Source:

Oh yes, the infamous mystery riddles are back! To celebrate the relaunch of this little website, we’ve prepared something special yet again — a Smashing Emoji Mystery Riddle. And this time, instead of scouting an answer in a physical place or on Twitter, it’s well hidden somewhere on this website.
So, What Can You Win? Among the first readers who tweet @smashingmag all the hidden emoji, we’ll raffle a quite extraordinary, smashing prize (and a couple of other Smashing extras):

Uploadcare: Your Super-Powered Image CDN

Original Source:

This article was sponsored by Uploadcare. Thank you for supporting the partners who make SitePoint possible.

A good Content Delivery Network will boost your website’s performance. Files are hosted on different domains or sub-domains on servers across the globe to ensure users get the fastest download wherever they are located. The best CDNs will help manage your data and save hosting costs.

CDNs are regularly used to host static assets such as images. You push an image file to the CDN server then reference it in your page’s <img> tags. That’s as far as most go, but Uploadcare are taking CDN services to another level and could save you considerable development time.

Uploadcare Services

Uploadcare provide accounts ranging from free (500MB of space and 5GB traffic per month) to white-labelled commercial services supporting 50GB file sizes and virtually unlimited bandwidth. All plans include:

Configurable Upload Widget

Despite HTML5 advances, uploading files to a server requires significant development effort. The upload widget provides a simple, ready-made, style-able component for your site. It allows users to drag and drop or choose files from their local file system, camera, URL, Google Drive, Google Photos, Dropbox, OneDrive, Facebook, Instagram, Evernote and Flickr directly to the Uploadcare CDN:

Uploadcare's customizable widget


A REST API is provided so any language or system can upload and manage files in bulk. A simple cURL example to upload image.jpg:

curl -F “UPLOADCARE_PUB_KEY=demopublickey”
-F “file=@image.jpg”

The JSON response returns a Universally-Unique Identifier (UUID) assigned to all files so they can be referenced later:

“file”: “17be4678-dab7-4bc7-8753-28914a22960a”


This feature will be considered essential by anyone creating responsive web and mobile apps. Once an image has been uploaded, it can be resized and manipulated via the URL alone. This is best illustrated with an example. Consider this image of a chap with headphones (thank you Alex Blăjan who provided it at I uploaded a 1600 x 900px, 140Kb file to Uploadcare:

Example image of man with earphones

The resulting URL contains the image’s UUID:

You can add any filename at the end to help you remember what image you’re using and aid SEO, e.g.

Ignoring the impact of high-density Retina screens for the moment, there’s little point using this full-sized image on a device with, say, a 500px-width screen. Normally, I would need to create a resized version of this image using Photoshop or a build system but Uploadcare removes this requirement. I can simply change the URL to:

This instantly provides a 500px-width image, which now has a reduced file size of less than 20Kb:

Example image resized

Uploadcare claim super-fast resizing speeds, which are typically 15x faster than ImageMagick (and with substantially less hassle!)

Alternatively, I could have changed the image height using a URL such as:

Or perhaps my site requires a 100×100 cropped and scaled grayscale thumbnail with maximum compression? The URL:×200/-/grayscale/-/quality/lightest/-/progressive/yes/-/format/auto/man.jpg

The image file size has now dropped to less than 3Kb. In Blink-based browsers, including Chrome, Opera, Vivaldi, and Brave, the /format/auto/ directive detects WebP support and returns an even smaller 2.3Kb image.

Example image as thumbnail

The CDN API URL can contain any number of processing directives separated by a /-/ delimiter. The documentation provides full instructions for:

changing the image format, quality, and progressive loading
creating thumbnails, resizing, cropping, and stretching
filters such as enhance, sharpen, blur, grayscale, and invert
rotating, flipping, and mirroring
adding image overlays, extracting prevalent colors and more

Continue reading %Uploadcare: Your Super-Powered Image CDN%

How to Design YouTube Thumbnails to Drive Views

Original Source:

YouTube success depends on many factors. But the first challenge that any YouTuber faces is catching the viewers’ attention. The attention span in YouTube is a bit longer than in any other social media because the level of commitment is higher – instead of a shorter clip or instant image, you’re presented with a video […]

The post How to Design YouTube Thumbnails to Drive Views appeared first on

Popular Design News of the Week: December 4, 2017 – December 10, 2017

Original Source:

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Containerd 1.0 Released


2017: The Year of the Blob


10 UX Design Predictions for 2018


The Front-End Checklist


2017: The Year in WordPress


Manageable Utility Systems with CSS Variables


Site Design: 10×17


Chrome Apps are Dead, as Google Shuts Down the Chrome Web Store Section


Poly API by Google – Development in 3D Made Simple


Dear Tim Cook, Thanks for the 18,202 Alerts About my iCloud Storage


Fresh Ideas for Building Websites


How Stripe Designs Beautiful Websites


Pantone Colour of the Year 2018 has been Announced


The State of UX for 2018


Freelance Project Tax Calculator


Using Artificial Intelligence to Augment Human Intelligence


Designing a Remote Project


Nobody is Going to Steal your Startup Idea


4 Tips for Creating a Smooth User Journey on any Website


The Compelling Case for Working Less


The Secret to Being a Top Developer is Building Things! Here’s a List of Fun Apps to Build!


UX Patterns to Unblock Frustration… and Save Lives


The Ultimate Guide to GIF Design




How to Start with Static Sites


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}