Skip to content

Latest commit

 

History

History
53 lines (41 loc) · 2.21 KB

html.md

File metadata and controls

53 lines (41 loc) · 2.21 KB
Raw
reference tag
html
new

@# HTML elements

In order to avoid conflicts with other stylesheets, Blueprint does not style most HTML elements directly. Instead, we provide several ways to style basic elements:

  1. Use Blueprint React components: <H1>.
  2. Apply the Blueprint Classes constant to an HTML tag: <h1 className={Classes.HEADING}>.
  3. Nest HTML tags inside a container with Classes.RUNNING_TEXT (see below).

The following elements should be used in this manner:

Component HTML tag Classes constant
H1 - H6 h1 - h6 HEADING
Blockquote blockquote BLOCKQUOTE
Code code CODE
Label label LABEL - see Labels
Pre pre CODE_BLOCK
OL ol LIST
UL ul LIST
HTMLTable table HTML_TABLE - see HTML Table

The React components listed above each support the full set of relevant HTML attributes and an optional elementRef prop to access the instance of the HTML element itself (not the React component).

@## Nested usage

Applying Classes.RUNNING_TEXT to a container element allows the above HTML elements to be used directly without additional CSS classes. This is very useful for rendering generated markup where you cannot control the exact HTML elements, such as a Markdown document.

See the Running text documentation for more information.

@## Linting

The @blueprintjs/eslint-config NPM package provides advanced configuration for ESLint. Blueprint is currently transitioning from TSLint to ESLint, and as such, rules are being migrated from TSLint to ESLint. In the meantime, some TSLint rules are being run using ESLint.

The @blueprintjs/tslint-config NPM package includes a custom blueprint-html-components rule that will warn on usages of JSX intrinsic elements (<h1>) that have a Blueprint alternative (<H1>). See the package's README for usage instructions.