Nabbing Pleasant Monads

    @haldi/style-guide
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    👩‍🎨 Style Guide

    image-dependencies image-minified image-types

    image-downloads image-shaking

    This package is a high level abstraction of our site-wide CSS for haldi.com. It makes use of CSS variables and TypeScript to make the same values available in CSS and JS. Optionally, this package supports TailwindCSS as well to really speed development up, while keeping it customized.

    Installation

    # Standard NPM install
    npm i @haldi/style-guide

    Usage

    The goal of this abstraction is to provide a consistent base for all our CSS in a single package which we can then import into each of our services. Each consumer can take this base and further customize it as necessary. This will enable us to update our branding in the future quickly and consistently.

    Using CSS imports

    This will import the whole style-guide so we only want to do this once. However, if we want to make use of the pure CSS variables you can also import the variables independently to prevent duplication.

    @import '@haldi/style-guide';
    
    /* or */
    
    @import '@haldi/style-guide/dist/variables';

    TypeScript / Javscript

    Each time we create :root CSS variables we create the equivalent in TypeScript. Then we export the same API for both CSS/TS and generate types while we compile the TypeScript to Javascript.

    import { color, font, grid, media } from '@haldi/style-guide';
    
    // Simple Component
    const Component = () => {
      return (
        <div style={{ color: color.primary }}>
          <h1>Hello World!</h1>
        </div>
      );
    };

    Install

    npm i @haldi/style-guide

    DownloadsWeekly Downloads

    76

    Version

    2.0.3

    License

    UNLICENSED

    Unpacked Size

    64.5 kB

    Total Files

    41

    Last publish

    Collaborators

    • visormatt
    • nikgavalas