@ac-ui/design-system
v2.0.1
Published
A SCSS design system based on Bootstrap, to provide styling and theming to all Avenue Code products
Downloads
15
Keywords
Readme
@ac-ui/design-system
A SCSS design system based on Bootstrap, to provide styling and theming to all Avenue Code products
TODO
- Set variables to all be
!default
to inherit any product overrides - Add editor config files
- Add linting config files
- Lint staged
Installation
- Install as a npm dependency
npm i @ac-ui/design-system.git
- Use within your SCSS
- Want settings, mixins, extends, with no classes?
@import "~@ac-ui/design-system/src/base";
- Want access to Bootstrap's grid classes?
- No need to import the
required
partial! @import "~@ac-ui/design-system/src/bridge/grid";
- No need to import the
- Want to load everything? Please reconsider.
@import "~@ac-ui/design-system/src";
- Want settings, mixins, extends, with no classes?
- How about just the styles needed to make the page pretty?
- Its hard to say for sure just what you'll need on a page, so
@ac-ui
provides some utility classes and general stylings @import "~@ac-ui/design-system/src/page";
- Its hard to say for sure just what you'll need on a page, so
How do variables get determined?
- All variables should be declared in the
src/_theme.scss
file - When imported in to a Product, Product variables cascade into Theme Variables
- Theme variables cascade into Bootstrap variables
Overview
src/index
-> Entry file into all component, helper, and utility stylessrc/page
-> Baseline page style, contains css reset, and utility classessrc/fonts
-> Baseline font-family, contains css with font-faces styles.src/theme
-> Baseline theme variables. Product implementation can override.src/bridge/${FILE_NAME}
-> Act as a bridge file to Bootstrap, add pertinent styles- Each bridge file loads AC-UI Variables, and has access to all Mixins/Functions/Variables