dkniffin/kinship

View on GitHub
app/javascript/styles/index.scss

Summary

Maintainability
Test Coverage
// This structure was inspired by https://sass-guidelin.es/#the-7-1-pattern

// ============================================================================
// 1. Vendors
// This section is for any vendor/library imports and customizations.
// ============================================================================
@import "1_vendors/**/*.scss";

// ============================================================================
// 2. Elements
// This section contains styles for basic HTML elements and styles to account
// for browser inconsistencies.
// ============================================================================
@import "reset-css";
@import "2_elements/**/*.scss";

// ============================================================================
// 3. Layouts
// This section contains any styles for layouts (reusable large sections of a
// page, usually focused on spacing and layout)
// ============================================================================
@import "3_layouts/**/*.scss";

// ============================================================================
// 4. Components
// This section contains styles for all of our components (reusable small
// pieces of a page)
// ============================================================================
@import "4_components/**/*.scss";

// ============================================================================
// 5. Pages
// This section contains page-specific styles that override the layout and
// components used on the page.
//
// Ideally, the directory structure should match up with the structure
// of `app/views`
// ============================================================================
@import "5_pages/**/*.scss";

// ============================================================================
// 6. Utilities
// This section contains all of our utility/helper classes. We should aim for
// using these sparingly and prefer to use something from one of the previous
// directories as much as possible. This should help enforce consistency,
// make the html templates less noisy, and reduce specificity issues.
//
// This is the only section where it's okay to use !important without a comment
// explaining why it's necessary.
// ============================================================================
@import "6_utilities/**/*.scss";