Styling Your Site with CSS Colors

Flexible.gs is designed as a powerful and unopinionated layout and grid system. It focuses on structure, leaving you free to implement your own visual design and color scheme.

How to Approach Colors with Flexible.gs

Define and apply colors in your own stylesheet, just as you would in any web project. A modern best practice is to use CSS Custom Properties (variables) for your palette.

Example: Defining a Basic Theme Palette

/* your-styles.css */
:root {
  --primary-color: #0779e4;   /* Example: Flexible.gs blue */
  --secondary-color: #343a40; /* Dark grey */
  --accent-color: #ffc107;    /* Yellow */
  --light-text: #f8f9fa;      /* Light for dark backgrounds */
  --dark-text: #212529;       /* Dark for light backgrounds */

  --success-color: #28a745;
  --danger-color:  #dc3545;
  --warning-color: #ffc107;
  --info-color:    #17a2b8;
}

body {
  color: var(--dark-text);
}

.text-primary   { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent    { color: var(--accent-color); }

.bg-primary   { background-color: var(--primary-color);   color: var(--light-text); }
.bg-secondary { background-color: var(--secondary-color); color: var(--light-text); }
.bg-accent    { background-color: var(--accent-color);    color: var(--dark-text); }

.button-primary {
  background-color: var(--primary-color);
  color: var(--light-text);
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-primary:hover {
  background-color: darkblue; /* Or var(--primary-darker) */
}

Applying Your Colors

Use these variables anywhere—backgrounds, text, borders, etc. For example, styling a Flexible.gs container:

<div class="container">
  <div class="row">
    <div class="col-md-12"
         style="background-color: var(--secondary-color);
                color: var(--light-text);
                padding: 20px;">
      This is a full-width column with a custom background and text color.
    </div>
  </div>
</div>

Or better, create a dedicated class in your CSS instead of inline styles.

Why No Built-in Color Utilities?

Unlike all-in-one UI frameworks, Flexible.gs stays lean by focusing on layout. Adding color utilities can:

• Bloat: More CSS you may not need.
• Opinionated Design: Forces a look that might not suit you.
• Override Complexity: Harder to customize defaults.

With Flexible.gs you simply plug in your own design system—nothing extra to override or remove.

Tips for Choosing Colors

• Consistency: Stick to a core palette.
• Accessibility: Ensure good contrast (WCAG). Tools like WebAIM’s Contrast Checker can help.
• Meaning: Use colors to convey status (e.g. red for errors, green for success) but always include non-color indicators.

For palette inspiration, try Color Palette Generator.

By combining Flexible.gs’s structural power with your own CSS color strategy, you’ll build beautiful, responsive, and accessible sites.