Mitchell McKenna - tagged with webdesign http://mitchmckenna.com/feed en-us http://blogs.law.harvard.edu/tech/rss LifePress mitchellmckenna@gmail.com Plyr - A simple HTML5 media player http://mitchmckenna.com/post/15235/plyr-a-simple-html5-media-player

A simple HTML5 media player with custom controls and WebVTT captions.

]]>
Tue, 03 Mar 2015 15:35:00 -0500 http://mitchmckenna.com/post/15235/plyr-a-simple-html5-media-player/plyr-a-simple-html5-media-player
Dashboards by Keen IO http://mitchmckenna.com/post/15068/dashboards-by-keen-io

Building a dashboard? Using Bootstrap? With maybe bar graphs, time charts, or maps? Why start from scatch? Use Dashboards by Keen IO templates to get you started.

]]>
Mon, 05 Jan 2015 19:37:00 -0500 http://mitchmckenna.com/post/15068/dashboards-by-keen-io/dashboards-by-keen-io
Stock Up: Free Stock Photo Search http://mitchmckenna.com/post/14895/stock-up-free-stock-photo-search

Search stock photo across Unspalsh, Life of Pix, and several other free stock photo websites in one place.

]]>
Mon, 03 Nov 2014 20:05:00 -0500 http://mitchmckenna.com/post/14895/stock-up-free-stock-photo-search/stock-up-free-stock-photo-search
Tablesaw - A Group of Plugins for Responsive Tables http://mitchmckenna.com/post/14431/tablesaw-a-group-of-plugins-for-responsive-tables

Tables - they've got a bad wrap in web dev history, but it's appropriate for tabular data. Here's some neat plugins for making your tables more useful in responsive design.

]]>
Fri, 16 May 2014 19:47:00 -0400 http://mitchmckenna.com/post/14431/tablesaw-a-group-of-plugins-for-responsive-tables/tablesaw-a-group-of-plugins-for-responsive-tables
Adobe Project Parfait - Get CSS out of a PSD http://mitchmckenna.com/post/14418/adobe-project-parfait-get-css-out-of-a-psd

Get a lot of comps from designers in PSD? Then have to either install Photoshop and look up sizes to implement it or just guess? This pretty neat tool from the creators of that format, allows you to easy get those values out of a PSD all online, even converts the objects to css (eg. the font-family to use, etc).

]]>
Mon, 12 May 2014 13:33:00 -0400 http://mitchmckenna.com/post/14418/adobe-project-parfait-get-css-out-of-a-psd/adobe-project-parfait-get-css-out-of-a-psd
Refills - Prepackaged Web Patterns for Bourbon http://mitchmckenna.com/post/14334/refills-prepackaged-web-patterns-for-bourbon

Refill is a collection of examples of web components you can use for Bourbon (Sass mixins library) similar to say, Bootstrap's components.

]]>
Fri, 11 Apr 2014 13:42:00 -0400 http://mitchmckenna.com/post/14334/refills-prepackaged-web-patterns-for-bourbon/refills-prepackaged-web-patterns-for-bourbon
Bootflat - Flat UI Kit Based on Bootstrap http://mitchmckenna.com/post/14319/bootflat-flat-ui-kit-based-on-bootstrap

Basically a Bootstrap theme with some really nice css and color tweaks.

]]>
Wed, 09 Apr 2014 21:29:00 -0400 http://mitchmckenna.com/post/14319/bootflat-flat-ui-kit-based-on-bootstrap/bootflat-flat-ui-kit-based-on-bootstrap
Ratchet - Prototype iPhone/Android Apps in HTML http://mitchmckenna.com/post/14106/ratchet-prototype-iphoneandroid-apps-in-html

Rachet is a css framework to quickly prototype an app before you build it natively. Or maybe you decide to make your native app a webapp wrapper, you can build the whole thing on Rachet. Rachet recently got folded into the Bootstrap Organization.

]]>
Wed, 26 Feb 2014 18:14:00 -0500 http://mitchmckenna.com/post/14106/ratchet-prototype-iphoneandroid-apps-in-html/ratchet-prototype-iphoneandroid-apps-in-html
Animate.css http://mitchmckenna.com/post/14053/animatecss

A bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

]]>
Thu, 13 Feb 2014 21:16:00 -0500 http://mitchmckenna.com/post/14053/animatecss/animatecss
LayoutIt! - Interface Builder for Bootstrap http://mitchmckenna.com/post/13966/layoutit-interface-builder-for-bootstrap

LayoutIt! is a free tool to create the html for your next project using Bootstrap. It's not a website builder, it's just for quickly creating the layout of your website (rows, columns, nav, and anything else bootstrap includes).

]]>
Sat, 25 Jan 2014 17:03:00 -0500 http://mitchmckenna.com/post/13966/layoutit-interface-builder-for-bootstrap/layoutit-interface-builder-for-bootstrap
Hammer.js - Multi-touch Gestures Javascript Library http://mitchmckenna.com/post/13958/hammerjs-multi-touch-gestures-javascript-library

