Web Docs

Layout: Section margins 

<section>
    <h2>Standard Margins</h2>
    <p>Sections are centered and have a maximum width of <code>42rem</code>. Content may also be given a class of <code>column</code> to give it the same margins even if it’s outside of a <code>&lt;section&gt;</code>. A section can span the full width with
        the <code>full</code> class, and content can pop out of the column with the <code>emphasis</code> class. See examples below.</p>
</section>
 
{{{ markup }}}
  • Content: 
    $columnWidth: 42em
$emphasisWidth: 52.5em
$featureWidth: 60em

$emphasisPercent: ( $emphasisWidth / $columnWidth ) * 100%
$emphasisMargin: ( ($emphasisPercent - 100) / 2 ) * -1
$featurePercent: ( $featureWidth / $columnWidth ) * 100%
$featuremargin: ( ($featurePercent - 100) / 2 ) * -1

=emphasis()
	max-width: $emphasisPercent
	margin-left: $emphasisMargin
	margin-right: $emphasisMargin

=feature()
	max-width: $featurePercent
	margin-left: $featuremargin
	margin-right: $featuremargin



article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section
	display: block


section, .column
	margin: 0 5%
	transition: margin 200ms ease

	@media( min-width: $breakMdSm )
		margin: 0 10%

	@media( min-width: $breakMd )
		margin: 0 15%

	@media( min-width: $breakMdLg )
		margin: 0 auto
		width: 42em


section .emphasis
	max-width: 111.11%
	margin: 1.5em -5.555%
	@media( min-width: $breakMdSm )
		+emphasis()

section .feature
	max-width: 111.11%
	margin: 1.5em -5.555%
	@media( min-width: $breakMdSm )
		+feature()


section.full
	margin: 0
	width: 100%
  • URL: /components/raw/layout/layout.sass
  • Filesystem Path: src/components/layout/layout.sass
  • Size: 1.1 KB 
{
  "markup": "<section><h2>Standard Margins</h2><p>Sections are centered and have a maximum width of <code>42rem</code>. Content may also be given a class of <code>column</code> to give it the same margins even if it’s outside of a <code>&lt;section&gt;</code>. A section can span the full width with the <code>full</code> class, and content can pop out of the column with the <code>emphasis</code> class. See examples below.</p></section>"
}