angular-atomic-schematics
v0.1210.2
Published
This is an atomic design schematics for Angular.
Downloads
50
Readme
DON'T TOUCH THIS REPOSITORY BECAUSE I'M ADJUSTING NOW.
Angular Atomic Schematics
This is an Angular Atomic Schematics.
Features
- Generate Atomic Component by CLI
- Host CSS Variable
- Atomic Common Style
Install
You can install this package with ng add
.
$ ng add angular-atomic-schematics
Skipping installation: Package already installed
? Where do you setup Angular Atomic Components? src/app/shared/components
? Where do you setup Angular Atomic Styles? src/styles
Generate Atomic Component by CLI
You can generate Atomic Component(Atom, Molecule, Organism, Template) by CLI. There are something to implement Angular Components.
ng g atom <name>
create Atom in<conponentsDir>/atoms/<name>
.ng g molecule <name>
create Molecule in<componentsDir>/molecules/<name>
.ng g organism <name>
create Organism in<componentsDir>/organisms/<name>
.ng g template <name>
create Template in<componentsDir>/templates/<name>
.
<componentsDir>
is configed when you run ng add
.
In above case, <componentsDir>
is src/app/shared/components
Host CSS Variable
You can use Host CSS Variable host-variable()
or hvar()
.
This is capcelized CSS Variable that is not accessed by other Component.
Example
// hoge.atom.scss
$host: "--hoge-atom";
@import 'atomic/host-variable';
@import 'atomic/atom';
:host {
@include atom($host);
// Define Host CSS Variable.
@include host-variable(--width, 1000px);
// You can defined `hvar()` alias of `host-variable()`.
@include hvar(--height, calc(var(--width) / 2));
}
:host {
// You can call Host CSS Variable by `host-variable()` or `hvar()`.
width: host-variable(--width);
height: hvar(--height);
}
and you can setting CSS Variable from Molecules.
// hogehoge.molecule.scss
$host: "--hogehoge-molecule";
@import 'atomic/host-variable';
@import 'atomic/molecule';
:host {
@include molecule($host);
@include hvar(--width, 300px);
}
:host {
// `hoge` is selector of above Hoge Component.
hoge {
--width: calc(var(#{$host}--width) / 2);
}
}
Atomic Common Style
Editing atomic scss files, change atomic common style.
Example
// src/styles/atomic/_molecule.scss
@import 'atomic/host-variable';
@import 'atomic/atomic-component';
@mixin molecule($host) {
@include atomic-component($host);
@include hvar($host, --base-color, black);
@include hvar($host, --main-color, white);
@include hvar($host, --accent-color, red);
// All shild atoms become the same color as this molecule
* {
--base-color: hvar(--base-color);
--main-color: hvar(--main-color);
--accent-color: hvar(--accent-color);
}
}