Learn Flexible.gs

Welcome to the Flexible Grid System! This guide will walk you through the fundamental concepts and how to use Flexible.gs to build responsive, mobile-first layouts with ease.

Prerequisites: A basic understanding of HTML and CSS is helpful. Familiarity with the concept of "Responsive Web Design" and "Grid Systems" will make learning Flexible.gs even smoother.

1. Getting Started

The Viewport Meta Tag

To ensure your website renders correctly and is responsive across all devices, always include the responsive viewport meta tag in the <head> section of your HTML documents. This tag controls the page's dimensions and scaling.


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- For Flexible.gs, this is usually sufficient.
       The 'minimum-scale', 'maximum-scale', and 'user-scalable=no'
       are often used but can sometimes hinder accessibility.
       Start with 'initial-scale=1.0' and adjust if specific needs arise. -->
</head>

Linking Flexible.gs

To use Flexible.gs, you'll need to link its CSS file in the <head> of your HTML page. Assuming you have a file named flexible.gs.css in a css folder:


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/flexible.gs.css">
  <title>My Awesome Page</title>
</head>

(Adjust the path if your file is located elsewhere.)

2. Core Concepts of Flexible.gs

Flexible.gs is built around a few key components that work together to create responsive layouts.

Container

The .container class is the outermost wrapper for your grid content. It typically centers your content on the page and sets a maximum width. All rows and columns should be placed within a container.


<div class="container">
  <!-- Your grid rows and columns will go here -->
</div>

Rows

Rows, usually represented by a .row class, are used to group horizontal sets of columns. They ensure that columns within them are properly aligned and spaced. Rows must be direct children of a .container or another column (for nesting).


<div class="container">
  <div class="row">
    <!-- Columns for this row -->
  </div>
  <div class="row">
    <!-- Columns for another row -->
  </div>
</div>

Columns

Columns are the heart of the grid system. Flexible.gs uses a 12-column system. This means you can divide a row into up to 12 equal parts. You define the width of a column for different screen sizes using specific classes.

Column classes typically follow a pattern like .col-{breakpoint}-{size}:

{breakpoint}: Refers to the screen size at which the column width applies (e.g., sm for small, md for medium, lg for large).
{size}: An integer from 1 to 12, indicating how many of the 12 available grid units the column should occupy.

For example, .col-md-6 would make a column take up 6 out of 12 units (half the width of the row) on medium-sized screens and larger, unless overridden by a larger breakpoint class.

3. Responsive Breakpoints

Flexible.gs uses breakpoints to determine how your layout should adapt to different screen sizes. Common breakpoints might include:

xs (Extra Small): For phones (typically <576px) – often the default, no prefix needed.
sm (Small): For landscape phones or small tablets (e.g., ≥576px)
md (Medium): For tablets or small laptops (e.g., ≥768px)
lg (Large): For desktops (e.g., ≥992px)
xl (Extra Large): For larger desktops (e.g., ≥1200px)

(These are common values; check the Flexible.gs documentation or source for its specific breakpoints.)

Flexible.gs is mobile-first. This means styles defined for smaller breakpoints (e.g., .col-sm-12) apply to larger screens as well, unless overridden by a class for a larger breakpoint (e.g., .col-md-6).

4. Basic Grid Example

Let's create a simple two-column layout. On medium screens and up, the columns will be side-by-side. On small screens, they will stack vertically (each taking up the full width).


<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      Content for Column 1 (Half width on medium, full on small)
    </div>
    <div class="col-md-6 col-sm-12">
      Content for Column 2 (Half width on medium, full on small)
    </div>
  </div>
</div>

In this example:

.col-sm-12: Makes each column take up 12/12 (full width) on small screens.
.col-md-6: Overrides the small screen behavior, making each column take up 6/12 (half width) on medium screens and larger.

5. More Complex Layouts

You can combine different column classes to create more intricate layouts that adapt precisely how you want across various devices.


<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6">Sidebar</div>
    <div class="col-lg-9 col-md-8 col-sm-6">Main Content</div>
  </div>
</div>

This layout would be:

Large screens (lg): Sidebar is 3/12 width, Main Content is 9/12 width.
Medium screens (md): Sidebar is 4/12 width, Main Content is 8/12 width.
Small screens (sm): Sidebar is 6/12 width, Main Content is 6/12 width.
Extra-small screens (default): Both would stack, each taking full width (assuming no .col-xs-* or default stacking behavior).

6. Additional Utilities (Examples)

Flexible.gs might also include utility classes for common tasks:

Responsive Images: A class like .img-fluid to make images scale with their parent container (typically max-width: 100%; height: auto;).
Visibility: Classes to show or hide elements based on breakpoints (e.g., .hidden-sm, .visible-lg-block).
Offsets: Classes to push columns to the right (e.g., .offset-md-2).
Ordering: Classes to change the visual order of columns.

Explore the Responsive Test page to see some of these concepts in action and refer to the full Flexible.gs documentation for all available classes and features.

Framework Internals & CSS Generation

Flexible.gs provides ready-to-use CSS classes. If you're interested in how these classes are generated (perhaps using tools like Sass, Less, or Stylus), or if you wish to customize the framework at a deeper level, you might look into its source code. However, for general usage, simply applying the provided CSS classes as described above is all you need.

Regarding browser compatibility for features like Flexbox or Grid (which modern CSS frameworks often use), Flexible.gs aims for broad support. Modern build tools often include autoprefixing (e.g., adding -webkit-, -ms-) to the final CSS, so you typically don't need to worry about manually adding these prefixes in your own HTML or when using the framework's classes.

Happy building with Flexible.gs!