Column

Layout elements in a page based on the 12 columns system.
oo-rowoo-col

• Responsive screens
• Single column
• Fit column
• Clear column
• Gutter control
• Stretch children
• Alignment
• Self alignment
• Children alignment
• Order column
• Create variants

The default size of each column is set as auto

<!-- Auto column -->
<div oo-row>
  <div oo-col></div>
  <div oo-col></div>
</div>

Loop config includes column by default. In manual mode add the mixin Column()

# Responsive screens

The column system is using the global responsive screens by default.

breakpoints: (
  xs: 30em,
  sm: 37.500em,
  md: 60em,
  lg: 80em,
  xl: 120em,
),

screens: (sm, md, lg),

column: (
  system: 12,
  screens: this('screens'), // to modify if neeeded
  ...
),

Remember that Loop is taking the mobile first approach. Set the main sizes for root (mobile) and adjust them going towards bigger devices.

<div oo-row>
  <div oo-col="span12 span6@sm span4@md span3@lg"></div>
  <div oo-col="span12 span6@sm span8@md span9@lg"></div>
  <div oo-col="span6 span7@md auto@lg"></div>
  <div oo-col></div>
</div>

# Single column

Set a specific size for the content of the page or center it with a single html element.
(no need for an extra div to wrap the column with the oo-row attribute).

<div oo-col="span10 span9@sm span7@md self-align-center">
  <h3>Consectetur adipisicing elit.</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus error laudantium totam ab expedita necessitatibus!</p>
</div>

# Fit column

Let the column fits the size of the content.col="fit"
The config screens property is refering to the column component screens, giving you the reponsive variants fit@smfit@mdfit@lg.

// default config
column: (
  fit: (
    use: true, // included
    screens: this('column.screens'), // sm, md, lg
  ),
),

<div oo-row>
  <div oo-col="fit">fit</div>
  <div oo-col>auto</div>
  <div oo-col="span12 fit@md">fit@md</div>
</div>

Use it to create a media component

<div oo-row>
  <div oo-col="fit">
    <img src="blue-square.jpg" width="100" height="100"/>
  </div>
  <div oo-col>
    <h3 class="mt-10">My media component</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus error laudantium totam ab expedita necessitatibus!</p>
  </div>
</div>

# Clear column

Start a new row within the flow of columns. col="clear"

<div oo-row>
  <div oo-col="span2">1</div>
  <div oo-col>2</div>
  <div oo-col="clear"></div>
  <div oo-col>3</div>
  <div oo-col>4</div>
</div>

# Gutter Control

Change the gap between the columns. row="gutter-gutterName"

// default config
column: (
  gutter: (
    screens: (), // not being used
    sizes: (
      default: this('container.gutter'), // match container's value
      'less': 0, // gutter-less
    ),
  ),
),

The gutter default size does not require to be specified inside the row attribute as it will be applied automatically.

<div oo-row>
  <div oo-col></div>
  <div oo-col></div>
</div>
<hr>
<div oo-row="gutter-less">
  <div oo-col></div>
  <div oo-col></div>
</div>

# Responsive gutter - Map

Set a responsive map to gutter sizes to update gaps between screen devices.

// add 'small' & 'large' sizes
$ooLoop: ooAdd('column.gutter.sizes', (
  'tiny' : (
    rt: 0.5rem, // root value
    sm: 1rem,   // small device value
  ),
  'large': (
    rt: rem(30),
    md: rem(50),
  ),
))

<div oo-row="gutter-tiny">
  <div oo-col></div>
  <div oo-col></div>
</div>

# Responsive gutter - Screens

Treat responsive gutter from the screens property to create gutter-gutterName@screenName variants (Variants with map value will be skipped).

$ooLoop: ooSet('column.gutter', (
  screens : ('sm', 'md'), // list can be used
  sizes: (
    default: this('container.gutter'), // (rt: 1rem, sm: 1.5rem)
    'less': 0,
    'tiny': (
      rt: 0.5rem,
      sm: 1rem,
    ),
    'medium': 2rem,
    'large': (
      rt: rem(30),
      md: rem(50),
    )
  )
));

