Embed Size (px)
DESCRIPTION
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
Citation preview
skeleton x codekit x magento
...and the case for separate css/js files
@ldn_tech_exec#magentoLDN
4 july 2012
skeleton
● base.css● layout.css● skeleton.css
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
no-frame.phtml
● removed all columns● viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
● facebook compatibility● html IE classes
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">
allows you to do this.gte9 .gradient {
filter: none;}
divs
<div class="container"><div class="one-third column">some text
</div><div class="two-thirds column">some two column text
</div></div>
images
<img class="scale-with-grid" src="..." alt="..." title="..." />
media queries
● always at the bottom● always in descending order
extreme CSS & JSfast landing pages
the case for separate CSS/JS files
● traditional thinking, vs● fast landing pages
problem: how to manage this? modpagespeed? magento? locally?
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
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)
codekit x magento
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";
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
compass examplescss
compiles to
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
codekit settings for magento
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
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/
