Basic Tools

Demo

Basic Tools is a collection of components made to create React application with ease. It includes all the standard elements we usually need to build a webpage.

It makes use of Stlyed Components and its prop system is based on Styled System.

Theming

Theme has been built using the default Styled System keys plus some useful extra props to have better control on specific elements. For instance you have the possibility to transform a simple text in anchor element using the link prop and assign it to the desired item. Those styles are controlled via the custom prop linkStyles in the theme.

 <Text link="cta" href="#">
   Go to another place
 </Text>

If you need to override the standard theme, you can do it updating the keys you want to change in the theme object. Say you need to update the font family used by the theme, you can ovveride the default theme object with your fonts and fontWeights options.

const theme = {
  ...btTheme,
  mode,
  fontWeights: {
    light: 100,
    regular: 400,
    semibold: 600,
    bold: 700
  },
  fonts: {
    normal: '"Inter", sans-serif',
    title: '"Inter", sans-serif'
  }
};

Standard Theme Props

| Theme Key | CSS Properties | | | | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | --- | --- | | space | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap | | fontSizes | font-size | | colors | color, background-color, border-color | | fonts | font-family | | fontWeights | font-weight | | lineHeights | line-height | | sizes | width, height, min-width, max-width, min-height, max-height | | radii | border-radius | | shadows | box-shadow, text-shadow | | zIndices | z-index |

Custom System Theme Props

| Theme Key | Component | | ------------ | --------- | | buttonStyles | Button | | textStyles | Text | | linkStyles | Text |

Notes: This library has been made mainly for personal use and with simplicity in mind. If you feel it could fits your needs or if you think it could be improved, do not hesitate to use it or to collaborate to its melioration, you are welcome.