---
title: Overview
order: 1
---

This is the **Pattern Library** for your project. It documents the conventions and components used on your project, along with examples of how they're used.


## Conventions

This project uses the following conventions:

* **Mobile first** (`min-width`) breakpoints
* **[Atomic Design](https://atomicdesign.bradfrost.com/)** components (atoms, molecules, organisms, templates, pages)
* **[ABEM](https://css-tricks.com/abem-useful-adaptation-bem/)** class naming (`.componentName__elementName -modifierName`)
* the [**BPM**](https://www.imarc.com/blog/block-property-modifier-a-bem-like-css-custom-properties-methodology) custom property methodology


## Tools

* [Cypress](https://www.cypress.io/)
* [ESLint](https://eslint.org/)
* [Fractal](https://fractal.build/)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [Normalize.css](https://necolas.github.io/normalize.css/)
* [Sass](https://sass-lang.com/)
* [Vite](https://vitejs.dev/)
* [Vue](https://vuejs.org/)