@brainly/style-guide-basics

@brainly/style-guide-basics

This package contains CSS definitions of variables and clasess for:

• fonts
• colors
• spacing (paddings/margins)
• media queries

Install package

yarn install @brainly/style-guide-basics --save-dev

Init package, additionaly init @font-face from style-guide-basics

import '@brainly/style-guide-basics/dist/initFontFace.css';
import '@brainly/style-guide-basics';

Init package with your custom @font-face definition"

import './customFontFaceConfig.css';
import '@brainly/style-guide-basics';

Example usage

CSS - class composition

.header {
  composes: textBit_m from '@brainly/style-guide-basics';
}

CSS - variables

@value size_xxl from '@brainly/style-guide-basics';

.videoContainer {
  margin-top: size_l;
}

CSS - usage with media queries

.header {
  composes: textBit_m from '@brainly/style-guide-basics';
}
.sectionContent {
  display: flex;
  flex-direction: column;
  margin: size_l;
}
@media largeScreen {
  .sectionContent {
    flex-direction: row;
    max-width: contentMaxWidth;
    margin: size_xxl;
  }

  .header {
    /* Note: composes: would not work here :( */
    font-size: textBitFontSize_l;
  }
}

JSX - usage with classes

import {textBit_s} from '@brainly/style-guide-basics';

const header = <h2 className={textBit_s}>Text bit</h2>;

JSX - usage with variables

import {textBit_s, textBitFontSize_l} from '@brainly/style-guide-basics';

const header = (
  <h2
    className={textBit_s}
    style={{
      fontSize: textBitFontSize_l
    }}
  >
    Text bit
  </h2>
);