Issue #117  (Frameworks, Media, Static Site Generators)10/15/15

The introductory tutorials will be on hiatus for a couple of weeks but you'll find a cool list of tools below, as usual. I will be speaking at CSS Dev Conf 2015, so be sure to come say hi if you're there.

In the meantime, check out the Web Tools Weekly archives for past tips/tutorials or buy the first 70 JavaScript/DOM tips/tutorials bundled in an e-book (includes EPUB, PDF, and MOB formats).

Now on to this week's tools!

Front-end Frameworks

"A Sass framework that empowers you to create flexible, clear, and semantic website layouts."

"A Light CSS Framework. 50% resets, 50% micro-framework, 100% awesome."

"Mimic isn't a framework, it's inline-CSS, class-fied."

"Not a framework. Just a collection of thoughtfully crafted front-end components."

Office UI Fabric
"Fabric is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language."

A Flexbox CSS Framework. Juiced has many of the same layout features that you know and love, but improves upon them with better mobile targeting, custom column ordering, etc.

"A modern design framework that comes with HTML5 and CSS3 design blocks ready to be combined together to create responsive websites."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Multimedia Tools

Semantic image caption generator library. Captionify will caption all images contained in the body tag. It will use images' alt attribute as caption text and wrap the image with a figure and add figcaption.

"Resize images on-the-fly using our API, edit your HTML and add our service to your img tags."

Screenshot Machine
Fast and reliable, full page screenshot service with a developer API.

"Unlike similar Gulp or Grunt tools, our SVG sprite generator is created for designers who are not fond of coding. This tool simply takes a list of SVG files and makes a single sprite file using 'symbol' elements."

"Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing."

"SVG to PNG converter, using PhantomJS."


Static Hosting, Site Management, etc.

"A blog aware static site engine built with React and Webpack. It's fast, extensible and friendly."

Google Cloud Source Repositories
"Fully-featured private Git repositories hosted on Google Cloud Platform."

"A feature-rich backend-as-a-service for AngularJS that takes care of all the tedious server-side stuff."

"A static, static content generator that moves the 'generator' part to the browser. This site is pure text files with a single JavaScript included on each page that renders the theme and assets as needed."

"A Yeoman generator for Pattern Lab, a static site generator based on Brad Frost's Atomic Design methodologies."

Static Site Generators
"The definitive listing of Static Site Generators."

A Tweet for Thought

Henrique Alves sums up CSS pretty nicely.


Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Check out Pocus, an Apple mouse that tries to improve on the ergonomics of Magic Mouse.

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp