Improved ITCSS for BIO

improved-itcss.scss

@charset "UTF-8";

/* ============================================================================
   MAIN STYLES
   ========================================================================= */

/**
 * Main styles.
 *
 * The structure is based on ITCSS and modified:
 * https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 *
 * This helps the CSS specificity:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
 *
 * Author: Ryan Yu <hey@ryanyu.com>
 */

/**
 * Settings.
 *
 * Design tokens for UI.
 */

@import 'imports/settings/base';
@import 'imports/settings/color';
@import 'imports/settings/typography';
@import 'imports/settings/animation';

/**
 * Tools.
 *
 * Globally used functions, placeholders and mixins.
 *
 * NOTE: it is important not to output any CSS in the first 2 layers.
 */

@import 'imports/tools/functions';
@import 'imports/tools/placeholders';
@import 'imports/tools/mq';

/**
 * Vendors.
 *
 * 3rd party vendors including normalize/reset.
 * This is the first layer which generates actual CSS.
 */

@import '~modern-normalize/modern-normalize';
@import '~tiny-slider/src/tiny-slider';

/**
 * Objects.
 *
 * Class-based selectors which define undecorated design patterns,
 * for example, utilities, media object and container.
 */

@import 'imports/objects/helpers';
@import 'imports/objects/grid';
@import 'imports/objects/page';
@import 'imports/objects/container';

/**
 * Elements.
 *
 * Styling for bare HTML elements, e.g., H1, a, etc.
 * These come with default styling from the browser so we can redefine them here.
 */

@import 'imports/elements/typography';
@import 'imports/elements/image';
@import 'imports/elements/link';
@import 'imports/elements/button';
@import 'imports/elements/list';

/**
 * Components.
 *
 * UI components.
 */

@import 'imports/components/button';
@import 'imports/components/highlight';
@import 'imports/components/logo';
@import 'imports/components/main-nav';
@import 'imports/components/slider';
@import 'imports/components/content-box';
@import 'imports/components/video';

/**
 * Patterns.
 *
 * This is collections of components.
 */

@import 'imports/patterns/header';
@import 'imports/patterns/hero';
@import 'imports/patterns/footer';

/**
 * Scopes.
 *
 * Scoping in the page level but only used when it's absolutely necessary.
 */

@import 'imports/scopes/home';

/**
 * Utilities.
 *
 * Ability to override anything.
 * It will most likely come with !important as we are sure to use them.
 */

@import 'imports/utils/typogtaphy';

Typo 116:29
@import 'imports/utils/typogtaphy';
@import 'imports/utils/typography';