npm

Need private packages and team management tools?Check out npm Orgs. »

This package has been deprecated

Author message:

Please use @scalescss/objects-vertical-list instead

scales-patterns-vertical-list

1.1.0 • Public • Published

Vertical List Pattern for Scales

A pattern for making a list vertical after it's been made horizontal.

Requirements

Scales patterns use the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.

Installation

  • NPM: npm install --save scales-patterns-vertical-list
  • Bower: bower install --save scales-patterns-vertical-list

Usage

Vertical List should be used whenever you need to make an ordered or unordered list vertical instead of horizontal. You can extend it with --delimited to semantically mark up a character delimited list for things like tags, etc.

Default

<ul class="vertical-list">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
</ul>

Character delimited

<ul class="vertical-list vertical-list--delimited">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
</ul>

Other uses

Since there are times when you want a list to be vertical at some media queries and horizontal at others, the vertical list pattern is also able to be used as a mixin or extended as a placeholder.

@include vertical-list;

@extend %vertical-list;

Available Classes

  • .vertical-list
  • .vertical-list--delimited

Available Variables

  • $vertical-list-delimiter

The Scales Namespace Variable

All Scales patterns expose the $scales-namespace variable.

$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.

To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:

@import your-project/settings; // $scales-namespace is set in this file
@import your-project/scales; // Imports the Scales library
@import your-project/project // The rest of your project imports

Keywords

none

install

npm i scales-patterns-vertical-list

Downloadsweekly downloads

59

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability