Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Improved ITCSS for BIO
@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';
@Level8Broccoli

This comment has been minimized.

Copy link

@Level8Broccoli Level8Broccoli commented May 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.