Liking cljdoc? Tell your friends :D
ClojureScript only.

tincture.grid

Grid component implementing flexbox grid 12 columns responsive layout.

Inspiration:

Grid component implementing flexbox grid 12 columns responsive layout.

**Inspiration**: 

* [Material-ui Grid](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Grid/Grid.js)
* [Flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css)
raw docstring

breakpointscljs

Map of breakpoints to be used in media queries

Map of breakpoints to be used in media queries
sourceraw docstring

downcljs

(down breakpoint-key)

Takes a breakpoint key (:xs :sm :md :lg :xl). Returns a media query that applies to everything below given breakpoint.

(down :md)
;;=> {:max-width {:unit :px, :magnitude 1279.95}}

To be used in garden.stylesheet/at-media:

(at-media (down :md) {:color "red"})

Takes a breakpoint key (:xs :sm :md :lg :xl). Returns a media query that applies
to everything below given breakpoint.
```clojure
(down :md)
;;=> {:max-width {:unit :px, :magnitude 1279.95}}
```
To be used in garden.stylesheet/at-media:
```clojure
(at-media (down :md) {:color "red"})
```
sourceraw docstring

Gridcljs

(Grid
  {:keys [align-content align-items class container id direction spacing item
          justify wrap zero-min-width component on-click style lg md sm xl xs]
   :or {direction :row
        zero-min-width false
        md false
        spacing 0
        align-items :stretch
        align-content :stretch
        wrap :wrap
        lg false
        sm false
        justify :flex-start
        item false
        xs false
        component :div
        on-click (fn* [] ())
        container false
        xl false}
   :as props})

Responsive 12 column grid component that adapts to screen size, using the CSS flexible box module.

  • There are two types of layouts, container and item
  • Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Items have padding to create the spacing between individual items.
  • There are five grid breakpoints: xs, sm, md, lg, and xl.

Properties

The grid component takes a map of properties, where each property can be one of a set of possible values:

  • :align-content, one of: #{:stretch :center :flex-start :flex-end :space-between :space-around}. Default: :stretch. Defines the align-content style property. It's applied for all screen sizes.

  • :align-items, one of: #{:flex-start :center :flex-end :stretch :baseline}. Default: :stretch Defines the align-items style property. It's applied for all screen sizes.

  • :container, one of: #{true false}. Default: true. If true, the component will have the flex container behavior. You should be wrapping items with a container.

  • :direction, one of: #{:row :row-reverse :column :column-reverse}. Default :row. Defines the :flex-direction style property. It is applied for all screen sizes.

  • :spacing, one of: #{0 8 16 24 32 40}. Default: 0. Defines the space between the type item component. It can only be used on a type container component.

  • :item, one of: #{true false}. Default false. If true, the component will have the flex item behavior. You should be wrapping items with a container.

  • :justify, one of: #{:flex-start :center :flex-end :space-between :space-around :space-evenly}. Default :flex-start. Defines the justify-content style property. It is applied for all screen sizes.

  • :wrap, one of: #{:nowrap :wrap :wrap-reverse}. Default :wrap. Defines the flex-wrap style property. It's applied for all screen sizes.

  • :zero-min-width, one of: #{true false}. Default false, If true, it sets min-width: 0 on the item.

  • :xs, one of: #{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}. Default false. Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.

  • :sm, one of: #{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}. Default false. Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens.

  • :md, one of: #{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}. Default false. Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens.

  • :lg, one of: #{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}. Default false. Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens.

  • :xl, one of: #{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}. Default false. Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens.

Additionally:

  • :class a string class name to be applied to the grid component
  • :id a string id to be applied to the grid component
  • :component the component to be used, default :div

Example usage:

[Grid {:container true
       :class "my-class-name"
       :spacing 16
       :justify :center}
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 1"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 2"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 3"]]]

Responsive 12 column grid component that adapts to screen size, using the [CSS
flexible box module](https://www.w3.org/TR/css-flexbox-1/).

* There are two types of layouts,  `container` and `item`
* Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
* Items have padding to create the spacing between individual items.
* There are five grid breakpoints: `xs`, `sm`, `md`, `lg`, and `xl`.

**Properties**

The grid component takes a map of properties, where each property can be one
of a `set` of possible values:

* `:align-content`, one of:
`#{:stretch :center :flex-start :flex-end :space-between :space-around}`.
Default: `:stretch`. Defines the `align-content` style property. It's applied for
all screen sizes.

* `:align-items`, one of:
`#{:flex-start :center :flex-end :stretch :baseline}`. Default: `:stretch`
Defines the `align-items` style property. It's applied for all screen sizes.

* `:container`, one of: `#{true false}`. Default: `true`. If `true`, the
component will have the flex container behavior. You should be wrapping *items*
with a *container*.

* `:direction`, one of: `#{:row :row-reverse :column :column-reverse}`.
Default `:row`. Defines the `:flex-direction` style property. It is applied
for all screen sizes.

* `:spacing`, one of: `#{0 8 16 24 32 40}`. Default: `0`. Defines the space
between the type `item` component. It can only be used on a type `container`
component.

* `:item`, one of: `#{true false}`. Default `false`. If `true`, the component
will have the flex *item* behavior. You should be wrapping *items* with a
*container*.

* `:justify`, one of:
`#{:flex-start :center :flex-end :space-between :space-around :space-evenly}`.
Default `:flex-start`. Defines the `justify-content` style property. It is
applied for all screen sizes.

* `:wrap`, one of: `#{:nowrap :wrap :wrap-reverse}`. Default `:wrap`. Defines
the `flex-wrap` style property. It's applied for all screen sizes.

* `:zero-min-width`, one of: `#{true false}`. Default `false`, If `true`, it
sets `min-width: 0` on the item.

* `:xs`, one of: `#{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}`. Default
`false`. Defines the number of grids the component is going to use. It's
applied for all the screen sizes with the lowest priority.

* `:sm`, one of: `#{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}`. Default
`false`. Defines the number of grids the component is going to use. It's
applied for the `sm` breakpoint and wider screens.

* `:md`, one of: `#{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}`. Default
`false`. Defines the number of grids the component is going to use. It's
applied for the `md` breakpoint and wider screens.

* `:lg`, one of: `#{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}`. Default
`false`. Defines the number of grids the component is going to use. It's
applied for the `lg` breakpoint and wider screens.

* `:xl`, one of: `#{:auto true false 1 2 3 4 5 6 7 8 9 10 11 12}`. Default
`false`. Defines the number of grids the component is going to use. It's
applied for the `xl` breakpoint and wider screens.

Additionally:
* `:class` a string class name to be applied to the grid component
* `:id` a string id to be applied to the grid component
* `:component` the component to be used, default `:div`

Example usage:
```clojure
[Grid {:container true
       :class "my-class-name"
       :spacing 16
       :justify :center}
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 1"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 2"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 3"]]]
```
sourceraw docstring

gridcljsdeprecated

source

unitcljs

Unit used when generating media queries, defaults to px

Unit used when generating media queries, defaults to px
sourceraw docstring

upcljs

(up breakpoint-key)

Takes a breakpoint key (:xs :sm :md :lg :xl). Returns a media query that applies to everything above given breakpoint

(up :md)
;;=> {:min-width {:unit :px, :magnitude 960}}

To be used in garden.stylesheet/at-media:

(at-media (up :md) {:color "red"})

Takes a breakpoint key (:xs :sm :md :lg :xl). Returns a media query that
applies to everything above given breakpoint
```clojure
(up :md)
;;=> {:min-width {:unit :px, :magnitude 960}}
```
To be used in garden.stylesheet/at-media:
```clojure
(at-media (up :md) {:color "red"})
```
sourceraw docstring

cljdoc is a website building & hosting documentation for Clojure/Script libraries

Keyboard shortcutsReport a problemcljdoc on GitHub
× close