Vue iotaCSS

Stateless Vue Components for iotaCSS.

Features

• Uses iotaCSS styles
• You can use iotaPlate with it
• Works on any application architecture
• Great for prototyping
• Production ready
• Tested

Getting Started

Step 1: Install vue-iotacss package

$ npm install --save vue-iotacss

Step 2: Install iotaCSS

For this example, we will use iotaPlate, iotaCSS's official CLI.

$ npm install -g iotaplate

Navigate to the directory you want to have your scss. For this example is scss:

$ cd scss
$ iotaplate

Step 3: Import and use Vue iotaCSS

// entry.js

import Vue from 'vue'
import App from './App.vue'

// Import Container, H1 and P components
import { Container, H1, P } from 'vue-iotacss'

// Register the components
Vue.component('Container', Container)
Vue.component('H1', H1)
Vue.component('P', P)

new Vue({
  el: '#app',
  render: h => h(App)
})


// App.vue

<template>
  <Container size="small">
    <H1 size="large">Getting Started with Vue iotaCSS</H1>
    <P>This is an example on how to get started with Vue iotaCSS</P>
  </Container>
</template>

<style lang="scss">
  import './scss/main.scss'
</style>

Also, make sure you check the demo here.

Documentation

Base

The Base is responsible for translating u prefixed properties to iotaCSS utility classes, for example uText="center" will translate to class="u-text-center". It's extended by all the Vue Components and you should use it in all your components if you want them to support Vue iotaCSS utility properties.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | tagName | String | div | TagName to be used |

Example

<Base tagName="p" uText="center">
  Some paragraph
</Base>

Container

The Container is responsible for creating smart, flexible and responsive containers.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | gutter | String | '' | Container extra gutter name | | size | String | '' | Container extra size name | | className | String | '' | Allows to specify a CSS class |

Example

<Container size="large">
  Some content here
</Container>

Grid

The Grid is responsible for building a smart, flexible and responsive grid.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | align | oneOf(['right', 'center', 'top', 'middle', 'bottom', 'around', 'between']) | 'top' | Align grid vertically and horizontally | | gutter | String | '' | Grid extra gutter name | | rev | Boolean | false | Reversed grid | | equalHeight | Boolean | false | Grid with equal height | | className | String | '' | Allows to specify a CSS class |

Example

<Grid gutter="large">
  <GridColumn uSize="1/2">
    Half width column
  </GridColumn>
  <GridColumn uSize="1/2">
    Another half width column
  </GridColumn>
</Grid>

List

The List is responsible for creating inline, block and span lists. You can use it to build the structure of UI components like navigations or vertical lists.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | type | oneOf(['inline', 'block', 'span']) | 'inline' | Type of list | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align list vertically | | gutter | String | '' | List extra gutter name | | className | String | '' | Allows to specify a CSS class |

Example

<List type="block">
  <ListItem>
    List Item 1
  </ListItem>
  <ListItem>
    List Item 1
  </ListItem>
</List>

Media

Media is responsible for a common design pattern where there is a fixed and a fluid width column next to each other. It's used to build the structure of sidebars, comments, avatar and other similar UI components.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align media vertically | | gutter | String | '' | Media extra gutter name | | rev | Boolean | false | Reversed media | | res | Boolean | false | Responsive media | | className | String | '' | Allows to specify a CSS class |

Example

<Media align="middle">
  <MediaFixed>
    Fixed part of Media
  </MediaFixed>
  <MediaFluid>
    Fluid part of Media
  </MediaFluid>
</Media>

Type

The Type is responsible for making responsive typography a piece of cake.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | size | String | '' | Typography size | | tagName | String | 'p' | HTML tag to use | | className | String | '' | Allows to specify a CSS class |

<Type tagName="span" size="large">Large Text</Type>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>Paragraph</P>

Note: H1 - H6 and P components do not provide any size. They only use the related HTML tag.

Utilities

Vue iotaCSS uses a smart way to parse properties to utility classes:

<Type uText="center" uMb>Centered text with default margin bottom</Type>

<p class="o-text-center u-mb">Centered text with default margin bottom</p>

Available Properties

The available properties are the same as the utilities that come with iotaCSS:

• uAlign
• uBgcolor
• uCf
• uColor
• uDisplay
• uFloat
• uM
• uMt
• uMr
• uMb
• uMl
• uMv
• uMh
• uOpacity
• uP
• uPt
• uPr
• uPb
• uPl
• uPv
• uPh
• uPosition
• uPull
• uPush
• uSize
• uText
• uTransform
• uWeight

Margin / Padding

One important note for Margin and Padding utility properties. As decribed in the docs for Margin and Padding, you will need to add an extra '-' in the SCSS configuration for the extra margin/padding sizes like the following:

$iota-utils-margin-extra: (
  -small: 10px
);

so, it will generate a class with like '.u-mb-small' instead of '.u-mbsmall'. This is required for Vue iotaCSS because it always uses a '-' to separate the margin/padding direction from the extra margin/padding size.

Properties

| Name | Type | Description | | --- | --- | --- | | uAlign | String | Vertical Align | | uBgcolor | String | Background Color | | uCf | Boolean | Clearfix | | uColor | String | Color | | uDisplay | String | Display | | uFloat | String | Float | | uM | oneOfType([PropTypes.bool, PropTypes.string]) | Margin | | uMt | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Top | | uMr | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Right | | uMb | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Bottom | | uMl | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Left | | uMv | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Vertical | | uMh | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Horizontal | | uOpacity | String | Opacity | | uP | oneOfType([PropTypes.bool, PropTypes.string]) | Padding | | uPt | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Top | | uPr | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Right | | uPb | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Bottom | | uPl | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Left | | uPv | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Vertical | | uPh | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Horizontal | | uPosition | String | Position | | uPull | String | Offset After | | uPush | String | Offset | | uText | String | Text Align | | uTransform | String | Text Transform | | uWeight | String | Font Weight |

Example

<H1 size="large" uText="center" uMb>Hello World</H1>

<h1 class="o-type-size u-text-center u-mb">Hello World</h1>

Responsive Utilities

Vue iotaCSS also supports responsive utilities with a similar syntax to iotaCSS itself, with one big difference. Since in Vue you cannot pass two times the same property with difference values, iotaCSS introduces the 'all' word which is used in case you want to have for example a default margin everywhere and a large margin to only 'sm' breakpoint:

<Type uText="right center@sm" uMb="large" uMt="all large@sm">Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up</Type>

<p class="u-text-right u-text-center@sm u-mb-large u-mt u-mt-large@sm" uMb="large" uMt="all large@sm">Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up</p>