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>

<!-- 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>

<!-- 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>

<!-- Emphasized item -->
<section>
    <p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea;
        and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p>
    <image class="emphasis" src="/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg"
    />
    <p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking
        him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as
        she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</p>
    </div>
</section>

<!-- Featured item -->
<section>
    <p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea;
        and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p>
    <image class="feature" src="/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg"
    />
    <p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking
        him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as
        she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</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
/* Section margins */
{
  "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>"
}

/* Column (outside of a section) */
{
  "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>"
}

/* Full Width (with standard text column) */
{
  "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>"
}

/* Emphasized item */
{
  "markup": "<section><p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea; and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p><image class=\"emphasis\" src=\"/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg\" /><p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</p></div></section>"
}

/* Featured item */
{
  "markup": "<section><p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea; and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p><image class=\"feature\" src=\"/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg\" /><p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</p></div></section>"
}