G-Loot CSS Framework introduction

The G-Loot CSS Framework is a centralized front-end design system that allows any developer to quickly build pages that are in line with the G-Loot brand and its user interface system.

Based on the utility-first framework Tailwind CSS, the G-Loot CSS Framework provides pre-defined components listed on this website as well as highly composable, low-level utility classes to build complex user interfaces with speed in mind.

Benefits

Smart design
By separating the style from the content, we are able to design in a smarter way, combining styling across components (example: we are able to streamline the loading state of the tournament & mission cards). It makes it also easier to have a semantic structure (div > figure, header, section, ul, etc.).

One place of truth
Since the styling is defined outside of the React components, the appearance and feeling of any element can be explored and tested freely. It also makes the G-Loot CSS Framework the one place of truth between UX/UI and devs.

Technology agnostic
As it is independent from the front-end technology (ReactJS), the G-Loot CSS Framework is instantly compatible with any other front-end language (VueJS, SvelteJS PHP, plain HTML, emails, etc.) making the building of ad-hoc tools and interfaces a piece of cake.

Flexible and quick
Because it is based on the CSS Framework Tailwind CSS, the whole product can use its numerous utility-first class names to build layouts and one-offs with ease and speed while still remaining consistent with the G-Loot brand.

Faster render
While loading large external style sheets can negatively impact performance metrics, simple CSS is faster for browsers to render than styling that is generated using code like styled-components.