No CSS Framework

• Dependencies
• CSS Structure

The no-CSS-framework version of the components is compatible with any CSS project: they don't depend on any CSS framework.

To include a component, copy its HTML, CSS, JS code and paste it into your project. No settings required.

This approach is ideal if you need to include just a few components from our library and you're not interested in changing your project framework or learning a new framework.

Use the switch on the component demo pages to select the 'Any CSS framework' option:

Dependencies #

Some components need other components (i.e., dependencies) to work properly. When a dependency is required, you'll be notified on the component's page. Make sure to import the dependencies in your code before importing the component's code.

The numerical index before each CSS/JS file name (e.g., _1_component-name.css) indicates the importing order. If two components have the same index, it's not important which one is imported first.

CSS Structure#

The component CSS is organized in 4 sections:

1. Reset: a mini CSS reset to remove the default browser style that could conflict with the component. If you are using multiple components, you can include this reset only once 
2. Variables: a collection of CSS custom properties used across the component elements
3. Component: the main component code
4. Utility classes: a list of reusable classes

/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
/* ... */

/* variables */
:root {
  /* colors */
  --tu1-color-primary-hsl: 250, 84%, 54%;
  --tu1-color-accent-hsl: 250, 84%, 54%;

  /* spacing */
  --tu1-space-sm: 0.75rem;
  --tu1-space-md: 1.25rem;
  --tu1-space-lg: 2rem;

  /* typography */
  --tu1-text-md: 1.2rem;

  /* ... */
}

/* component */
.sticky-feature {
  position: relative;
  z-index: 1;
  padding: var(--sh4-space-lg) 0;
}

/* ... */

/* utility classes */
.tu1-text-center {
  text-align: center;
}

.tu1-radius-lg {
  border-radius: 0.5em;
}

The color variables are defined as HSL (hue, saturation, lightness) colors. For more information about the nomenclature and what these colors represent, check the color documentation page of CodyFrame, our CSS framework.

To create a dark version of the component, you can edit the component's color variables.

For example, you could create a .theme-dark class and update the custom properties (similarly to what we do in CodyFrame):

:root { /* light theme */
  --tu1-color-primary-hsl: 250, 84%, 54%;
  --tu1-color-accent-hsl: 250, 84%, 54%;
}

.theme-dark { /* dark theme */
  --tu1-color-primary-hsl: 250, 100%, 69%;
  --tu1-color-accent-hsl: 28, 45%, 56%;
}