Web Docs

Layout: Full Width (with standard text column) 

<section class="full">
    <image src="/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg" />
    <div class="column">
        <p>She was sitting there one afternoon in early June. The sun was coming in at the window warm and bright; the orchard on the slope below the house was in a bridal flush of pinky-white bloom, hummed over by a myriad of bees. Thomas Lynde—a meek little
            man whom Avonlea people called “Rachel Lynde’s husband”—was sowing his late turnip seed on the hill field beyond the barn; and Matthew Cuthbert ought to have been sowing his on the big red brook field away over by Green Gables. Mrs. Rachel
            knew that he ought because she had heard him tell Peter Morrison the evening before in William J. Blair’s store over at Carmody that he meant to sow his turnip seed the next afternoon. Peter had asked him, of course, for Matthew Cuthbert had
            never been known to volunteer information about anything in his whole life.</p>
    </div>
</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 class=\"full\"><image src=\"/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg\" /><div class=\"column\"><p>She was sitting there one afternoon in early June. The sun was coming in at the window warm and bright; the orchard on the slope below the house was in a bridal flush of pinky-white bloom, hummed over by a myriad of bees. Thomas Lynde—a meek little man whom Avonlea people called “Rachel Lynde’s husband”—was sowing his late turnip seed on the hill field beyond the barn; and Matthew Cuthbert ought to have been sowing his on the big red brook field away over by Green Gables. Mrs. Rachel knew that he ought because she had heard him tell Peter Morrison the evening before in William J. Blair’s store over at Carmody that he meant to sow his turnip seed the next afternoon. Peter had asked him, of course, for Matthew Cuthbert had never been known to volunteer information about anything in his whole life.</p></div></section>"
}