Most of the classes available in Muscles.css have responsive support. Simply use one of the responsive suffixes as needed: @sm, @md, or @lg.

E.g. .flex--wrap@md will turn on wrap at the medium break point only

Breakpoints currently supported:

• @sm 320px - 640px
• @md 640px - 960px
• @lg 960px and up

To start using Muscles.css you need to use the .flex class on the container element that will be flexing.

<div class="flex">
  <div class="u-fb1x">1x</div>
  <div class="u-fb1x">1x</div>
</div>

flex-wrap modifiers set how items that exceed the demensions of their axis are wrapped (or not wrapped).

<div class="flex flex--wrap">
  <div class="u-fb1x">1x</div>
  <div class="u-fb2x">2x</div>
  <div class="u-fb3x">3x</div>
  <div class="u-fb4x">4x</div>
  <div class="u-fb5x">5x</div>
  <div class="u-fb6x">6x</div>
</div>

flex-direction modifiers can be used to change the direction of flex items within the .flex container.

<div class="flex flex--row-reverse">
  <div>1st item</div>
  <div>2nd item</div>
</div>

justify-content modifiers set where remaining space should be distributed among flex items in a .flex container.

<div class="flex flex--around">
  <div class="u-fb1x">1x</div>
  <div class="u-fb1x">1x</div>
</div>

align-items modifiers are used on a .flex element to align flex items along the cross axis

<div class="flex flex--ai-center">
  <div class="u-fb1x">1x with a bit of content for added height</div>
  <div class="u-fb2x">2x</div>
</div>

align-content modifiers are used on a .flex element and typically only makes sense to use in a wrapped container (.flex--wrap)

<div class="flex flex--wrap flex--ac-end">
  <div class="u-fb1x">1x</div>
  <div class="u-fb2x">2x</div>
  <div class="u-fb12x">12x</div>
</div>

By default, flex items within a .flex container do not have any margin between them. You can add a gutter by adding the .flex--gutter to the container element. This will add a margin (set to the $muscles_base_gutter variable that can be overridden with postcss) to the flex items.

Note: .flex--gutter currently only supports horizontal gutters, not vertical gutters. This is because of the goal to minimize the need for markup that is purely for layout.

<div class="flex flex--gutter">
  <div class="u-fg1">Grow 1</div>
  <div class="u-fg1">Grow 1</div>
  <div class="u-fg1">Grow 1</div>
</div>

.flex--gutter also works well with wrapped items (.flex--wrap)

<div class="flex flex--wrap flex--gutter">
  <div class="u-fb4x u-fg1">Grow 1</div>
  <div class="u-fb4x u-fg1">Grow 1</div>
  <div class="u-fb4x u-fg1">Grow 1</div>
  <div class="u-fb4x u-fg1">Grow 1</div>
</div>

If you need to add vertical gutter remember these things:

• margins to not collapse in flex containers
• .flex is difficult to style

Responsive: Gutter does not currently support responsive suffixes.

Use grow utility classes to change the grow of a flex item from 0 to 8. E.g. .u-fg5 sets flex-grow: 5;

<div class="flex">
  <div class="u-fg1 u-fb1x">Grow 1</div>
  <div class="u-fg2 u-fb1x">Grow 2</div>
  <div class="u-fg4 u-fb1x">Grow 4</div>
  <div class="u-fg8 u-fb1x">Grow 8</div>
</div>

Flex items have a default of shrink: 0, you can change that with the shrink utility classes. You can set shrink from 0 to 8.

<div class="flex">
  <div class="u-fs1 u-fb3x">Shrink 1</div>
  <div class="u-fs2 u-fb3x">Shrink 2</div>
  <div class="u-fs4 u-fb3x">Shrink 4</div>
  <div class="u-fs8 u-fb3x">Shrink 8</div>
</div>

Use order utility classes to change the order of flex items from -10 to -1 and 0 to 10.

<div class="flex">
  <div class="u-fb1x u-o1">dom:1, o1</div>
  <div class="u-fb1x u-o5">dom:2, o5</div>
  <div class="u-fb1x u-o1">dom:3, o1</div>
  <div class="u-fb1x u-o10-">dom:4, o10-</div>
  <div class="u-fb1x u-o5-">dom:5, o5-</div>
</div>

Sometimes, you want to use actual lengths for your items (e.g. when styling layout for UI components). Muscles.css provides basis modifiers that specify a specific length basis as a multiple of a base unit. This provides consistency in your items as needed across any container size.

You can use .u-fb3x to set the flex-basis to 3*96px = 288px (the default base unit is 96px). Muscles provides multiples from 1x (96px) to 12x (1152px).

<div class="flex">
  <div class="u-fb1x">.u-fb1x</div>
  <div class="u-fb2x">.u-fb2x</div>
  <div class="u-fb3x">.u-fb3x</div>
  <div class="u-fb4x">.u-fb4x</div>
</div>

Just as with fractional widths, flex items default to shrink: 1 so they will always shrink if there is not enough room to contain them.

<div class="flex">
  <div class="u-fb8x">.u-fb8x</div>
  <div class="u-fb4x">.u-fb4x</div>
  <div class="u-fb6x">.u-fb6x</div>
</div>

