@utrecht/component-library-css

    1.0.0-alpha.115 • Public • Published

    CSS Components

    CSS components are developed using BEM class names and the stylesheets can be included in your page side-effect free. Apply the class names to your elements to make them stylable using design tokens.

    npm install --save-dev @utrecht/component-library-css
    

    Theoretically you can include the components in your HTML page like so, but this is not the typical use case of this library:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Example page</title>
        <link rel="stylesheet" href="node_modules/@utrecht/component-library-css/dist/bem.css" />
      </head>
      <body>
        <h1 class="utrecht-heading-1">Home</h1>
        <p class="utrecht-paragraph">Hello, world!</p>
      </body>
    </html>

    The BEM class names can be particularly useful to include only the CSS you need using CSS modules (in React).

    import React from "react";
    import style from "@utrecht/component-library-css/dist/bem.css";
    
    export default class ExamplePage extends React.Component {
      render() {
        return (
          <>
            <h1 className={btn["utrecht-heading-1"]}>Home</h1>
            <p className={btn["utrecht-paragraph"]}>Hello, world!</p>
          </>
        );
      }
    }

    Install

    npm i @utrecht/component-library-css

    DownloadsWeekly Downloads

    216

    Version

    1.0.0-alpha.115

    License

    EUPL-1.2

    Unpacked Size

    512 kB

    Total Files

    12

    Last publish

    Collaborators

    • littlebobbytabl.es
    • yolijn
    • nl-design-system-ci