Mitchell McKenna - tagged with css http://mitchmckenna.com/feed en-us http://blogs.law.harvard.edu/tech/rss LifePress mitchellmckenna@gmail.com csstyle - CSS Components System http://mitchmckenna.com/post/15247/csstyle-css-components-system

Organize your CSS as reusable components. Components are built up of parts (child elements), parts are included using __part-name. Components are flexible with options (like arguments; class="component-name --option). Tweaks are small changes applied using a + sign. You can watch a related Laracast here.

]]>
Wed, 11 Mar 2015 11:36:00 -0400 http://mitchmckenna.com/post/15247/csstyle-css-components-system/csstyle-css-components-system
Materialize - Responsive Front-end Framework for Material Design http://mitchmckenna.com/post/15200/materialize-responsive-front-end-framework-for-material-design

Bootstrap-like framework with focus on Google's Material Design look and interactions. Forms section is a great example of how nice it can look. Sass available, and several Javascript components.

]]>
Fri, 20 Feb 2015 16:07:00 -0500 http://mitchmckenna.com/post/15200/materialize-responsive-front-end-framework-for-material-design/materialize-responsive-front-end-framework-for-material-design
iPhone and iPad Mockups in just CSS http://mitchmckenna.com/post/15197/iphone-and-ipad-mockups-in-just-css

Need to showoff what your website/app looks like, use this to make it look like it's on an iphone or ipad using just CSS.

]]>
Fri, 20 Feb 2015 15:54:00 -0500 http://mitchmckenna.com/post/15197/iphone-and-ipad-mockups-in-just-css/iphone-and-ipad-mockups-in-just-css
LESS Hat - LESS Mixin Library http://mitchmckenna.com/post/14789/less-hat-less-mixin-library

A robust mixin library with 86 mixins for everything from border-radius to Flexbox and css animations.

]]>
Fri, 26 Sep 2014 15:02:00 -0400 http://mitchmckenna.com/post/14789/less-hat-less-mixin-library/less-hat-less-mixin-library
Silky smooth parallax effect using only css (hit the debug button for awesomeness) http://mitchmckenna.com/post/14658/mitchellmckenna-silky-smooth-parallax-effect-using-only-css-hit-the-debug-button-for-awesomeness-httpblogkeithclarkcoukwp-contentuploads201408demos3

Silky smooth parallax effect using only #css (hit the debug button for awesomeness) http://blog.keithclark.co.uk/wp-content/uploads/2014/08/demos/3/

]]>
Fri, 08 Aug 2014 14:13:00 -0400 http://mitchmckenna.com/post/14658/mitchellmckenna-silky-smooth-parallax-effect-using-only-css-hit-the-debug-button-for-awesomeness-httpblogkeithclarkcoukwp-contentuploads201408demos3/mitchellmckenna-silky-smooth-parallax-effect-using-only-css-hit-the-debug-button-for-awesomeness-httpblogkeithclarkcoukwp-contentuploads201408demos3
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
Magic - CSS3 Animations with Special Effects http://mitchmckenna.com/post/14328/magic-css3-animations-with-special-effects

Library of some pretty slick animations using only css3 (no js).

]]>
Thu, 10 Apr 2014 17:22:00 -0400 http://mitchmckenna.com/post/14328/magic-css3-animations-with-special-effects/magic-css3-animations-with-special-effects
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
Code Guide by @mdo http://mitchmckenna.com/post/14194/code-guide-by-mdo ]]> Sun, 16 Mar 2014 23:47:00 -0400 http://mitchmckenna.com/post/14194/code-guide-by-mdo/code-guide-by-mdo 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
inuit.css http://mitchmckenna.com/post/13815/inuitcss

Powerful, scalable, Sass-based, BEM, OOCSS framework by Harry Roberts aka csswizardry.

]]>
Wed, 18 Dec 2013 14:00:00 -0500 http://mitchmckenna.com/post/13815/inuitcss/inuitcss
charlie.js http://mitchmckenna.com/post/13745/charliejs

A small framework that provides an easy-to-use API for building pages with for synchronizing video and CSS3 animations. Great intro to it on http://coding.smashingmagazine.com/2013/11/18/the-future-of-video-in-web-design/

]]>
Wed, 27 Nov 2013 14:06:00 -0500 http://mitchmckenna.com/post/13745/charliejs/charliejs
Using CSS Shapes to Enhance Visual Storytelling with Alice in Wonderland - Adobe http://mitchmckenna.com/post/13560/building-a-richer-storytelling-experience-with-alice-in-wonderland

Great example of how we'll soon be able to shape text to flow around non-rectangular shapes. Just watch the video, I installed Chrome Canary and tried out the demo and it didn't seem as smooth for me. Also, I'm not a fan of having animations tied to mouse scroll, I never seem to scroll the right amount.

Adobe and Ultranoir team up to experiment with building a richer storytelling experience.

Learn more here: http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/

]]>
Sat, 26 Oct 2013 18:14:00 -0400 http://mitchmckenna.com/post/13560/building-a-richer-storytelling-experience-with-alice-in-wonderland/building-a-richer-storytelling-experience-with-alice-in-wonderland
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
Forget LESS and Sass, FESS is the way to go now http://mitchmckenna.com/post/12709/mitchellmckenna-forget-less-and-sass-fess-is-the-way-to-go-now-httptcofynl8fpndj-css

Forget LESS and Sass, FESS is the way to go now http://t.co/fynl8fPndJ #css

]]>
Fri, 05 Apr 2013 17:22:00 -0400 http://mitchmckenna.com/post/12709/mitchellmckenna-forget-less-and-sass-fess-is-the-way-to-go-now-httptcofynl8fpndj-css/mitchellmckenna-forget-less-and-sass-fess-is-the-way-to-go-now-httptcofynl8fpndj-css
Assetic - Asset Management for PHP http://mitchmckenna.com/post/12688/assetic-asset-management-for-php

Assetic combines two major ideas: assets and filters. The assets are files such as CSS, JavaScript and image files. The filters are things that can be applied to these files before they are served to the browser. Assetic was created by a member of the core Symfony team and is part of the official Symfony Cookbook: http://symfony.com/doc/master/cookbook/assetic/asset_management.html

]]>
Sat, 30 Mar 2013 21:50:00 -0400 http://mitchmckenna.com/post/12688/assetic-asset-management-for-php/assetic-asset-management-for-php
Brackets: A Free Open Source Code Editor for the Web http://mitchmckenna.com/post/11462/brackets-a-free-open-source-code-editor-for-the-web

Introducing Brackets a new open source code editor for the web. -- http://github.com/adobe/brackets

]]>
Tue, 26 Jun 2012 02:43:00 -0400 http://mitchmckenna.com/post/11462/brackets-a-free-open-source-code-editor-for-the-web/brackets-a-free-open-source-code-editor-for-the-web
How to Include JavaScript and CSS in Your WordPress Themes and Plugins http://mitchmckenna.com/post/10837/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins

So your working on your WordPress theme, and need to include some javascript or css, just throw it in the header or footer right? Well, actually Wordpress has it's own preferred way of including js and css. If you follow their best practices, you can avoid the risk of conflicting with other themes and plugins.

]]>
Fri, 17 Feb 2012 12:18:00 -0500 http://mitchmckenna.com/post/10837/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins