Flamesui

Flamesui is a CSS-based web component library that provides ready-to-copy styles for typography, layout, buttons, and forms, built with Andela in-house projects in mind.

What is Flamesui?

Flamesui, also known as flamescss, is a collection of hand-written CSS classes created by Sullivan Wisdom. It is not a CSS framework but what the project calls a "UI store": you pick the components you need, copy their styles, and leave the rest behind. The library takes plain HTML and applies class names such as .container, .col-6, .button, and .input-field to produce responsive, styled interfaces. It runs entirely on CSS and SCSS with no JavaScript dependency, and it has been designed for the Andela in-house project context.

Key Features

• Modular components — styles are separated into typography, layout, buttons, and forms, so you can copy only the section you need instead of loading an entire framework.
• Responsive 12-column grid — .col-1 through .col-12 plus .col and .col-auto classes use flexbox, with media query breakpoints at 576, 768, 992, and 1200 pixels.
• Container system — .container centers content with a 1140px maximum width on screens at least 1200px wide, while .container-fluid spans the full viewport width.
• Button modifiers — a base .button class with .button-dark, .button-rectangle, and .button-rounded variants for different shapes and colors.
• Form building blocks — .input-field, .textarea, .label, .input-control, .form-horizontal, and .form-vertical provide structure for both inline and stacked forms.
• Typography resets — default link color is #3273dc, headings and paragraphs get margin resets, and placeholder colors for inputs and textareas are defined.
• No build process required — the source is plain CSS and SCSS, inspired by Bulma, Bootstrap, Skeleton, and Spectre, so you can link it directly or compile it yourself.

Who is it for?

• Front-end developers who want a minimal, customizable starting point for styling projects without adopting a full CSS framework like Bootstrap.
• Product teams at Andela that need consistent UI components for internal tools and can copy individual component styles into their own stylesheets.
• Students and hobbyists learning CSS by reading and modifying existing class implementations such as .button-rounded and .form-vertical.

What can you do with Flamesui?

• Rapid prototyping: build a dashboard or landing page skeleton by combining .container, .columns, .col-4, and .button classes directly in HTML.
• Form styling: create a login or signup form using .input-control, .label, and .input-field, then switch between .form-horizontal and .form-vertical layouts.
• Custom branding: rename the stylesheet to styles.css, edit SCSS variables like $color-black and $mid-black, and tweak component styles until they match your design.

How does Flamesui work?

You download or copy the flames.css file, link it in the head of your HTML document, and apply the documented class names to your markup. The page explicitly encourages you to rename the file to styles.css and modify or delete components as needed, so there is no enforced workflow or build step.

Alternatives

• Bulma, a modern CSS framework built on Flexbox.
• Bootstrap, a larger framework that includes JavaScript components.
• Skeleton, a minimal responsive boilerplate.
• Spectre, a lightweight and flexible CSS framework.

FAQ

Is Flamesui a framework?

No. The project describes itself as a "UI store," not a framework. You use its class names like .button and .container, but you are expected to customize and keep only the pieces you need.

Do I need JavaScript to use Flamesui?

No. All the provided components are CSS-only. Forms use standard HTML elements, and there are no JavaScript widgets such as modals or dropdowns in the library.

How many columns does the grid support?

The grid supports 12 columns via .col-1 through .col-12, plus .col for equal-width columns and .col-auto for auto-sized columns, all built with flexbox.

Can I use just one component without the rest?

Yes. The styles are modular, so you can copy only the button styles, form styles, or grid styles into your own stylesheet without including the entire flames.css file.