Web Docs

Layout: Column (outside of a section) 

<p class="column">There are plenty of people in Avonlea and out of it, who can attend closely to their neighbor’s business by dint of neglecting their own; but Mrs. Rachel Lynde was one of those capable creatures who can manage their own concerns and those of other folks
    into the bargain. She was a notable housewife; her work was always done and well done; she “ran” the Sewing Circle, helped run the Sunday-school, and was the strongest prop of the Church Aid Society and Foreign Missions Auxiliary. Yet with all this
    Mrs. Rachel found abundant time to sit for hours at her kitchen window, knitting “cotton warp” quilts—she had knitted sixteen of them, as Avonlea housekeepers were wont to tell in awed voices—and keeping a sharp eye on the main road that crossed the
    hollow and wound up the steep red hill beyond. Since Avonlea occupied a little triangular peninsula jutting out into the Gulf of St. Lawrence with water on two sides of it, anybody who went out of it or into it had to pass over that hill road and
    so run the unseen gauntlet of Mrs. Rachel’s all-seeing eye.</p>
 
{{{ 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": "<p class=\"column\">There are plenty of people in Avonlea and out of it, who can attend closely to their neighbor’s business by dint of neglecting their own; but Mrs. Rachel Lynde was one of those capable creatures who can manage their own concerns and those of other folks into the bargain. She was a notable housewife; her work was always done and well done; she “ran” the Sewing Circle, helped run the Sunday-school, and was the strongest prop of the Church Aid Society and Foreign Missions Auxiliary. Yet with all this Mrs. Rachel found abundant time to sit for hours at her kitchen window, knitting “cotton warp” quilts—she had knitted sixteen of them, as Avonlea housekeepers were wont to tell in awed voices—and keeping a sharp eye on the main road that crossed the hollow and wound up the steep red hill beyond. Since Avonlea occupied a little triangular peninsula jutting out into the Gulf of St. Lawrence with water on two sides of it, anybody who went out of it or into it had to pass over that hill road and so run the unseen gauntlet of Mrs. Rachel’s all-seeing eye.</p>"
}