JarCasting
JarCasting JarCasting

flexbox-grid

WebJar for flexbox-grid

Лицензия

Лицензия

MIT
Группа

Группа

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

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

flexbox-grid
Последняя версия

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

1.0.0
Дата

Дата
Тип

Тип

jar
Описание

Описание

flexbox-grid
WebJar for flexbox-grid
Ссылка на сайт

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

http://webjars.org

Скачать flexbox-grid

Имя Файла Размер
flexbox-grid-1.0.0.pom
flexbox-grid-1.0.0.jar 9 KB
flexbox-grid-1.0.0-sources.jar 22 bytes
flexbox-grid-1.0.0-javadoc.jar 22 bytes
Обзор

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

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

Зависимости

Библиотека не имеет зависимостей. Это самодостаточное приложение, которое не зависит ни от каких других библиотек.

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

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

Modest-Flexbox-Grid

Demo

Sass mixins for creating a simple flexbox grid with automatic breakpoints

Features

  • Automatic breakpoints for columns on mobile and tablet
  • Mobile first
  • Flexbox, prefixed.
  • Lightweight, only outputs css you define
  • Does not dictate classes. As a mixin-only library, you define the classes that will inherit grid properties.

Usage

Download or install via NPM

npm install flexbox-grid

There are four main components:

  • Container
  • Row
  • Column
  • Offsets

Container

The container just wraps the page with automatic breakpoints for larger screens.

.mycontainer
  +grid-container

(Note the "+" is shorthand for "@include" in Sass.)

Row

The row's responsibility is simply to group column components.

.myrow
  +grid-row

Column

Columns are defined as a certain number of columns out of a total possible 12.

Columns don't have to be defined as a number. If making a column 1/2, 2/3, or 1/3 wide, I recommend just passing in "half", "twothirds", "third" respectively. For example,

.mymainpane
  +grid-column('twothirds')

.mysidebar
  +grid-column('third')

Of course we could do

.mymainpane
  +grid-column(8)

.mysidebar
  +grid-column(4)

But our grid wouldn't automaticlaly reduce to halves on tablet. It would, however, go full-width on mobile.

Offsets

For offsets, just pass in a 1-12 value as the second parameter to grid-column

.mysidebar
  +grid-column(4, 8)

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

Версия
1.0.0