MentorKit Pattern Library

Working With CSS And HTML

CSS / HTML

  • Use Tailwind for CSS/markup
  • Global congifuration settings can be changed via the theme variables in src/css/style.css
  • Refer to the tailwind documentation for list of classes: https://tailwindcss.com/docs/installation
  • Strongly advise that tailwind intellisense plugin is installed if using Visual Studio code
  • Ensure that you logically split templates up into smaller components to ensure maintanability of CSS, larger files will make tailwind harder to maintain.

Example

Tailwind classes should be mostly written directly into views:

<ul class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 text-center text-2xl">
    <li>
        <a class="block p-4 hover:font-bold 
        " href="">Home<a>
    </li>
    <li>
        <a class="block p-4 hover:font-bold" href="">About us<a> 
    </li>
    <li>
        <a class="block p-4 hover:font-bold" href="">Contact us<a>
    </li>
</ul>

If you need to setup custom CSS, this can be added via the src/css folder. Custom CSS can be written in the following situations:

  1. Writing a custom utility class
  2. Abstracting a set of utility classes that has become too big or is not possible to componentize
  3. Third party code

JIT (Just-in-time) CSS

  • Utility classes will bundled based on if it is used in your view files. The list of views to watch can be amended in the config.js file in the paths.html section
  • This results in less unused CSS as this proccess ensures only utility classes used in your views will be included in the CSS bundle.
  • Do not write dynamic classes e.g. grid-@variable, JIT CSS works based on matching full class names.