// Generating responsive variants:
// gutter-less@sm gutter-less@md gutter-medium@sm gutter-medium@md

<div oo-row="gutter-less@sm gutter-medium@md">
  <div oo-col></div>
  <div oo-col></div>
</div>

Vertical gutter

Target the vertical gap only by setting vscreens and vsizes the same way as it is done for screens and sizes

// default config
column: (
  gutter: (
    vscreens: (),
    vsizes: (),
  ),
),

# Stretch children height

Match the height of each column child elements. row="stretch"

<div oo-row="stretch">
  <div oo-col>
    <div class="child">More content<br>in<br>that column</div>
  </div>
  <div oo-col>
    <div class="child">Less content</div>
  </div>
</div>

# Alignment

Align a group of columns horizontaly, vertically or both.row="align-option valign-option"

• Valign options: top, middle, bottom
• Align options: left, center, right, evenly, between

// default config
column: (
  alignment: (
    use: true, // included
    screens: (), // none
  ),
),

Setting the config screens property will offer you the same options with the responsive variants alignment@screenName.

// set lg as available screen
$ooLoop: ooSet('column.alignment.screens', 'lg'); // list can be passed

<div oo-row="valign-middle align-center align-evenly@lg">
  <div oo-col="span5"></div>
  <div oo-col="span5"></div>
</div>

# Self alignment

Align a single column horizontaly, vertically or both.col="self-align-option self-valign-option"

• Valign options: top, middle, bottom
• Align options: left, center, right

// default config
column: (
  selfAlignment: (
    use: true, // included
    screens: (), // none
  ),
),

Setting the config screens property will offer you the same options with the responsive variants self-alignment@screenName.

<div oo-row>
  <div oo-col="span5 self-align-left"></div>
  <div oo-col="span5 self-valign-middle self-align-left"></div>
</div>

# Children content alignment

Align content of a stretched child horizontaly, vertically or both.col="child-align-option child-valign-option

• Valign options: top, middle, bottom
• Align options: left, center, right

// default config
column: (
  childAlignment: (
    use: false, // Not included
  ),
),

// enable the feature
$ooLoop: ooSet('column.childAlignment.use', true);

<div oo-row="stretch">
  <div oo-col="span6">
    <br><br><br><br>
  </div>
  <div oo-col="span6 child-valign-top child-align-left">
    <div class="child">B</div>
  </div>
</div>

# Order column

Rearrange the order of the columns for responsive purposes col="order#@screenName"(from 0 to 11).

// default config
column: (
  order: (
    use: false, // not included
    screens: this('column.screens'), // sm, md, lg
  ),
),

// enable the feature
$ooLoop: ooSet('column.order.use', true);

<div oo-row>
  <div oo-col="span6 span3@sm order2@lg">one</div>
  <div oo-col="span6 span3@sm order0@lg">two</div>
  <div oo-col="span6 span3@sm order3@sm">three</div>
  <div oo-col="span6 span3@sm order0@md">four</div>
</div>

Be specific, lighten your css

The number of created CSS rules can be quite a lot when its use on a project is minimum. Specify the needed position from the needed screens and generate only the necessary rules.

Enabled, order provides 12 modifiers per screens which create 36 CSS rules overall (considering sm, md, lg per default).

/* Specification for the above example (4 CSS rules) */
$ooLoop: ooSet('column.order.screens', (
  sm: 3,      // order3sm
  md: 0,      // order0@md
  lg: (0, 2), // order0@lg, order2@lg
));

/* Other situation */
$ooLoop: ooSet('column.order.screens', (
  sm: '✲',// All, from order0@sm to order11@sm
  md: 0, // order0@md
));

/**/
$ooLoop: ooSet('column.order.screens', 'sm'); // from order0@sm to order11@sm

# Create variants

Add your own custom rules to oo-col.

// Rules to set a width of 120px
$ooLoop: ooSet('column.variants', (
  'w120': (
    flex-grow: 0,
    min-width: 120px,
  )
));

<div oo-row>
  <div oo-col="w120"></div>
  <div oo-col></div>
</div>

Set Components << >> Use Template