Magento x codekit x sass x compass x skeleton responsive grid
1 like3,489 views
The document discusses the integration of Skeleton, CodeKit, and Magento for optimizing CSS/JS management in web development. It covers techniques for creating fast landing pages, the importance of separating CSS/JS files, and using tools like CodeKit and Compass for better organization and efficiency. It also outlines practical examples and resources for setting up a Magento theme using these methodologies.
![html IE classes
● the old way (slooow)
<link href="style.css" rel="stylesheet"
/>
<!--[if lte IE7]><link href="style.ie7.
css" rel="stylesheet" /><![endif]-->
● hacks (dangerous and not valid)
#content { margin: 10px; _margin:20px; }
● the correct way (html5 bp)
<!--[if lt IE 7]> <html class="ie ie6
lte9 lte8 lte7">](https://image.slidesharecdn.com/skeletonxmagento1-120703210250-phpapp01/85/Magento-x-codekit-x-sass-x-compass-x-skeleton-responsive-grid-5-320.jpg)
Magento x codekit x sass x compass x skeleton responsive grid
- 1. skeleton x codekit x magento ...and the case for separate css/js files @ldn_tech_exec #magentoLDN 4 july 2012
- 2. skeleton ● base.css ● layout.css ● skeleton.css
- 3. skeleton x magento ● base.css ● skeleton.css ● layout.css ● no-frame.phtml ● app/code/local/Mage/Page/etc/config.xml ● app/etc/modules/Mage_All.xml ● local.xml - add no-frame.phtml to any page
- 4. no-frame.phtml ● removed all columns ● viewport <meta name="viewport" content=" width=device-width, initial- scale=1.0"> ● facebook compatibility ● html IE classes
- 5. html IE classes ● the old way (slooow) <link href="style.css" rel="stylesheet" /> <!--[if lte IE7]><link href="style.ie7. css" rel="stylesheet" /><![endif]--> ● hacks (dangerous and not valid) #content { margin: 10px; _margin:20px; } ● the correct way (html5 bp) <!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7">
- 6. allows you to do this .gte9 .gradient { filter: none; }
- 7. divs <div class="container"> <div class="one-third column"> some text </div> <div class="two-thirds column"> some two column text </div> </div>
- 8. images <img class="scale-with-grid" src="..." alt="..." title="..." />
- 9. media queries ● always at the bottom ● always in descending order
- 10. extreme CSS & JS fast landing pages
- 11. the case for separate CSS/JS files ● traditional thinking, vs ● fast landing pages problem: how to manage this? modpagespeed? magento? locally?
- 12. combine CSS files & long expires gotcha's ● modpagespeed => 4095. what a cunt. ● magento breaks base64 solution ● combine css ○ combine locally with CodeKit & BLESS, or ○ if you're not scared of 4095, use magento and base64.phtml hack ● Aoe JsCssTstamp for long expires
- 13. bypass magento base64 bug with base64. phtml ● layout.xml <reference name="head"> <block type="page/html" name="bg_css" template="page/base64.phtml"/> </reference> ==== ● base64.phtml <link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl(); ? >css/base64.css" media="all"> (better to just combine locally with codekit)
- 15. ever wondered why your scripts get so damn big? ● old unused CSS and JS generally never get deleted, and is hard to manage without separating them into files ● use codekit ● e.g. @import "testing-this-layout.css";
- 16. codekit, compass & scss ● compass gives you access to a bunch of frameworks ● @import ○ combine css locally ○ anywhere you have reuseable stuff, but want to keep files organised (e.g. skeleton, fonts, typography, buttons, ) ● @include ○ where you have @import'd a scss/sass file where you have declared a @mixin ○ you use @include to call that @mixin
- 18. setting up codekit for magento ● create theme "yourtheme-ck" ● mirror magento path names, e.g. "css" and "js" etc... ● ...so assets become: ○ JS - skin/frontend/default/yourtheme/js ○ CSS - skin/frontend/default/yourtheme/css ○ IMAGES - skin/frontend/default/yourtheme/images ○ SASS - skin/frontend/default/yourtheme/css ● magento structure remains the same ○ these compile to "yourtheme/css", "yourtheme/js" etc... ○ choose "default" as codekit compass project
- 19. codekit settings for magento
- 20. examples ● landing.css ○ @import buttons.scss ○ @import typography.scss ○ @import forms.scss ○ @import header.scss ○ @import footer.scss ● styles.css ○ @import checkout.scss ○ @import cart.scss ○ @import widget1.scss ○ @import module1.scss ○ @import test-module.scss ● change your xml files to reflect landing.css and styles. css
- 21. resources @ldn_tech_exec ● github.com/arush ● adding SASS to Sublime Text 2 ○ http://www.adampatterson.ca/blog/2011/05/adding- sass-scss-support-sublime-edit-2/ ● http://incident57.com/codekit/ ● http://www.getskeleton.com/ ● 4095 - http://blesscss.com/ ● http://compass-style.org/