@hzimm/a-grid NPM

a-grid

a-grid is a simple grid system for Vue.js.

This library adds a 12 point grid system built using flex-box. It contains five types of media breakpoints that are used for targeting specific screen sizes and orientations.

Device	Code	Types	Range
Extra small	`xs`	Small to large handsets	< 600px
Small	`sm`	small to medium tablet	600px ~ 960px
Medium	`md`	Large tablet to laptop	960px ~ 1264px
Large	`lg`	Desktop	1264px ~ 1904px
Extra large	`xl`	4k and ultra-wides	> 1904px

Usage

The library adds four basic components:

a-container provides the ability to center and horizontally pad your site's contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes.
a-row is a wrapper component for a-col. It utilizes flex properties to control the layout and flow of its inner columns.
a-col is a content holder that must be a direct child of a-row.
a-spacer allows to leave a flexible space between components.

<template>
  <a-container>
    <a-row no-gutters>
      <a-col
        a-for="n in 3"
        :key="n"
        cols="12"
        sm="4"
      >
        One of three columns
      </a-col>
    </a-row>
  </a-container>
</template>

`a-container`

Name	Type	Default	Description
`fluid`	boolean	`false`	Removes viewport maxinmun-width size breakpoints.
`id`	string	`undefined`	Sets the DOM id on the component.
`tag`	string	`div`	Specify a custom tag used on the root element.

`a-row`

Name	Type	Default	Description
`align`	string	`undefined`	Applies the align-items css property. Available options are start, center, end, baseline and stretch.
`align-content`	string	`undefined`	Applies the align-content css property. Available options are start, center, end, space-between, space-around and stretch.
`align-content-lg`	string	`undefined`	Changes the align-content property on large and greater breakpoints.
`align-content-md`	string	`undefined`	Changes the align-content property on medium and greater breakpoints.
`align-content-sm`	string	`undefined`	Changes the align-content property on small and greater breakpoints.
`align-content-xl`	string	`undefined`	Changes the align-content property on extra large and greater breakpoints.
`align-lg`	string	`undefined`	Changes the align-items property on large and greater breakpoints.
`align-md`	string	`undefined`	Changes the align-items property on medium and greater breakpoints.
`align-sm`	string	`undefined`	Changes the align-items property on small and greater breakpoints.
`align-xl`	string	`undefined`	Changes the align-items property on extra large and greater breakpoints.
`dense`	boolean	`false`	Reduces the gutter between v-cols.
`justify`	string	`undefined`	Applies the justify-content css property. Available options are start, center, end, space-between and space-around.
`justify-lg`	string	`undefined`	Changes the justify-content property on large and greater breakpoints.
`justify-md`	string	`undefined`	Changes the justify-content property on medium and greater breakpoints.
`justify-sm`	string	`undefined`	Changes the justify-content property on small and greater breakpoints.
`justify-xl`	string	`undefined`	Changes the justify-content property on extra large and greater breakpoints.
`no-gutters`	boolean	`false`	Removes the gutter between v-cols.
`tag`	string	`'div'`	Specify a custom tag used on the root element.

`a-col`

Name	Type	Default	Description
`align-self`	string	`undefined`	Applies the align-items css property. Available options are start, center, end, auto, baseline and stretch.
`cols`	boolean \| string \| number	`false`	Sets the default number of columns the component extends. Available options are 1 -> 12 and auto.
`justify-self`	string	`undefined`
`lg`	boolean \| string \| number	`false`	Changes the number of columns on large and greater breakpoints.
`md`	boolean \| string \| number	`false`	Changes the number of columns on medium and greater breakpoints.
`offset`	string \| number	`undefined`	Sets the default offset for the column.
`offset-lg`	string \| number	`undefined`	Changes the offset of the component on large and greater breakpoints.
`offset-md`	string \| number	`undefined`	Changes the offset of the component on medium and greater breakpoints.
`offset-sm`	string \| number	`undefined`	Changes the offset of the component on small and greater breakpoints.
`offset-xl`	string \| number	`undefined`	Changes the offset of the component on extra large and greater breakpoints.
`order`	string \| number	`undefined`	Sets the default order for the column.
`order-lg`	string \| number	`undefined`	Changes the order of the component on large and greater breakpoints.
`order-md`	string \| number	`undefined`	Changes the order of the component on medium and greater breakpoints.
`order-sm`	string \| number	`undefined`	Changes the order of the component on small and greater breakpoints.
`order-xl`	string \| number	`undefined`	Changes the order of the component on extra large and greater breakpoints.
`sm`	boolean \| string \| number	`false`	Changes the number of columns on small and greater breakpoints.
`tag`	string	`'div'`	Specify a custom tag used on the root element.
`xl`	boolean \| string \| number	`false`	Changes the number of columns on extra large and greater breakpoints.

`a-spacer`

No additional props.

core-js vue

@everything-registry/sub-chunk-447 @zalastax/nolb-_hz

4 years ago

4 years ago

4 years ago

4 years ago