px-layout-design

WebJar for px-layout-design

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

Download px-layout-design

Filename	Size
px-layout-design-1.0.2.pom
px-layout-design-1.0.2.jar	60 KB
px-layout-design-1.0.2-sources.jar	22 bytes
px-layout-design-1.0.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

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

Gradle Groovy

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

Gradle Kotlin

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

Apache Buildr

'org.webjars.bowergithub.predixdesignsystem:px-layout-design:jar:1.0.2'

Apache Ivy

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

Groovy Grape

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

Scala SBT

libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-layout-design" % "1.0.2"

Leiningen

[org.webjars.bowergithub.predixdesignsystem/px-layout-design "1.0.2"]

Dependencies

compile (2)

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

Project Modules

There are no modules declared in this project.

px-layout-design

The Predix UI Layout module defines the "grid," or more accurately the layout engine, for Predix UI. This module is a fork of the inuitcss Layout module. Main features of the grid are its inherent fluidity, and responsiveness which is based on each .layout__item shrinking to a minimum size rather then having their size based on the viewport of the browser.

Dependencies

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

• px-defaults-design

Installation

Install this module and its dependencies using bower:

bower install --save  px-layout-design

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

@import "px-layout-design/_objects.layout.scss";

Usage

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

$inuit-enable-layout--tiny
$inuit-enable-layout--small
$inuit-enable-layout--large
$inuit-enable-layout--huge
$inuit-enable-layout--flush
$inuit-enable-layout--rev
$inuit-enable-layout--middle
$inuit-enable-layout--bottom
$inuit-enable-layout--full
$inuit-enable-layout--right
$inuit-enable-layout--center
$inuit-enable-layout__item--full
$inuit-enable-layout__item--center
$inuit-enable-layout__item--bottom

The following variable is available for use in the module:

$inuit-layout-min-width

Basic usage of objects.layout requires .layout__item[s] inside of a parent container with a .layout class. Each .layout should contain either 1, 2, 3, 4, or 6 .layout__item elements. Each .layout__item will be distributed evenly along the x-axis. To override this behavior, then assign a width to a .layout__item with a width class i.e. .u-1/3 or .u-1/4.

In this example, each .layout__item would take up a third of the width of the .layout parent:

<div class=layout>
  <div class=layout__item>
  </div>
  <div class=layout__item>
  </div>
  <div class=layout__item>
  </div>
</div>

In this example, the initial .layout__item will take up one half of the width the .layout parent; the remaining .layout__item's will take up a quarter of the width of the parent .layout.

<div class=layout>
  <div class="layout__item u-1/2">
  </div>
  <div class=layout__item>
  </div>
  <div class=layout__item>
  </div>
</div>

View the full API here.

Predix Design System

Versions

Version
1.0.2 Apr 19, 2018
1.0.0 Apr 19, 2018