Magento x codekit x sass x compass x skeleton responsive grid


Published on

A presentation by @ldn_tech_exec for #magentoLDN on extreme CSS techniques, how to set up codekit, compass and sass/scss and the skeleton responsive/adaptive framework for Magento

source code:

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Magento x codekit x sass x compass x skeleton responsive grid

  1. 1. skeleton x codekit x magento...and the case for separate css/js files @ldn_tech_exec #magentoLDN 4 july 2012
  2. 2. skeleton● base.css● layout.css● skeleton.css
  3. 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. 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. 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. 6. allows you to do this.gte9 .gradient { filter: none;}
  7. 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. 8. images<img class="scale-with-grid"src="..." alt="..." title="..." />
  9. 9. media queries● always at the bottom● always in descending order
  10. 10. extreme CSS & JS fast landing pages
  11. 11. the case for separate CSS/JS files● traditional thinking, vs● fast landing pagesproblem: how to manage this? modpagespeed? magento?locally?
  12. 12. combine CSS files & long expiresgotchas● modpagespeed => 4095. what a cunt.● magento breaks base64solution● combine css ○ combine locally with CodeKit & BLESS, or ○ if youre not scared of 4095, use magento and base64.phtml hack● Aoe JsCssTstamp for long expires
  13. 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)
  14. 14. codekit x magento
  15. 15. ever wondered why your scripts getso 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. 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 @importd a scss/sass file where you have declared a @mixin ○ you use @include to call that @mixin
  17. 17. compass examplescsscompiles to
  18. 18. setting up codekit for magento● create theme "yourtheme-ck"● mirror magento path names, e.g. "css" and "js" etc...● 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. 19. codekit settings for magento
  20. 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. 21. resources@ldn_tech_exec●● adding SASS to Sublime Text 2 ○ sass-scss-support-sublime-edit-2/●●● 4095 -●