Skip to content

Instantly share code, notes, and snippets.

@jlawhorn
jlawhorn / config_1.rb
Last active December 21, 2015 12:49
Magento Responsive Design CSS Config RB 1
http_path = "/skin/frontend/package/theme1/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
output_style = :nested
@jlawhorn
jlawhorn / config_2.rb
Last active December 21, 2015 12:49
Magento Responsive Design CSS Config RB 2
http_path = "/skin/frontend/package/theme2/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
output_style = :nested
add_import_path "../theme1/css"
@jlawhorn
jlawhorn / _variables_1.scss
Last active December 21, 2015 12:49
Magento Responsive Design CSS Variables 1
$color-brand: #022754;
$color-accent: #b3c21c;
$font-weight-light: normal;
$font-weight-normal: normal;
$font-weight-medium: 800;
$font-weight-strong: 900;
$color-button-text: $accent-color;
$color-button-plain-bg: #edf2f5;
$color-button-plain: #0093d0;
$size-tab-spacing: 0;
@jlawhorn
jlawhorn / _variables_2.scss
Last active December 21, 2015 12:49
Magento Responsive Design CSS Variables 2
$color-brand: #74d0f5;
$color-accent: #34b924;
$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-strong: 900;
$color-button-text: $brand-color;
$color-button-plain-bg: lighten($brand-color, 10%);
$color-button-plain: darken($brand-color, 10%);
$size-tab-spacing: 0;
@jlawhorn
jlawhorn / _breakpoints.scss
Last active December 21, 2015 12:49
Magento Responsive Design CSS Breakpoint Mixin
@mixin breakpoint($query) {
@media #{$query} { @content; }
}
@jlawhorn
jlawhorn / _mediaqueries.scss
Last active December 21, 2015 12:49
Magento Responsive Design CSS Breakpoint Media Queries
$small-phone-and-down: "screen and (max-width: " + pxToEm(319) + ")";
$large-phone-and-up: "screen and (min-width: " + pxToEm(400) + ")";
$large-desktop-and-down: "screen and (max-width: #{$width-frame-max})";
@jlawhorn
jlawhorn / _breakpoint_examples.scss
Last active December 21, 2015 12:49
Magento Responsive Design CSS Breakpoint Examples
body {
@include breakpoint($large-phone-and-up) {
font-size: 1.1em;
}
}
@include breakpoint($small-phone-and-down) {
.main-menu {
background-color: $color-menu-background;
a {
@jlawhorn
jlawhorn / Add JS File.xml
Last active August 29, 2015 14:05
Add a js file with Magento Layout XML
<action method="addItem">
<type>js</type><name>plugins/file.js</name>
</action>
@jlawhorn
jlawhorn / remove common head files.xml
Last active August 29, 2015 14:05
Remove common CSS/JS Items from Magento
<action method="removeItem">
<type>skin_css</type><name>css/widgets.css</name>
</action>
<action method="removeItem">
<type>skin_css</type><name>css/styles-ie.css</name>
</action>
<action method="removeItem">
<type>js</type><name>lib/ds-sleight.js</name>
</action>
<action method="removeItem">
@jlawhorn
jlawhorn / Remove Footer Newsletter.xml
Last active August 29, 2015 14:05
Remove the Footer Newsletter with Layout XML