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.