At only 3kb when gzipped, it is a lightweight and efficient library. Hammer doesn't require jQuery or other libraries to work. A jQuery plugin is available though. Hammer supports Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures.

]]>
Thu, 23 Jan 2014 18:47:00 -0500 http://mitchmckenna.com/post/13958/hammerjs-multi-touch-gestures-javascript-library/hammerjs-multi-touch-gestures-javascript-library
Placeit: Screenshots Of Your App/Website On Various Devices http://mitchmckenna.com/post/13926/placeit-screenshots-of-your-appwebsite-on-various-devices

Get gorgeous screenshots of your website or app on cellphones, tablet, laptops and monitors in various professional-looking photo environments. High-res photos cost money, but it's probably cheaper than you opening up photoshop.

]]>
Thu, 16 Jan 2014 18:48:00 -0500 http://mitchmckenna.com/post/13926/placeit-screenshots-of-your-appwebsite-on-various-devices/placeit-screenshots-of-your-appwebsite-on-various-devices
Fluidbox - Modern Lightbox Effect http://mitchmckenna.com/post/13856/fluidbox-modern-lightbox-effect

Replicating and improving the lightbox module seen on Medium with fluid transitions.

]]>
Wed, 01 Jan 2014 10:53:00 -0500 http://mitchmckenna.com/post/13856/fluidbox-modern-lightbox-effect/fluidbox-modern-lightbox-effect
Adaptive Backgrounds jQuery Plugin http://mitchmckenna.com/post/13834/adaptive-backgrounds-jquery-plugin

A jQuery plugin for extracting dominant colors from images and applying it to its parent.

]]>
Mon, 23 Dec 2013 15:13:00 -0500 http://mitchmckenna.com/post/13834/adaptive-backgrounds-jquery-plugin/adaptive-backgrounds-jquery-plugin
Perspective Page View Navigation http://mitchmckenna.com/post/13814/perspective-page-view-navigation

Some really cool effects where the entire page swings out and the navigation is revealed. Pushing the site content aside to reveal a navigation has become a trend for mobile navs. This tutorial shows a couple way it could be used.

]]>
Wed, 18 Dec 2013 13:44:00 -0500 http://mitchmckenna.com/post/13814/perspective-page-view-navigation/perspective-page-view-navigation
odometer http://mitchmckenna.com/post/13556/odometer

Odometer is a Javascript and CSS library for smoothly transitioning numbers, like a car odometer.

]]>
Sat, 26 Oct 2013 16:28:00 -0400 http://mitchmckenna.com/post/13556/odometer/odometer
Flat UI Kit (PSD) http://mitchmckenna.com/post/13557/flat-ui-kit-psd

Really nice (free) flat / blocky design you could base your next design on. The big (125mb!) UI kit has been carefully crafted by Enes Danış.

]]>
Sat, 26 Oct 2013 16:22:00 -0400 http://mitchmckenna.com/post/13557/flat-ui-kit-psd/flat-ui-kit-psd
Pure - Lightweight Responsive CSS Framework http://mitchmckenna.com/post/12924/pure-lightweight-responsive-css-framework

It's a set of small, responsive CSS modules. Just 5.7KB (smaller if you only use a couple). Includes a grid framework and styles for forms, buttons, tables and menus. It follows the SMACSS concept for modules. Use Skin Builder to customize the feel. If you think Bootstrap enforces too much of a particular look, this may be for you. Pure even works with Bootstrap JS modules.

]]>
Sun, 02 Jun 2013 20:35:00 -0400 http://mitchmckenna.com/post/12924/pure-lightweight-responsive-css-framework/pure-lightweight-responsive-css-framework
LivIcons - Animated Icon Pack http://mitchmckenna.com/post/12822/livicons-animated-icon-pack

Livicons is a $12 icon pack of cross browser animated vector icons. They're pretty cute.

]]>
Sun, 05 May 2013 17:11:00 -0400 http://mitchmckenna.com/post/12822/livicons-animated-icon-pack/livicons-animated-icon-pack
Awwwards - Awarding the Best Designed Websites http://mitchmckenna.com/post/12588/awwwards-awarding-the-best-designed-websites

Awwwards is a great place to get inspiration from some of the best designed websites around the web. Anyone can submit a website and the community votes on the best one of the day/month. "Our mission is to discover, recognize and promote the talent and effort of web designers, developers and agencies who create unique digital experiences that are useful, innovative, intuitive and beautiful."

]]>
Sat, 09 Mar 2013 17:33:00 -0500 http://mitchmckenna.com/post/12588/awwwards-awarding-the-best-designed-websites/awwwards-awarding-the-best-designed-websites