Thursday Roundup # 59
This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.
- NEW DEVELOPMENT RESOURCES AND TOOLS
- Swiping and Reordering Lists on Touch Screens – Slip
- Create Stunning Globe Visualizations – Planetary.js
- Fluidbox – jQuery Plugin for Beautiful Lightboxes
- Midway.js – Automatically Center Responsive Elements
- A Collection of CSS3 Powered Hover Effects – Hover.css
- The Streaming Build System – GulpJS
- Real-time Collaborative Writing Environment – Typewrite
- Fast, Beautiful, and Painless Social Shares
- The Critical Rendering Path
- FREE TEMPLATES AND THEMES
- DESIGN FREEBIES
NEW DEVELOPMENT RESOURCES AND TOOLS
Swiping and Reordering Lists on Touch Screens – Slip
Slip is a tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies. You interact with the library via custom DOM events for swipes/reordering. Call new Slip to make element’s children swipeable and add event listeners.
Create Stunning Globe Visualizations – Planetary.js
Fluidbox – jQuery Plugin for Beautiful Lightboxes
Fluidbox is a jQuery plugin that replicate the distraction-free, fluid lightbox seen on Medium, and to improve on it such that it will allow linking to a larger-resolution image.
Midway.js – Automatically Center Responsive Elements
Midway.js makes it super easy to automatically center the responsive elements on your websites. You all know and love the absolute positioning centering technique, but what happens when those centered elements change sizes, due to percentage based layouts? That’s where Midway.js comes in.
A Collection of CSS3 Powered Hover Effects – Hover.css
Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS. All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.
TinyColor is a micro framework for inputting colors and outputting colors as different formats. Input is meant to be as permissive as possible. The following color types are supported: RGB, HSL, HSV, Hex, Name (from SVG color codes).
The Streaming Build System – GulpJS
By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable. By harnassing the power of node’s streams you get fast builds that don’t write intermediary files to disk.
Real-time Collaborative Writing Environment – Typewrite
Typewrite is a real-time collaborative writing environment. Format with Markdown. Style text as you type without taking your hands off the keyboard. Collaborate with others on documents in real-time. Write and edit together. Sync with Dropbox. Use your favourite text editors on your phone, tablet, or computer.
Simple, light, flexible, and good-looking share button jquery plugin.
The Critical Rendering Path
The most important concept in pagespeed is the critical rendering path. This is true because understanding this concept can help you do a very wonderful thing… Understand the concept of the critical render path and learn how to optimize it in this insightful article.
FREE TEMPLATES AND THEMES
Simple and Light Responsive Grid System
GerduKreatip – Free Agency Portfolio PSD Theme
Free Personal vCard One Page HTML Template
Free Download – Flat Apple Devices Mockup
This is a huge collection of flat Apple devices mockups to showcase your responsive web designs. The PSD file includes iPhone, iPad, iMac and Macbook with different viewing angles.
144 Outline Icons (Free PSD and AI)
The icons were first designed using Adobe Illustrator, then converted into Adobe Photoshop vector shapes. So you will get both AI and PSD files. You can use those icons as you want.
Freebie: The White Stripes UI Kit (PSD)
Odin Rounded – Free Font
Odin Rounded is an free experimental font family with a clean and linear appearance. The simple compact nature of the design and the many alternates allows for great economy of space across layouts. it supports upper/lowercase, kerning and opentype features.