Last updated July 5, 2012. Created by KrisBulman on July 5, 2012.
Log in to edit this page.
This update introduces the first iteration of fluid grid support, but it is not added to theme-settings yet, more changes to come. It can be tested by switching the fixed to fluid in your _base.scss and recompiling css.
Update your core aether theme from the project page and follow these instructions for any subthemes you have created:
Aether-grids upgrade steps
This should be a simple file replacement operation.
- Delete the
aether-grids/folder fromYOURTHEMENAME/sass-extensions/, and replace it with the aether-grids folder from aether/aether_subtheme/sass-extensions/. - As long as you haven't made any changes within your
YOURTHEMENAME/sass/layout/folder, just replace the contents with the contents ofaether/aether_subtheme/layout/ - Recompile your css
Config file updates
YOURTHEME/config.rb
Add these lines to the end of your file.
# Increased decimal precision.
# 33.33333% instead of 33.333%
Sass::Script::Number.precision = 5SCSS updates
YOURTHEME/sass/_base.scss
It is strongly encouraged that you refer to aether_subtheme/sass/_base.scss for changes. Here are a a list of changes in summary.
Remove the lines with the minus sign beside them, and add the lines with the plus signs. Don't forget to remove the + symbols or your Sass will not compile!
-// Fixed Width Layouts
-$aether-max-desktop-width: 1148px; // http://gridcalculator.dk/#/1148/12/20/20
-$aether-max-tablet-landscape-width: 968px; // http://gridcalculator.dk/#/968/12/20/20
-$aether-max-tablet-width: 752px; // http://gridcalculator.dk/#/752/12/20/20
-$aether-max-handheld-landscape-width: 428px; // http://gridcalculator.dk/#/428/12/20/20
-$aether-max-handheld-width: 308px; // http://gridcalculator.dk/#/308/12/20/20
-// Fixed Width Layouts
+$aether-desktop-grid-width: 1148px; // http://gridcalculator.dk/#/1148/12/20/20
+$aether-tablet-landscape-grid-width: 968px; // http://gridcalculator.dk/#/968/12/20/20
+$aether-tablet-grid-width: 752px; // http://gridcalculator.dk/#/752/12/20/20
+$aether-handheld-landscape-grid-width:428px; // http://gridcalculator.dk/#/428/12/20/20
+$aether-handheld-grid-width: 308px; // http://gridcalculator.dk/#/308/12/20/20Add these 2 lines directly beneath the lines just replaced.
// Either use a fluid or fixed layout
$aether-grid-type: fixed;Add this beneath the list of breakpoints as an extra option:
$aether-break-smallest: 400px;Add the following lines to the end of the file (but above any imports).
// Float direction
$aether-float-direction: left;
// Box model
$aether-box-sizing: border-box;YOURTHEME/sass/partials/_navigation.scss
It is strongly encouraged that you refer to aether_subtheme/sass/partials/_navigation.scss for changes. Here are a a list of changes in summary.
Remove the entire #primary and #secondary code blocks and replace them with this
#primary {
@include margin-trailer(1, $base-font-size);
.grid-dis-nav & { // If main-menu doesn't adhere to the grid, make the list horizontal
li {
@include horizontal-list-item(1.38462em, left);
}
}
.grid-en-nav & { // If main-menu adheres to the grid, center the text
li {
a {
text-align: center;
}
}
}
}
#secondary {
float: right;
@include horizontal-list-container;
li {
@include horizontal-list-item(1.38462em, left);
}
}