Tailwind CSS
The CodyHouse components are compatible with Tailwind CSS, the popular utility-first framework.
Use the switch on the component demo pages to select the 'Tailwind' option:
Even if the components are built using the Tailwind CSS utility classes, some of them include custom CSS style. Make sure to import it before the Tailwind CSS utilities layer.
Config file #
This is the tailwind.config.js file we use for the CodyHouse components. Use it as your starter configuration file or import it into your existing tailwind.config.js file.
It includes:
- Custom colors definition using CSS variables;
- Extension of the Tailwind default utility classes (e.g., custom z-index values, custom opacities);
- Aspect-ratio plugin.
Input CSS #
The style of buttons, form elements and text components is not included in the CSS code of each component. It is defined in an input.css file that you can donwload on GitHub.
Additionally, each component has its custom CSS. Make sure to import it in the input.css file before the Tailwind utilities layer.
Here's what's included in the input.css file:
Colors #
Colors are defined as HSL (hue, saturation, lightness) using CSS custom properties. Each color is defined for the default (light) theme and dark theme:
:root, [data-theme="default"] {
--color-primary: 250 84% 54%;
}
[data-theme="dark"] {
--color-primary: 250 100% 69%;
}For more information about the nomenclature and what these colors represent, check the color documentation page of CodyFrame, our CSS framework.
Buttons #
The .btn class includes the style applied to all the button components. The following component variations are defined:
.btn--primary.btn--accent.btn--subtle.btn--disabled
Input Forms #
The .form-control class applies the basic style to all form elements. Other form classes are:
.form-legendfor<legend>element.form-labelfor<label>element
Custom Typography #
The .text-component is a class to be applied to any block containing typography elements. It takes care of 1) vertical rhythm and 2) styling inline elements.
<div class="text-component text-contrast-medium">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestiae laudantium quis et, veniam, eveniet aperiam facere dolorem iusto reiciendis.</p>
</div>Global Editors #
You can use our Global Editors to create the custom global style of your project (e.g., colors, buttons style). The generated code can be included in the input.css file.
You can find more info on the Global Editors page.
JS Utility functions #
Before importing the JS of the component, you should include this file with the JavaScript utility functions used in the CodyHouse components.
Alternatively, import it via CDN:
<body>
<!-- ... -->
<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
<script src="component.js"></script>
</body>Dark Theme #
All components are ready for dark mode.
Add the [data-theme="dark"] attribute to any components to switch to the dark theme version:
<div data-theme="dark">
<!-- dark version of the component -->
</div> Dark theme colors are defined in the input.css file.
