Blount Style Guide (based on Tachyons)
This styleguide is useful to provide consistency in both design and markup for all pages within the new Blount website. Its usage ensure a consistent appearance and user experience. Additionally, this framework aims to promote good coding practices through the use of modular and reusable markup and styles. Blount Style Guide is based on Functional CSS with Tachyons so it is recommended to be familiarized with Tachyons CSS Toolkit.
Important rules for developers
1. NEVER modify Tachyons CSS The _ui-src/responsive/themes/blount-v2/scss/vendor directory shall always remain untouched.
2. If new behavior needed... First, check the guideline to see if the need is already covered. If it is not, proceed modifying blount template sass files which are located under the _ui-src/responsive/themes/blount-v2/scss directory. We try to reuse as much as possible, so when extending, also check if it can be solved overriding an existing Tachyons variable under _ui-src/responsive/themes/blount-v2/scss/abstract/_variables.scss file. If that is not the case, proceed respecting the style guide.
3. The less CSS we write, the more scalable it is Avoid repeating css statements, if you find yourself repeating css code, think about how you can make it more abstract so that it is reusable. We are using a CSS framework that comes with pure atomic classes, this way we can keep css as light as possible. Functional CSS all the way.