@tactics/book-mate-styleguide v1.2.0

BookMate Styleguide

A guide for designing components for 💥BookMate💥

Setup

Installation

1. Clone the repo.
2. We use node version 18 to run this project, I recommend nvm to handle the different node versions on your development machine. After you install nvm just run nvm use 18.
3. run yarn install.
4. You might need to install Gulp. You can do this by npm install -g gulp.

Run

To start the styleguide just run gulp dev. This will compile the styleguide and start a local server on http://localhost:8085.

Build

If you only want to compile/build the css you can run gulp build. This will only compile all of the css and copies the images to the dist folder without starting the local server and generating the styleguide.

Basic structure

After you yarn install and run gulp dev for the first time, you'll have a folder structure like this.

• root - node_modules - dist - where your compiled and autoprefixed styles will go. - src - Contains all of the style. - images - Contains all of our images/icons we use. These get copied to the dist folder when compiling the css. - fonts - Contains all of our local fonts we use. These get copied to the dist folder when compiling the css. - css - where your style files go. - styleguide - where your styleguide is generated.

Usage

Now that we are able to run the styleguide we can start designing our first components. We use the atomic design system to divide our different components in categories (atoms, molecules,...). If you don't know what these categories are, you can find a quick explanation here.

There are 2 ways of defining a component in out styleguide:

• A pure tailwind css component (with none custom css added, just tailwind and only tailwind).
• A custom/combination component.

Pure Tailwind Component

These are the easiest to add. Just create a markdown file in the correct category folder ex: atom/button.md. This file we be picked up automatically in our styleguide. Here you can just start writing the needed stylemark (our styleguide generator) sintax. This will look something like this:

---
name: Button
category: Atom
---
```button.html
<button class="text-3xl font-bold underline">
    Hello world!
</button>
```

And that's all there is to it! Tailwind will pick up the used classes and build them to our dist styles and our styleguide will render the new component without any extra steps.

Custom Component

These components are still pretty easy to create but require a bit more steps. We start almost the same by creating a css file in the correct directory ex: atom/button.css. Now in order for our custom styles to be picked up in our tailwind build we will need to add an @import statement in css/main.css.

/* Atoms */
@import "atom/button";

After you have done that we can start on our component.

For our styleguide to correctly render our component we still will need to write a stylemark section (just as in the previous component) but since we are now working in a css file we will put this in a docblock at the beginning of the file and then put our custom styles underneath. This will look something like this:

/*
---
name: Button
category: Atom
---
```button.html
<button class="text-3xl font-bold underline myCustomClass">
    Hello world!
</button>
*/

.myCustomClass {
    color: red;
}

And that's all! This will result in the same button as before but we now added a red color via our custom class.