exceleration

Exceleration Web Component Library (Currently under development)

The Exceleration Web Component Library is intended to be used as part of a React project. It can also be used with React based frameworks, such as NextJs. It also heavily relies on Tailwind for styling, so your React project must include Tailwind as a dependency.

Prerequisits:

• A working React project
• Tailwind has been integrated into your project

To use:

1. Import with your NPM based package manager: npm install exceleration
2. Add the Exceleration package to your tailwind.config.js file's content:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./node_modules/exceleration/**/*.js",
    ...
  ],
  ...
}

3. Control your Exceleration style via your project's tailwind.config.js theme options. The following snippet covers all styling options:

/** @type {import('tailwindcss').Config} */
export default {
  ...,
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px",
    },
    colors: {
      background: '#404e5a',
      interactiveLayerPrimary: "#123456",
      interactiveLayerSecondary: "#123456",
      interactiveLayerTertiary: "#123456",
      interactiveTextPrimary: '#ffffff',
      interactiveTextSecondary: '#ffffff',
      interactiveTextTertiary: '#ffffff'
    },
    fontFamily: {
      primary: ["Graphik", "sans-serif"],
      secondary: ["Merriweather", "serif"],
    },
    extend: {
      spacing: {
        128: "32rem",
        144: "36rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

Notes:

• You must import fonts in the framework-appropriate fashion before the change will be incorporated in Exceleration components. Here's some useful links on how to do that in NextJS or React.
• When overriding Tailwind class names, it may be useful to prioritize critical styles with the "!" (important) decorator. Example:

<Navbar
  navItems={[{ label: "Link A", link: "/" }, { label: "Link B", link: "/" }, { label: "Link C", link: "/" }]}
  className='!font-primary'
/>

The above snippet would override any existing font classname with the "font-primary" class. This can help overcome any style conflicts caused by conflicting class names.