Magento x codekit x sass x compass x skeleton responsive grid
•
1 gefällt mir•3,485 views
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: https://github.com/arush/mage-skeleton
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Magento x codekit x sass x compass x skeleton responsive grid
Ähnlich wie Magento x codekit x sass x compass x skeleton responsive grid (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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/