An unopinionated, configurable implementation of the card UI pattern.

Installation

Using npm:

npm i -S jigsass-objects-card

Usage

First, you need to import JigSass Card:

@import 'path/to/jigsass-objects-card/scss/index';

And optionally reconfigure the defaults to your liking.

Like all other JigSass modules, JigSass Card does not automatically generate any CSS when imported. In order to use its classes, you would have to first explicitly indicate your intention to use them by enabling their generation in the associated configurations map, Leaving us only with CSS we need:

All JigSass Card classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based on enabled selectors in the configuration map, responsive modifiers are generated according to the following logic:

.o-card[--modifier][-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

$jigsass-card-conf: (
  no-breakpoint: (
    raised: true,
  ),
  until-medium: (
    raised: true,
  ),
  from-large-when-landscape: (
    raised: true,
  ),
)

will generate the following classes:

• .o-card--raised, which is not limited to any media-query.
• .o-card--raised--until-medium, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.
• .o-card--raised--from-large-when-landscape, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

License: MIT

By default, JigSass Card does not generate any CSS output when imported into a stylesheet. CSS output must be enabled on a per-selector basis, inside the dedicated configuration maps:

Card and modifier classes

$jigsass-card-config

Type: Map

Configuration map for enabling generation of card and card modifier classes.

Default: ()

Example:

$jigsass-card-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-card`
                        // class outside of any media query.
    foo: true,          // Enables generation of the `.o-card--foo`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-card--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    foo: true,          // Enables generation of the `.o-card--foo--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-card--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  foo: true,          // Enables generation of the `.o-card--foo--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-card--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    foo: true,          // Enables generation of the `.o-card--foo--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

Card Items

$jigsass-card-items-config: (item-name: ());

Type: Map

Configuration map for enabling generation of card item classes.

Default: ()

Example:

$jigsass-card-items-conf: (
  section: (
    no-breakpoint: (
      // Enables generation of the `.o-card__section`
      // class outside of any media query.
      no-modifier: true,

      // Enables generation of the `.o-card__section--foo`
      // modifier class outside of any media query.
      foo: true,
    ),
    from-<bp-name>: (
      // Enables generation of the `.o-card__section--from-<bp-name>`
      // class inside a min-width media query
      // defined ins `$jigsass-breakpoints.length`.
      no-modifier: true,

      // Enables generation of the `.o-card__section--foo--from-<bp-name>`
      // class inside a min-width media query
      // defined ins `$jigsass-breakpoints.length`.
      foo: true,
    ),
    until-<bp-name>: (
      // Enables generation of the `.o-card__section--until-<bp-name>`
      // class inside a max-width media query
      // defined ins `$jigsass-breakpoints.length`.
      no-modifier: true,

      // Enables generation of the `.o-card__section--foo--until-<bp-name>`
      // class inside a max-width media query
      // defined ins `$jigsass-breakpoints.length`.
      foo: true,
    ),
    when-<bp-name>: (
      // Enables generation of the `.o-card__section--when-<bp-name>`
      // class inside a misc media query
      // defined ins `$jigsass-breakpoints.features`.
      no-modifier: true,

      // Enables generation of the `.o-card__section--foo--when-<bp-name>`
      // class inside a misc media query
      // defined ins `$jigsass-breakpoints.features`.
      foo: true,
    ),
    from-<bp-name>-until-<bp-name>: (...);
    from-<bp-name>-when-<bp-name>: (...);
    until-<bp-name>-when-<bp-name>: (...);
    from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
  ),
);

Context classes

$jigsass-card-context-config: (item-name: ());

Type: Map

Configuration map for enabling generation of card context classes.

Default: ()

Example:

$jigsass-card-context-conf: (
  has-card: (
    no-breakpoint: (
      // Enables generation of the `.o-has-card`
      // class outside of any media query.
      no-modifier: true,

      // Enables generation of the `.o-has-card--foo`
      // modifier class outside of any media query.
      foo: true,
    ),
    from-<bp-name>: (
      // Enables generation of the `.o-has-card--from-<bp-name>`
      // class inside a min-width media query
      // defined ins `$jigsass-breakpoints.length`.
      no-modifier: true,

      // Enables generation of the `.o-has-card--foo--from-<bp-name>`
      // class inside a min-width media query
      // defined ins `$jigsass-breakpoints.length`.
      foo: true,
    ),
    until-<bp-name>: (
      // Enables generation of the `.o-has-card--until-<bp-name>`
      // class inside a max-width media query
      // defined ins `$jigsass-breakpoints.length`.
      no-modifier: true,

      // Enables generation of the `.o-has-card--foo--until-<bp-name>`
      // class inside a max-width media query
      // defined ins `$jigsass-breakpoints.length`.
      foo: true,
    ),
    when-<bp-name>: (
      // Enables generation of the `.o-has-card--when-<bp-name>`
      // class inside a misc media query
      // defined ins `$jigsass-breakpoints.features`.
      no-modifier: true,

      // Enables generation of the `.o-has-card--foo--when-<bp-name>`
      // class inside a misc media query
      // defined ins `$jigsass-breakpoints.features`.
      foo: true,
    ),
    from-<bp-name>-until-<bp-name>: (...);
    from-<bp-name>-when-<bp-name>: (...);
    until-<bp-name>-when-<bp-name>: (...);
    from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
  ),
);

Because of the many style variations cards could have throughout different designs and implementations, JigSass Card allows for complete modification through configuration variables.

Container Background

$jigsass-has-card-bgc

Type: Color

The background color of elements containing cards.

Used for setting the background color of the .o-has-card contextual modifier.

Default: #ebebeb

Card Style

$jigsass-card-defaults

Type: Map

CSS declarations to apply to cards.

Since cards are such a prevalent UI pattern, yet with so many variations, subtle or otherwise, JigSass Cards come with defaults that are configurable to the last value and declaration. Don't like our defaults? Make your own.

Default: (background-color: #f0f0f0)

Card Modifiers

$jigsass-card-modifiers

Type: Map

CSS declarations for card modifiers, with each modifier being a nested map at the first level.

Default:

(
  raised: (
    box-shadow: 0 4px 5px -2px rgba(#333, .5),
    position: relative,
    transition: .15s transform linear,

    '&:after': (
      bottom: 0,
      box-shadow: 0 8px 6px -3px rgba(#333, .3),
      content: '',
      left: 0,
      opacity: 0,
      position: absolute,
      right: 0,
      top: 0,
      transition: .15s opacity linear,
      z-index: -1,
    ),

    '&:hover': (
      transform: translatey(-4px) scale(1.01),

      '&:after': (
        opacity: 1,
      ),
    ),
  )
)

Section Border

$jigsass-card-section-border

Type: List

Border style of a card section

A list in the format of length style color

Default: 1px solid #ccc !default;

An individual piece of distinguished UI

Cards can be used to set apart pieces of content in an effective yet geeric manner. It can contain an Image, headline, texts and interactive elements.

  <article class='o-card u-mb--4 u-pb--4 u-as--4'>
    <figure>
      <img src='https://unsplash.it/600/300?random' />
    </figure>

    <header class='u-ph--4'>
      <h3>This is a card</h3>
      <p><strong>A piece of distinguished UI</strong></p>
    </header>

    <p class='u-ph--4'>
      Cards can be used to set apart pieces of content in an effective
      yet geeric manner. It can contain an Image, headline, texts and
      interactive elements.
    </p>
  </article>

  <article class='[ o-card o-card--raised ]  u-mb--4 u-pb--4 u-as--4'>
    <figure>
      <img src='https://unsplash.it/600/300?random' />
    </figure>

    <header class='u-ph--4'>
      <h3>This is a card with a `raised` modifier</h3>
      <p><strong>A piece of distinguished UI</strong></p>
    </header>

    <p class='u-ph--4'>
      Cards can be used to set apart pieces of contenet in an effective
      yet geeric manner. It can contain an Image, headline, texts and
      interactive elements.
    </p>
  </article>

A distinct section within a card

  <article class='o-card u-mb--4 u-pb--4 u-as--4'>
    <figure><img src='https://unsplash.it/600/200?random' /></figure>

    <h3 class='u-ph--4'>This is a card with with sub sections</h3>

    <ul class='o-card__section u-as--2'>
      <li class='u-ph--4 u-pt--2 o-card__section'>
        <p>Cards can also have sub sections</p>
      </li>
      <li class='u-ph--4 u-pt--2 o-card__section'>
        <p>Which could be useful, for instance, for crealing lists</p>
      </li>
      <li class='u-ph--4 u-pt--2 o-card__section'>
        <p>Of related, scanable content</p>
      </li>
    </ul>
  </article

Sets the background color of elements containing cards to the one defined in $jigsass-has-card-bgc.

Automatically generated when generating any card related class (o-card, a modifier or an item).