Mitchell McKenna - tagged with css https://mitchmckenna.com/feed en-us http://blogs.law.harvard.edu/tech/rss LifePress mitchellmckenna@gmail.com csstyle - CSS Components System https://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 https://mitchmckenna.com/post/15247/csstyle-css-components-system/csstyle-css-components-system
Materialize - Responsive Front-end Framework for Material Design https://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 https://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 https://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 https://mitchmckenna.com/post/15197/iphone-and-ipad-mockups-in-just-css/iphone-and-ipad-mockups-in-just-css
LESS Hat - LESS Mixin Library https://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 https://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) https://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 https://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 https://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 https://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 https://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 https://mitchmckenna.com/post/14334/refills-prepackaged-web-patterns-for-bourbon/refills-prepackaged-web-patterns-for-bourbon
Magic - CSS3 Animations with Special Effects https://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 https://mitchmckenna.com/post/14328/magic-css3-animations-with-special-effects/magic-css3-animations-with-special-effects
Bootflat - Flat UI Kit Based on Bootstrap https://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 https://mitchmckenna.com/post/14319/bootflat-flat-ui-kit-based-on-bootstrap/bootflat-flat-ui-kit-based-on-bootstrap
Code Guide by @mdo https://mitchmckenna.com/post/14194/code-guide-by-mdo ]]> Sun, 16 Mar 2014 23:47:00 -0400 https://mitchmckenna.com/post/14194/code-guide-by-mdo/code-guide-by-mdo Ratchet - Prototype iPhone/Android Apps in HTML https://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 https://mitchmckenna.com/post/14106/ratchet-prototype-iphoneandroid-apps-in-html/ratchet-prototype-iphoneandroid-apps-in-html
Animate.css https://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 https://mitchmckenna.com/post/14053/animatecss/animatecss
inuit.css https://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 https://mitchmckenna.com/post/13815/inuitcss/inuitcss
charlie.js https://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 https://mitchmckenna.com/post/13745/charliejs/charliejs
Using CSS Shapes to Enhance Visual Storytelling with Alice in Wonderland - Adobe https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://mitchmckenna.com/post/12688/assetic-asset-management-for-php/assetic-asset-management-for-php
Brackets: A Free Open Source Code Editor for the Web https://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 https://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 https://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 https://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