@fagforbundet/ngx-components
v5.2.0
Published
Angular components and global styles
Downloads
1,332
Readme
@fagforbundet/ngx-components
This package makes available the components and global styles needed for most of Fagforbundet's projects.
Styles
Global styles should be made available with classes where feasible (i.e. .ff-checkbox
, .ff-button
, .ff-dropdown
, etc.). The class name combined with the ff-
prefix ensures the availability of styles, while also ensuring low probability of hijacking any elements or other styles.
The styles
folder contains these folders:
abstracts
-> Contains styles and variables for design tokens and other things that normally won't affect anything directlybase
-> Contains a file containing style references for everything one might need when adding the library to a project. Next to this file one can also find some barrel import files for cleanlinesscomponents
-> Contains styles for design components (i.e. checkbox, button, dropdown, etc.)layouts
-> Contains styles for layouts. These are often containers for different scenarios (i.e. page layouts, grids, misc. containers, etc. (not component specific layouts (i.e. menu-boxes)))utilities
-> Contains utility styles (i.e. no-scroll, outlines, skeletons, etc.)vendor
-> Contains references / imports of styles from vendors that the package depends on
The _index.scss
file imports and forwards all relevant styles for use in other projects. To make the variables and mixins available in your application, @use
the package:
@use '@fagforbundet/ngx-components' as ff;
To make the global styles (classes) available in your application @include
the base
mixin:
@use '@fagforbundet/ngx-components' as ff;
@include ff.base();
Variables
This package makes available variables for common design tokens. All variables are prefixed with ff-
, and semantic variables are also prefixed with something that denotes the context (i.e. border-clr-
or btn-clr-
);
Component styles
Component specific styles should "live" in the component's own stylesheet, so that the component becomes self-contained. If the component requires the styles of any external package, these styles should be added to the _vendor.scss
file to avoid including the same styles more than once. Two or more components should never require different versions of the same external package.
Fonts
Font files are present in this project for anyone who might need them, but Google Fonts serve them as well.
HTML
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
CSS
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
Components
This package also includes all the common components needed to make any interface that Fagforbundet might need. In addition, there are a couple of so-called "bundles", used for common tasks. The bundles are:
- Auth Bundle -> used for everything related to authenticating with the frontend
- Helpers Bundle -> contains helpers for miscellaneous
- Request Bundle -> consolidates the way requests are defined and used
- Storage Bundle -> consolidates data storage in the browser and in memory