Structuring CSS

application.css

@charset 'utf-8';

/*------------------------------------*\
    Application Stylesheet
\*------------------------------------*/

/**
 * NOTE It's worth noting that most guidelines for writing good CSS and SCSS is
 * borrowed of two different guidelines. For more information, see our code
 * or take a look at the guidelines:
 * - CSS Guidelines: http://cssguidelin.es/
 * - SCSS Guidelines: https://sass-guidelin.es/
 */

/**
 * Abstracts
 * ----------------------------------------------------------------------------
 * The abstracts/ folder gathers all Sass tools and helpers used across the
 * project. Every global variable, function, mixin and placeholder should be put
 * in here.
 *
 * The rule of thumb for this folder is that it should not output a single line
 * of CSS when compiled on its own. These are nothing but Sass helpers.
 */

@import 'abstracts/functions',
        'abstracts/variables',
        'abstracts/mixins',
        'abstracts/animations';

/**
 * Base
 * ----------------------------------------------------------------------------
 * The base/ folder holds what we might call the boilerplate code for the project.
 * In there, you might find the reset file, some typographic rules, and probably a
 * stylesheet defining some standard styles for commonly used HTML elements
 */

@import 'base/normalize',
        'base/typography',
        'base/forms',
        'base/tables',
        'base/helpers';

/**
 * Layout
 * ----------------------------------------------------------------------------
 * The layout/ folder contains everything that takes part in laying out the site
 * or application. This folder could have stylesheets for the main parts of the
 * site (header, footer, navigation, sidebar…), the grid system or even CSS styles
 * for all the forms.
 */

@import 'layout/main',
        'layout/page';

/**
 * Components
 * ----------------------------------------------------------------------------
 * For smaller components, there is the components/ folder. While layout/ is macro
 * (defining the global wireframe), components/ is more focused on widgets.
 * It contains all kind of specific modules like a slider, a loader, a widget,
 * and basically anything along those lines. There are usually a lot of files
 * in components/ since the whole site/application should be mostly composed of
 * tiny modules.
 */

@import 'components/account-form',
        'components/account-nav',
        'components/action-bar',
        'components/activity',
        'components/address',
        'components/alert',
        'components/avatar',
        'components/badge',
        'components/banner',
        'components/breadcrumbs',
        'components/button-group',
        'components/button',
        'components/callout',
        'components/checkout-steps',
        'components/combobox',
        'components/contact-card',
        'components/contact-list',
        'components/deal-card',
        'components/deal-list',
        'components/document-form',
        'components/document',
        'components/dropdown',
        'components/flash-message',
        'components/help-block',
        'components/hero',
        'components/icon',
        'components/input-group',
        'components/label',
        'components/link-company',
        'components/list',
        'components/logo',
        'components/main-nav',
        'components/nav',
        'components/nested-fields',
        'components/notes',
        'components/notification-indicator',
        'components/notification-list',
        'components/pagination',
        'components/party-avatar',
        'components/party-list',
        'components/payment-confirmation',
        'components/payment-details',
        'components/payment-list',
        'components/profile-form',
        'components/settings-list',
        'components/stats',
        'components/todo',
        'components/top-bar',
        'components/turbolinks';

/**
 * Pages
 * ----------------------------------------------------------------------------
 * If you have page-specific styles, it is better to put them in a pages/
 * folder, in a file named after the page. For instance, it’s not uncommon to have
 * very specific styles for the home page hence the need for a _home.scss file in
 * pages/.
 */

@import 'pages/dashboard',
        'pages/lead',
        'pages/registration',
        'pages/search';

/**
 * Shame
 * ----------------------------------------------------------------------------
 * Putting all the CSS declarations, hacks and things we are not proud of in a
 * shame file. This file, dramatically titled _shame.scss, would be imported after
 * any other file, at the very end of the stylesheet.
 */

@import 'shame';