px-spacing-design

WebJar for px-spacing-design

License	License BSD 3-Clause
GroupId	GroupId org.webjars.bowergithub.predixdesignsystem
ArtifactId	ArtifactId px-spacing-design
Last Version	Last Version 1.0.3
Release Date	Release Date Apr 23, 2018
Type	Type jar
Description	Description px-spacing-design WebJar for px-spacing-design
Project URL	Project URL http://webjars.org
Source Code Management	Source Code Management https://github.com/predixdesignsystem/px-spacing-design

Download px-spacing-design

Filename	Size
px-spacing-design-1.0.3.pom
px-spacing-design-1.0.3.jar	60 KB
px-spacing-design-1.0.3-sources.jar	22 bytes
px-spacing-design-1.0.3-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-spacing-design/ -->
<dependency>
    <groupId>org.webjars.bowergithub.predixdesignsystem</groupId>
    <artifactId>px-spacing-design</artifactId>
    <version>1.0.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-spacing-design/
implementation 'org.webjars.bowergithub.predixdesignsystem:px-spacing-design:1.0.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-spacing-design/
implementation ("org.webjars.bowergithub.predixdesignsystem:px-spacing-design:1.0.3")

Apache Buildr

'org.webjars.bowergithub.predixdesignsystem:px-spacing-design:jar:1.0.3'

Apache Ivy

<dependency org="org.webjars.bowergithub.predixdesignsystem" name="px-spacing-design" rev="1.0.3">
  <artifact name="px-spacing-design" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bowergithub.predixdesignsystem', module='px-spacing-design', version='1.0.3')
)

Scala SBT

libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-spacing-design" % "1.0.3"

Leiningen

