px-spacing-responsive-design

WebJar for px-spacing-responsive-design

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

Download px-spacing-responsive-design

Filename	Size
px-spacing-responsive-design-1.0.0.pom
px-spacing-responsive-design-1.0.0.jar	62 KB
px-spacing-responsive-design-1.0.0-sources.jar	22 bytes
px-spacing-responsive-design-1.0.0-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

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

Gradle Groovy

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

Gradle Kotlin

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

Apache Buildr

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

Apache Ivy

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

Groovy Grape

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

Scala SBT

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

Leiningen

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

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bowergithub.predixdesignsystem : px-spacing-design	jar	[1.0.0,2)
org.webjars.bowergithub.predixdesignsystem : px-helpers-design	jar	[1.0.0,2)

Project Modules

There are no modules declared in this project.

px-spacing-responsive-design

The Predix UI Spacing Responsive module is an extension of the default px-spacing-design module and provides breakpoint-based classes for nudging margins and paddings around responsively. This module is a fork of inuitcss' spacing-responsive module.

The px-spacing-responsive-design module loops through the breakpoints defined in inuitcss' settings.responsive module to generate prefixed breakpoint-based classes. If you are using inuitcss’ default breakpoints, you will be given classes like u-lap-and-up-m0, u-desk-pt++, etc.

Based on the breakpoints defined in the $breakpoints Sass list, the margins or padding determined by classes in your markup will be triggered.

For example, a $breakpoint named desk which defines a media-query for viewports wider than 1024 pixels, the class .u-desk-m0 would zero out all margins with a viewport above 1024 pixels. At narrower viewports, .u-desk-m0 has no effect.

Dependencies

The px-spacing-responsive-design module depends on one other Px module and two other inuitcss modules:

Upstream dependencies

The px-spacing-responsive-design module is also an upstream dependency in this meta kit:

px-starter-kit-design

Installation

Install this module and its dependencies using bower:

bower install --save px-spacing-responsive-design

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

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

Usage

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

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

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

$inuit-enable-responsive-margins--none

$inuit-enable-responsive-margins--rtl

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

$inuit-enable-responsive-paddings--none

$inuit-enable-responsive-paddings--rtl

The conventions used in the classes in the Spacing Responsive module are as follows:

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

Options

For each "breakpoint" set in inuitcss' settings.responsive $breakpoint Sass list, the classes below will be appended i.e. u-[breakpoint-name]-classname. Margin dimensions are set in Px's Spacing module.

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

$inuit-enable-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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-responsive-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.0 Apr 19, 2018

px-spacing-responsive-design

License

GroupId

ArtifactId

Last Version

Release Date

Type

Description

Project URL

Source Code Management

Download px-spacing-responsive-design

How to add to project

Dependencies

compile (2)

Project Modules

px-spacing-responsive-design

Dependencies

Upstream dependencies

Installation

Usage

Options

Predix Design System

Versions