@invisionag/plexus-css

    0.11.2 • Public • Published

    plexus-css

    plexus-CSS was a CSS library and a visual styleguide for InVision and is now declared end of life.

    End of Life

    • All stakeholders have agreed that no changes apart from critical bug fixes will be done on them ever again.
    • Do not use artifacts from this repository in new applications.
    • Maintenance: No javascript library updates any more, especially no major version changes or updates of css-loader, sass-loader or resolve-url-loader.

    Conventions for writing CSS

    plexus-css follows the BEM methodology and takes some advice from cssguidelin.es and ITCSS.

    Writing classes

    • Use BEM to name your classes.

      • Block: .block
      • Element: .block__element – Nested inside a block
      • Modifier: .block--modifier or block__element--modifier
    • Avoid nesting.

    CSS spacing

    To avoid pixel counting we use a pragmatic rule for margin and padding.

    • Add margin and padding in five pixel steps
    • This is correct: padding: 20px 25px
    • This is wrong: padding: 18px 23px

    Folder structure

    plexus-css uses the folder structure advocated by ITCSS. You should use the same folder structure in your app if you are adding or extending modules.

    1. Settings: Global variables, config switches like color-variables
    2. Themes: Themes for our products
    3. Tools: Default Sass mixins and functions
    4. Base: HTML elements like h1 - h6 and inputs
    5. Objects: Cosmetic-free design patterns like links or header
    6. Components: Highly reusable elements for the UI like buttons or forms
    7. Trumps: Helpers and overrides

    Note that folders 4-7 are sorted by CSS specificity.

    Development setup

    Prerequisites

    • Install npm and Git and Ruby and the bundler gem (gem install bundler)
    • git clone <repository-url> this repository
    • change to new directory
    • bundle install
    • yarn install

    Get up and running

    • yarn start

    Open http://localhost:4000/styleguide in your web browser

    Testing

    • yarn test

    This uses the stylelint linter for SCSS with the stylelint-config-standard configuration, and also eslint with airbnb style.

    Building

    • yarn build

    Deployment

    Bumping the version

    Important: Do not use npm version patch/minor/major

    This would bump the version and also tag the file, but we need to recreate the styleguide with the new version. If you do so, the tagged version will have an outdated styleguide version number.

    Do it manually.

    Keywords

    none

    Install

    npm i @invisionag/plexus-css

    DownloadsWeekly Downloads

    1

    Version

    0.11.2

    License

    UNLICENSED

    Unpacked Size

    212 kB

    Total Files

    119

    Last publish

    Collaborators

    • fruetel
    • tristandruyen
    • schmitze333
    • csprle
    • beckerei
    • stefan.schiffer
    • alexphilo
    • ahx
    • cloudwaechter
    • tobias
    • jana_hehr
    • alexmarold
    • t_klepzig
    • joshuajaco
    • susahope
    • mwannewitz
    • drogglbecher
    • ivx-circle-ci
    • yichang
    • mmainz
    • ivx-jenkins