[org.webjars.bowergithub.predixdesignsystem/px-spacing-design "1.0.3"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bowergithub.predixdesignsystem : px-defaults-design	jar	[2.0.0,3)

Project Modules

There are no modules declared in this project.

px-spacing-design

The Predix UI Spacing module is a collection of helper classes for spacings like margin and padding. This module is a fork of inuitcss' spacing module.

Dependencies

The px-spacing-design module depends on one other Px module:

px-defaults-design

Installation

Install this module and its dependencies using bower:

bower install --save px-spacing-design

Once installed, @import into your project's Sass file in its Trumps layer:

@import "px-spacing-design/_trumps.spacing.scss";

Usage

These flags are available and, if needed, should be set to true prior to importing the module:

$inuit-enable-margins
$inuit-enable-margins--tiny
$inuit-enable-margins--small
$inuit-enable-margins--large
$inuit-enable-margins--huge

$inuit-enable-margins--negative
$inuit-enable-margins--negative-tiny
$inuit-enable-margins--negative-small
$inuit-enable-margins--negative-large
$inuit-enable-margins--negative-huge

$inuit-enable-margins--none

$inuit-enable-margins--rtl

$inuit-enable-paddings
$inuit-enable-paddings--tiny
$inuit-enable-paddings--small
$inuit-enable-paddings--large
$inuit-enable-paddings--huge

$inuit-enable-paddings--none

$inuit-enable-paddings--rtl

The conventions used in the classes in the spacing module are as follows:

.u-[negative][type][direction][size] {}

E.g.:

.u--mt+ will give you a large (+) negative (-) margin (m) top (t).
.u-p-- will give you a tiny (--) padding (p).
.u-mh++ will give you a huge (++) horizontal (h) margin (m).
.u-mb0 will give you no (0) margin (m) bottom (b).
.u-pl- will give you a small (-) padding (p) left (l).

Knowing these conventions means you can compose a huge array of spacing helpers.

Options

These classes are available if the following variable flags are set to true:

$inuit-enable-margins:

u-m: add default margins to all sides
u-mt: add default margin top
u-mr: add default margin right
u-mb: add default margin bottom
u-ml: add default margin left
u-mh: add default margins right and left
u-mv: add default margins top and bottom

$inuit-enable-margins--tiny:

u-m--: add tiny margins to all sides
u-mt--: add tiny margin top
u-mr--: add tiny margin right
u-mb--: add tiny margin bottom
u-ml--: add tiny margin left
u-mh--: add tiny margins right and left
u-mv--: add tiny margins top and bottom

$inuit-enable-margins--small:

u-m-: add small margins to all sides
u-mt-: add small margin top
u-mr-: add small margin right
u-mb-: add small margin bottom
u-ml-: add small margin left
u-mh-: add small margins right and left
u-mv-: add small margins top and bottom

$inuit-enable-margins--large:

u-m+: add large margins to all sides
u-mt+: add large margin top
u-mr+: add large margin right
u-mb+: add large margin bottom
u-ml+: add large margin left
u-mh+: add large margins right and left
u-mv+: add large margins top and bottom

$inuit-enable-margins--huge:

u-m++: add huge margins to all sides
u-mt++: add huge margin top
u-mr++: add huge margin right
u-mb++: add huge margin bottom
u-ml++: add huge margin left
u-mh++: add huge margins right and left
u-mv++: add huge margins top and bottom

$inuit-enable-margins--negative:

u--m: add default negative margins to all sides
u--mt: add default negative margin top
u--mr: add default negative margin right
u--mb: add default negative margin bottom
u--ml: add default negative margin left
u--mh: add default negative margins right and left
u--mv: add default negative margins top and bottom

$inuit-enable-margins--negative-tiny:

u--m--: add tiny negative margins to all sides
u--mt--: add tiny negative margin top
u--mr--: add tiny negative margin right
u--mb--: add tiny negative margin bottom
u--ml--: add tiny negative margin left
u--mh--: add tiny negative margins right and left
u--mv--: add tiny negative margins top and bottom

$inuit-enable-margins--negative-small:

u--m-: add small negative margins to all sides
u--mt-: add small negative margin top
u--mr-: add small negative margin right
u--mb-: add small negative margin bottom
u--ml-: add small negative margin left
u--mh-: add small negative margins right and left
u--mv-: add small negative margins top and bottom

$inuit-enable-margins--negative-large:

u--m+: add large negative margins to all sides
u--mt+: add large negative margin top
u--mr+: add large negative margin right
u--mb+: add large negative margin bottom
u--ml+: add large negative margin left
u--mh+: add large negative margins right and left
u--mv+: add large negative margins top and bottom

$inuit-enable-margins--negative-huge:

u--m++: add huge negative margins to all sides
u--mt++: add huge negative margin top
u--mr++: add huge negative margin right
u--mb++: add huge negative margin bottom
u--ml++: add huge negative margin left
u--mh++: add huge negative margins right and left
u--mv++: add huge negative margins top and bottom

$inuit-enable-margins--none:

u-m0: remove margins
u-mt0: remove margin top
u-mr0: remove margin right
u-mb0: remove margin bottom
u-ml0: remove margin left
u-mh0: remove margins right and left
u-mv0: remove margins top and bottom

$inuit-enable-paddings:

u-p: add default padding to all sides
u-pt: add default padding top
u-pr: add default padding right
u-pb: add default padding bottom
u-pl: add default padding left
u-ph: add default padding right and left
u-pv: add default padding top and bottom

$inuit-enable-paddings--tiny:

u-p--: add tiny padding to all sides
u-pt--: add tiny padding top
u-pr--: add tiny padding right
u-pb--: add tiny padding bottom
u-pl--: add tiny padding left
u-ph--: add tiny padding right and left
u-pv--: add tiny padding top and bottom

$inuit-enable-paddings--small:

u-p-: add small padding to all sides
u-pt-: add small padding top
u-pr-: add small padding right
u-pb-: add small padding bottom
u-pl-: add small padding left
u-ph-: add small padding right and left
u-pv-: add small padding top and bottom

$inuit-enable-paddings--large:

u-p+: add large padding to all sides
u-pt+: add large padding top
u-pr+: add large padding right
u-pb+: add large padding bottom
u-pl+: add large padding left
u-ph+: add large padding right and left
u-pv+: add large padding top and bottom

$inuit-enable-paddings--huge:

u-p++: add huge padding to all sides
u-pt++: add huge padding top
u-pr++: add huge padding right
u-pb++: add huge padding bottom
u-pl++: add huge padding left
u-ph++: add huge padding right and left
u-pv++: add huge padding top and bottom

$inuit-enable-paddings--none:

u-p0: remove padding
u-pt0: remove padding top
u-pr0: remove padding right
u-pb0: remove padding bottom
u-pl0: remove padding left
u-ph0: remove padding right and left
u-pv0: remove padding top and bottom

View the full API here.

Predix Design System

Versions

Version
1.0.3 Apr 23, 2018
1.0.0 Apr 19, 2018

px-spacing-design

License

GroupId

ArtifactId

Last Version

Release Date

Type

Description

Project URL

Source Code Management

Download px-spacing-design

How to add to project

Dependencies

compile (1)

Project Modules

px-spacing-design

Dependencies

Installation

Usage

Options

Predix Design System

Versions