// Layout // ==========================================================================
// Content // ==========================================================================
// Allow an ID here, this is useful as it matches the GOV.UK template skiplink // scss-lint:disable IdSelector content {
@extend %site-width-container; @extend %contain-floats; padding-bottom: $gutter; @include media(desktop) { padding-bottom: $gutter * 3; } // DEPRECATED: Tabindex on #content // https://github.com/alphagov/govuk_elements/pull/534 // We no longer recommend using tabindex on #content outline: none;
}
// Grid layout // ==========================================================================
// Usage: // For two equal columns
// <div class=“grid-row”> // <div class=“column-one-half”> // // </div> // <div class=“column-one-half”> // // </div> // </div>
// Use .grid-row to define a row for grid columns to sit in .grid-row {
@extend %grid-row;
}
// Use .grid-column to create a grid column with 15px gutter // By default grid columns break to become full width at tablet size .column-quarter, .column-one-quarter {
@include grid-column(1 / 4);
}
.column-half, .column-one-half {
@include grid-column(1 / 2);
}
.column-third, .column-one-third {
@include grid-column(1 / 3);
}
.column-two-thirds {
@include grid-column(2 / 3);
}
.column-full {
@include grid-column(1);
}