Branding & Style Guide

5 layout Layout

Layout rules for the main content area, demonstrating CSS Grid layout elements. Columns are fluid in all breakpoints, to a maximum width of 80 ems in order to preserve readability.

Source: styles.scss, line 30

5.1 layout.sidebars-both Sidebars Both

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sidebars Both region styling, demonstrating ordering and stacking at narrower breakpoints.

Example

Content

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups. Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes. Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake. Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-both.twig
<div class="body-sidebars-both grid-container">

  <aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">    
    <h3>Sidebar First</h3>
    Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar
  </aside>


  <section id="content" style="background: rgba(222, 184, 135, 0.5);">
    <h3>Content</h3>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
    Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
    roll jujubes.
    Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
    chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
    jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
    ice
    cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
    tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
    sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
    canes
    brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
    fruitcake.
    Cookie chocolate croissant cake bear claw chocolate bar gingerbread
    marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
    jelly.
  </section>


  <aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
    <h3>Sidebar Second</h3>
    Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar
  </aside>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-both grid-container columndemocontainer">
    <div class="columndemo" id="cd01"></div>
    <div class="columndemo" id="cd02"></div>
    <div class="columndemo" id="cd03"></div>
    <div class="columndemo" id="cd04"></div>
    <div class="columndemo" id="cd05"></div>
    <div class="columndemo" id="cd06"></div>
    <div class="columndemo" id="cd07"></div>
    <div class="columndemo" id="cd08"></div>
    <div class="columndemo" id="cd09"></div>
    <div class="columndemo" id="cd10"></div>
    <div class="columndemo" id="cd11"></div>
    <div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->
Source: layout/_sidebars.scss, line 1

5.2 layout.sidebars-first Sidebar First

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sidebar First region styling, demonstrating ordering and stacking at narrower breakpoints.

Example

Content

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups. Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes. Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake. Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-first.twig
<div class="body-sidebars-first grid-container">

  <aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">    
    <h3>Sidebar First</h3>
    Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar
  </aside>


  <section id="content" style="background: rgba(222, 184, 135, 0.5);">
    <h3>Content</h3>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
    Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
    roll jujubes.
    Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
    chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
    jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
    ice
    cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
    tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
    sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
    canes
    brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
    fruitcake.
    Cookie chocolate croissant cake bear claw chocolate bar gingerbread
    marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
    jelly.
  </section>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-first grid-container columndemocontainer">
    <div class="columndemo" id="cd01"></div>
    <div class="columndemo" id="cd02"></div>
    <div class="columndemo" id="cd03"></div>
    <div class="columndemo" id="cd04"></div>
    <div class="columndemo" id="cd05"></div>
    <div class="columndemo" id="cd06"></div>
    <div class="columndemo" id="cd07"></div>
    <div class="columndemo" id="cd08"></div>
    <div class="columndemo" id="cd09"></div>
    <div class="columndemo" id="cd10"></div>
    <div class="columndemo" id="cd11"></div>
    <div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->
Source: layout/_sidebars.scss, line 12

5.3 layout.sidebars-second Sidebar Second

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sidebar Second region styling, demonstrating ordering and stacking at narrower breakpoints.

Example

Content

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups. Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes. Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake. Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-second.twig
<div class="body-sidebars-second grid-container">


  <section id="content" style="background: rgba(222, 184, 135, 0.5);">
    <h3>Content</h3>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
    Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
    roll jujubes.
    Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
    chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
    jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
    ice
    cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
    tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
    sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
    canes
    brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
    fruitcake.
    Cookie chocolate croissant cake bear claw chocolate bar gingerbread
    marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
    jelly.
  </section>


  <aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
    <h3>Sidebar Second</h3>
    Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar
  </aside>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-second grid-container columndemocontainer">
    <div class="columndemo" id="cd01"></div>
    <div class="columndemo" id="cd02"></div>
    <div class="columndemo" id="cd03"></div>
    <div class="columndemo" id="cd04"></div>
    <div class="columndemo" id="cd05"></div>
    <div class="columndemo" id="cd06"></div>
    <div class="columndemo" id="cd07"></div>
    <div class="columndemo" id="cd08"></div>
    <div class="columndemo" id="cd09"></div>
    <div class="columndemo" id="cd10"></div>
    <div class="columndemo" id="cd11"></div>
    <div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->
Source: layout/_sidebars.scss, line 22
Example

Content

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups. Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes. Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake. Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-none.twig
<div class="body-sidebars-none grid-container">

  <section id="content" style="background: rgba(222, 184, 135, 0.5);">
    <h3>Content</h3>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
    Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah
    bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
    roll jujubes.
    Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
    chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
    jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
    ice
    cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
    tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
    sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
    canes
    brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
    fruitcake.
    Cookie chocolate croissant cake bear claw chocolate bar gingerbread
    marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
    jelly.
  </section>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-none grid-container columndemocontainer">
    <div class="columndemo" id="cd01"></div>
    <div class="columndemo" id="cd02"></div>
    <div class="columndemo" id="cd03"></div>
    <div class="columndemo" id="cd04"></div>
    <div class="columndemo" id="cd05"></div>
    <div class="columndemo" id="cd06"></div>
    <div class="columndemo" id="cd07"></div>
    <div class="columndemo" id="cd08"></div>
    <div class="columndemo" id="cd09"></div>
    <div class="columndemo" id="cd10"></div>
    <div class="columndemo" id="cd11"></div>
    <div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->
Source: layout/_sidebars.scss, line 32