Setting .flex--wrap will cause the items to wrap if there is not enough room. Similar to fractional basis, it gives more consistency in flex item widths.

<div class="flex flex--wrap">
  <div class="u-fb4x">.u-fb4x</div>
  <div class="u-fb5x">.u-fb5x</div>
  <div class="u-fb2x">.u-fb2x</div>
  <div class="u-fb3x">.u-fb3x</div>
</div>

Lengths vs Fractions

Lengths are useful when you have different sized containers and need to ensure consistent widths for your items. Using fractions or percentages would makes this impossible (or at least difficult). This would also apply when you use nested containers.

<div class="flex">
  <div class="u-fb2/12">2/12</div>
  <div class="u-fb10/12">10/12</div>
</div>
<div class="flex container--80">
  <div class="u-fb2/12">2/12</div>
  <div class="u-fb10/12">10/12</div>
</div>

In this example, in both cases each cell has the same fractional width but they display at very different lengths due to the difference in the container sizes. If you wanted those 2/12 cells to be the same computed length, you can't use fractional or percentage widths.

Instead, we can use length basis and set our element to not shrink.

<div class="flex">
  <div class="u-fb2x u-fs0">2x</div>
  <div class="u-fb10x">10x</div>
</div>
<div class="flex container--80">
  <div class="u-fb2x u-fs0">2x</div>
  <div class="u-fb10x">10x</div>
</div>

This forces the 2x element to always be 2x in width regardless of the container width. You can use this do create very responsive UI without breakpoints.

Use fraction basis utilities to set a proportional basis. This is most like other grid based layout systems you might be accustomed to (e.g. bootstrap grid). It allows you to set the basis of items as a fraction of 12 (and a few other denomitators).

Muscles.css provides the following fractions:

• 12ths (e.g. .u-fb1/12)
• 6ths (e.g. .u-fb1/6)
• 4ths (e.g. .u-fb1/4)
• 3rds (e.g. .u-fb1/3)
• 2nds (e.g. .u-fb1/2)
• and a whole (.u-fb1/1)

<div class="flex">
  <div class="u-fb1/12">.u-fb1/12</div>
  <div class="u-fb2/12">.u-fb2/12</div>
  <div class="u-fb3/12">.u-fb3/12</div>
  <div class="u-fb4/12">.u-fb4/12</div>
</div>

Notice that the items always maintain their fractional widths relative to the container. This is useful when you want to maintain a consistent ratio in your layout.

You can use any combination of fractions as long as they sum to < 1. E.g. 1/2 + 1/6 + 1/3 = 1

<div class="flex">
  <div class="u-fb1/2">.u-fb1/2</div>
  <div class="u-fb1/6">.u-fb1/6</div>
  <div class="u-fb1/3">.u-fb1/3</div>
</div>

If you have items that sum to more than 1, you end up with shrinking items. This is because flex items default to shrink: 1. This prevents overflow, but does not ensure consistency.

<div class="flex">
  <div class="u-fb2/3">.u-fb2/3</div>
  <div class="u-fb1/3">.u-fb1/3</div>
  <div class="u-fb1/3">.u-fb1/3</div>
</div>

Using .flex--wrap on the container allows your items to wrap to the next line if there is not enough room on the current line. This allows for more responsive layouts.

<div class="flex flex--wrap">
  <div class="u-fb2/3">.u-fb2/3</div>
  <div class="u-fb1/3">.u-fb1/3</div>
  <div class="u-fb1/3">.u-fb1/3</div>
</div>

This will maintain relative fractional widths and remain consistent, while eliminating the need to define separate rows.

In addition to length and fractions Muscles.css also supports setting width and height properties as multiples

<div class="flex flex--wrap">
  <div class="u-w1x">1x</div>
  <div class="u-w2x">2x</div>
  <div class="u-w3x">3x</div>
  <div class="u-w4x">4x</div>
  <div class="u-w5x">5x</div>
  <div class="u-w6x">6x</div>
  <div class="u-w7x">7x</div>
  <div class="u-w8x">8x</div>
  <div class="u-w9x">9x</div>
  <div class="u-w10x">10x</div>
  <div class="u-w11x">11x</div>
  <div class="u-w12x">12x</div>
</div>

<div class="flex flex--wrap flex--column">
  <div class="u-h1x u-w2x">1x</div>
  <div class="u-h2x u-w2x">2x</div>
  <div class="u-h3x u-w2x">3x</div>
</div>

Muscles.css also provides min/max width/height attributes which is very useful for UIs that should grow or shrink from their defaults but never more or less than certain extremes.

<div class="flex">
  <div class="u-min-w4x u-max-w5x u-fg1">min:4x max:5x</div>
  <div class="u-max-w1x u-fg1">max:1x</div>
  <div class="u-min-w3x u-fg1">min:3x</div>
</div>

align-self modifiers allow items to override any align-items modifer set on the .flex container

<div class="flex">
  <div class="u-fb1x u-as-start huge">start. also content to add height</div>
  <div class="u-fb1x u-as-end">end</div>
  <div class="u-fb1x u-as-center">center</div>
  <div class="u-fb1x u-as-baseline">baseline</div>
  <div class="u-fb1x u-as-stretch">stretch</div>
</div>