jansensan-stylesheets v1.5.1
Stylesheets
Common stylesheets for the different websites hosted and managed by Mat Janson Blanchet.
Usage
The stylesheets are not compiled, they are provided as sources for you to import into your own code.
The stylesheets exist both in LESS and SASS formats, available respectively in src/less
and src/sass
directories. You may import the format you need.
Install
Install the dev dependency:
npm install --save-dev jansensan-stylesheets@latest
Fonts
While these styles originally relied on Google Fonts, they now require self-hosted fonts.
The rationale behind this choice is that it is best to not allow GAFA to track visitors to websites making use of these libraries.
In order to self-host the fonts, download the following fonts:
Somewhere in your stylesheets, ensure to declare the following:
@font-face {
font-family: 'PolyItalic';
src: url('path/to/font/Poly-Italic.ttf');
}
@font-face {
font-family: 'SourceCodePro';
src: url('path/to/font/SourceCodePro-Medium.otf');
}
Note: the font-family
value must match exactly what is written above.
General
In your site's main stylesheet, import the stylesheets at the top:
@import "path/to/node_modules/jansensan-stylesheets/src/sass/jansensan-stylesheet.scss";
Variables
In the case of React, Angular, or other apps, some components may depend on the color, fonts, and breakpoints variables provided by this library. In such cases, the components' styles may simply import the variables:
@import 'path/to/node_modules/jansensan-stylesheets/src/sass/common/variables.scss';
The variables.less
/variables.scss
files include the other variables files in the same directories. If you wish to import only the breakpoints, the colors, or the fonts, it is possible to be more granular:
@import 'path/to/node_modules/jansensan-stylesheets/src/sass/common/breakpoints.scss';
4 months ago
4 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago