// -------------------------------------------------------------------- // Graphpaper Base File // ======================== // // Use this define the styles for common elements throughout your site // and import any other supporting Sass files. // // -------------------------------------------------------------------- // Step 1. Initialize Your Grid // // Relevant Mixin // // +grid-container(center = true, add_padding_if_not_centered = true) // // In order to initialize the Graphpaper grid module, you need to mix // +grid-container into the element that contains the content of your // page. // // Example (uncomment and modify for your own use) // // #pageContainer // +grid-container // // If you wish to align your grid container to the left of the page // and add padding based on the values in _config.sass, // +grid-container has two vailable arguments. // // The first argument sets positioning of the grid. Graphpaper's // default behavior is to center the element on the page. If you wish // to align the element to the left of the page, set the first // argument to false. // // #pageContainer // +grid-container(false) // // Aligning the container to the left will automatically add a // :padding-left property to the element equal to the value of // !graphpaper_grid_padding in _config.sass // // To disable the padding, add a second "false" argument to grid-container // // #pageContainer // +grid-container(false, false) // // Step 2. Style Common Site Elements // // Below, style common elements that appear across your site. Examples // may include page headers, global navigation, or site footers. // @import common/typography.sass // @import common/header.sass // @import common/footer.sass // Step 3. Layout the Rest of Your Site // // Graphpaper's recommendation is to set the id element of each page on // your site to the same name as the sass file that will style it. Scope // all elements under body#id_name for an easy way keep your project // maintainable. Generally, this id name will be the section of the site // the content falls under. Examples include "home", "archives", and // "contact". // // If this recommendation works for you, import those files below. Order // will not matter since scoping under the body tag should eleminiate any // issues that may arise from commonly named elements across different // sections of your site.