Huesos
Style
Guide

Repositoire

GitHub

Preview

Main Wrapper

An (optional) wrapper for the main content of a webpage that sets three default bevahiors:

  • $max-width, the maximum size the container can get.
  • $layout-align, wether to align the container (on larger screens) to the left, right or center.
  • $layout-padding, the padding to apply to the container (set to false to delete it);

Example

<div id="main-wrapper">
    <h1 class="h3">Content inside main wrapper</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa dicta, laboriosam laborum ab, ex amet nesciunt quod aliquid accusamus, sapiente beatae autem. Velit optio aperiam modi esse? Nemo, quisquam voluptatum!</p>
</div>

Assets

  • Filesystem Path: src/components/layout/main-wrapper/_main-wrapper.scss
  • Size: 133 Bytes
  • Content:
    #main-wrapper {
    	max-width: $max-width;
    	@include block-align($layout-align);
    	@if $layout-padding {
    		padding: $layout-padding;
    	}
    }