1 | @# Classes
|
2 |
|
3 | Blueprint packages provide React components in JS files and associated styles in
|
4 | a CSS file. Each package exports a `Classes` constants object in JavaScript that
|
5 | contains keys of the form `NAMED_CONSTANT` for every CSS class used. This
|
6 | separation allows us to change CSS classes between versions without breaking
|
7 | downstream users (although in practice this happens very rarely).
|
8 |
|
9 | **Avoid referencing hardcoded Blueprint class names in your JS or CSS code.**
|
10 |
|
11 | ```tsx
|
12 | // Don't do this! Avoid hardcoding Blueprint class names.
|
13 | <button className="@ns-button @ns-large">Don't do this!</button>
|
14 | ```
|
15 |
|
16 | The **best practice** is to add your own class to an element and then reference
|
17 | that class whenever needed.
|
18 |
|
19 | ```tsx
|
20 | <Button className="my-custom-class" text="customized button" />
|
21 | ```
|
22 |
|
23 | ```css.scss
|
24 | .my-custom-class {
|
25 | width: 4000px;
|
26 | }
|
27 | ```
|
28 |
|
29 | In cases where adding and styling a new class is impractical or undesirable, use
|
30 | the `Classes` constants or `$ns` Sass/Less variable. The `Classes` constants can
|
31 | be particularly useful when writing UI tests.
|
32 |
|
33 | ```tsx
|
34 | // use Classes constants for forward-compatible custom elements.
|
35 | import { Classes } from "@blueprintjs/core";
|
36 | <a className={Classes.MENU_ITEM}>custom menu item</a>;
|
37 | ```
|
38 |
|
39 | ```css.scss
|
40 | // interpolate the $ns variable to generate forward-compatible class names.
|
41 | // this approach is *not encouraged* as it increases maintenance cost.
|
42 | @import "~@blueprintjs/core/lib/scss/variables";
|
43 | .#{$ns}-menu-item {
|
44 | }
|
45 | ```
|
46 |
|
47 | @## Modifiers
|
48 |
|
49 | Blueprint components support a range of **modifiers** to adjust their
|
50 | appearance. Some commonly used modifiers are `intent`, `large`, and `minimal`.
|
51 | While modifiers are typically implemented as simple CSS classes, it is always
|
52 | preferrable to use the corresponding prop on a React component.
|
53 |
|
54 | ```tsx
|
55 | // Prefer props over modifier classes.
|
56 | <Button intent="primary" minimal={true}>Good stuff</Button>
|
57 |
|
58 | // Don't do this!
|
59 | <Button className={classNames(Classes.INTENT_PRIMARY, Classes.MINIMAL)}>Don't do this!</Button>
|
60 | ```
|
61 |
|
62 | Another important note: Since modifiers typically correspond directly to CSS classes, they will often
|
63 | cascade to children and _cannot be disabled_ on descendants. If a `<ButtonGroup>`
|
64 | is marked `minimal={true}`, then setting `<Button minimal={false}>` on a child
|
65 | will have _no effect_ since `Classes.MINIMAL` cannot be removed or overriden
|
66 | by a descendant.
|
67 |
|
68 | @## Namespacing
|
69 |
|
70 | All Blueprint CSS classes begin with a namespace prefix to isolate our styles
|
71 | from other frameworks: `.button` is a very common name, but only Blueprint
|
72 | defines `.@ns-button`.
|
73 |
|
74 | Beginning with Blueprint 3.0, this namespace will be versioned by major version
|
75 | of the library so two major versions can be used together on a single page. This
|
76 | means the namespace at the beginning of every class _will change in each
|
77 | subsequent major version_. In Blueprint 1.x and 2.x this namespace was `pt-`,
|
78 | but in Blueprint 3.0 it will change to `bp3-` and increase accordingly.
|
79 |
|
80 | ### Custom namespace
|
81 |
|
82 | The namespace can be changed _at build time_ to produce a custom Blueprint build
|
83 | (though this usage is not recommended and we cannot offer support for it). This
|
84 | requires several things:
|
85 |
|
86 | 1. You must use Sass and import Blueprint Sass source into your app, rather than using the CSS file distributed in the NPM package.
|
87 | - Compiling Blueprint Sass source requires two additional tools:
|
88 | [node-sass-package-importer](https://www.npmjs.com/package/node-sass-package-importer)
|
89 | for resolving node_modules imports and
|
90 | [sass-inline-svg](https://github.com/haithembelhaj/sass-inline-svg) for
|
91 | inlining SVG images.
|
92 | 1. Define the `$ns` Sass variable in your app styles before importing `blueprint.scss` to update the generated CSS.
|
93 | 1. When bundling your code, set the `BLUEPRINT_NAMESPACE` environment variable to the same value to update the generated `Classes` constants. The easiest way to do this is on the command line: `BLUEPRINT_NAMESPACE="custom" webpack ...args`
|
94 |
|
95 | @## Linting
|
96 |
|
97 | The [**@blueprintjs/eslint-config**](https://www.npmjs.com/package/@blueprintjs/eslint-config)
|
98 | NPM package provides advanced configuration for [ESLint](https://eslint.org/). Blueprint is
|
99 | currently transitioning from [TSLint](https://palantir.github.io/tslint/) to ESLint, and as
|
100 | such, rules are being migrated from TSLint to ESLint. In the meantime, some TSLint rules are
|
101 | being run using ESLint.
|
102 |
|
103 | The [**@blueprintjs/eslint-plugin**](https://www.npmjs.com/package/@blueprintjs/eslint-plugin)
|
104 | NPM package includes a custom `blueprint-html-components` rule that will warn on usages of
|
105 | JSX intrinsic elements (`<h1>`) that have a Blueprint alternative (`<H1>`). See
|
106 | the package's [README](https://www.npmjs.com/package/@blueprintjs/eslint-plugin)
|
107 | for usage instructions.
|