JarCasting
JarCasting JarCasting

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
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

<!-- 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>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-spacing-responsive-design/
implementation 'org.webjars.bowergithub.predixdesignsystem:px-spacing-responsive-design:1.0.0'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-spacing-responsive-design/
implementation ("org.webjars.bowergithub.predixdesignsystem:px-spacing-responsive-design:1.0.0")
'org.webjars.bowergithub.predixdesignsystem:px-spacing-responsive-design:jar:1.0.0'
<dependency org="org.webjars.bowergithub.predixdesignsystem" name="px-spacing-responsive-design" rev="1.0.0">
  <artifact name="px-spacing-responsive-design" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.predixdesignsystem', module='px-spacing-responsive-design', version='1.0.0')
)
libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-spacing-responsive-design" % "1.0.0"
[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:

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.

org.webjars.bowergithub.predixdesignsystem

Predix Design System

Versions

Version
1.0.0