components-pagination's Introduction

Factorial components-pagination

A simple bullet-style pagination

Read more about SUIT CSS's design principles.

Installation

$ npm install factorial-components-pagination

Features

Inherits color

Available classes

.Pagination: The core container
.Pagination-bullet: Individual items
.Pagination-bullet.is-active: Item active state
.Pagination--vertical: Modifier for vertical alignment
.Pagination--clickable: Modifier for clickable bullet points

Configuration

property	default
--Pagination-margin	.25rem
--Pagination-bullet-size	.5rem
--Pagination-border-width	.0625rem
--Pagination-border-style	solid

Usage

NB: Make sure you don't render white space between bullets as they are rendered using inline-block.

<nav class="Pagination">
  <a class="Pagination-bullet is-active">Go to slide 1</a><a
    class="Pagination-bullet">Go to slide 2</a><a
    class="Pagination-bullet">Go to slide 3</a>
</nav>

Development

Prerequisites

node.js

Installation

$ npm install

Available tasks

`npm run ...`	Description
build	Compile and bundle all CSS and JS files.
build:css	Compile and bundle all CSS files to `build/index.css`.
build:js	Compile and bundle all JS files to `build/index.js`.
build:test	Copy and preprocess idiomatic test files to `build`.
deploy	Deploy `gh-pages` branch.
start	Start a development server at `http://localhost:8080`.
test	Run all tests.
test:browser	Run all browser tests.
test:lint-css	Lint all CSS files.
test:lint-js	Lint all JS files.
watch	Watch for file changes in `lib` and trigger a new build.

Recommend Projects