@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 styles -
src/page
-> Baseline page style, contains css reset, and utility classes -
src/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