px-forms-design

WebJar for px-forms-design

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

Download px-forms-design

Filename	Size
px-forms-design-2.0.0.pom
px-forms-design-2.0.0.jar	62 KB
px-forms-design-2.0.0-sources.jar	22 bytes
px-forms-design-2.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

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

Gradle Groovy

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

Gradle Kotlin

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

Apache Buildr

'org.webjars.bowergithub.predixdesignsystem:px-forms-design:jar:2.0.0'

Apache Ivy

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

Groovy Grape

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

Scala SBT

libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-forms-design" % "2.0.0"

Leiningen

[org.webjars.bowergithub.predixdesignsystem/px-forms-design "2.0.0"]

Dependencies

compile (2)

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

Project Modules

There are no modules declared in this project.

px-forms-design

The Predix UI Forms module defines styles for form elements such as <input>, <label>, <select> and so on. It is based on Formalize (http://formalize.me) by Nathan Smith (http://sonspring.com/).

Dependencies

The px-forms-design module depends on two other Px modules:

• px-colors-design
• px-defaults-design

Installation

Install this module and its dependencies using bower:

bower install --save px-forms-design

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

@import "px-forms-design/_base.forms.scss";

Usage

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

$inuit-enable-inline-fields
$inuit-enable-text-input--bare
$inuit-enable-validation-states
$inuit-enable-input--tiny
$inuit-enable-input--small
$inuit-enable-input--regular
$inuit-enable-input--large
$inuit-enable-input--huge

The following variables are available for use in the module:

$inuit-forms-color
$inuit-forms-color--placeholder
$inuit-forms-background
$inuit-forms-border--inner
$inuit-forms-border--outer
$inuit-forms-border--inner--focused
$inuit-forms-border--outer--focused
$inuit-forms-color--disabled
$inuit-forms-background--disabled
$inuit-forms-border--disabled
$inuit-forms-color--readonly
$inuit-forms-background--readonly
$inuit-forms-border--readonly
$inuit-forms-color--help
$inuit-forms-select-background
$inuit-forms-select-color
$inuit-forms-select-shadow--dark
$inuit-forms-select-shadow--light
$inuit-forms-select-color--disabled
$inuit-forms-select-background--disabled
$inuit-forms-select-background--hover
$inuit-forms-select-border--hover
$inuit-forms-select-background--pressed
$inuit-forms-select-border--pressed
$inuit-forms-select-multiple-background
$inuit-forms-validation-warning
$inuit-forms-validation-error
$inuit-forms-validation-success

Basic usage of forms.base requires <input> fields with the following type attributes to carry the text-input class:

[type=email]
[type=number]
[type=password]
[type=search]
[type=tel]
[type=text]
[type=url]

Options

• .text-input--bare: display form fields without margin, padding, or borders.
• .form-field--inline: display form fields alongside each other, not stacked.
• .input--[tiny|small|regular|large|huge]: define fixed widths for form fields.

View the full API here.

Predix Design System

Versions

Version
2.0.0 Apr 23, 2018