px-flag-design

WebJar for px-flag-design

Лицензия

Лицензия

BSD 3-Clause
Группа

Группа

org.webjars.bowergithub.predixdesignsystem
Идентификатор

Идентификатор

px-flag-design
Последняя версия

Последняя версия

1.0.0
Дата

Дата

Тип

Тип

jar
Описание

Описание

px-flag-design
WebJar for px-flag-design
Ссылка на сайт

Ссылка на сайт

http://webjars.org
Система контроля версий

Система контроля версий

https://github.com/predixdesignsystem/px-flag-design

Скачать px-flag-design

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-flag-design/ -->
<dependency>
    <groupId>org.webjars.bowergithub.predixdesignsystem</groupId>
    <artifactId>px-flag-design</artifactId>
    <version>1.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-flag-design/
implementation 'org.webjars.bowergithub.predixdesignsystem:px-flag-design:1.0.0'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-flag-design/
implementation ("org.webjars.bowergithub.predixdesignsystem:px-flag-design:1.0.0")
'org.webjars.bowergithub.predixdesignsystem:px-flag-design:jar:1.0.0'
<dependency org="org.webjars.bowergithub.predixdesignsystem" name="px-flag-design" rev="1.0.0">
  <artifact name="px-flag-design" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.predixdesignsystem', module='px-flag-design', version='1.0.0')
)
libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-flag-design" % "1.0.0"
[org.webjars.bowergithub.predixdesignsystem/px-flag-design "1.0.0"]

Зависимости

compile (1)

Идентификатор библиотеки Тип Версия
org.webjars.bowergithub.predixdesignsystem : px-defaults-design jar [2.0.0,3)

Модули Проекта

Данный проект не имеет модулей.

px-flag-design

The Predix UI Flag module is similar in appearance to the classic OOCSS' media object, however it utilises display: table[-cell]; to give us control over the vertical alignments of the text and image (http://csswizardry.com/2013/05/the-flag-object). This module is a fork of the inuitcss Flag module.

Dependencies

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

Installation

Install this module and its dependency using bower:

bower install --save px-flag-design

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

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

Usage

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

$inuit-enable-flag--tiny
$inuit-enable-flag--small
$inuit-enable-flag--large
$inuit-enable-flag--huge
$inuit-enable-flag--rev
$inuit-enable-flag--flush
$inuit-enable-flag--top
$inuit-enable-flag--bottom
$inuit-enable-flag--responsive

The following variables are available for use in the module:

$inuit-flag-collapse-at

Basic usage of the Flag module uses the required classes:

<figure class=flag>
    <img src=... alt=... class=flag__img>
    <figcaption class=flag__body>
        ...
    </figcaption>
</figure>

The only valid children of the .flag node are .flag__img and.flag__body.

Options

Other, optional classes can supplement the required base classes:

  • flag--flush: remove the space between the image- and text-content.
  • flag--[tiny|small|large|huge]: alter the spacing between the image and text-content.
  • flag--top: Vertically top aligned flag objects.
  • flag--bottom: Vertically bottom aligned flag objects.
  • flag--rev: reverse the horizontal rendered order of the image and text-content.
  • flag--responsive: a very basic responsive implementation of the flag object. Pragmatic; far from perfect.

For example:

<figure class="flag flag--flush flag--rev">
    <img src=... alt=... class=flag__img>
    <figcaption class=flag__body>
        ...
    </figcaption>
</figure>

View the full API here.

org.webjars.bowergithub.predixdesignsystem

Predix Design System

Версии библиотеки

Версия
1.0.0