Vue iotacss

Stateless Vue Components for iotaCSS.

Version: 1.1.0 Updated: 11/05/2017

By: iotacss License: Apache-2.0

Downloads Last 30 Days: 20

Install

npm i vue-iotacss
yarn add vue-iotacss

Repository: https://github.com/iotacss/vue-iotacss

CDNs

bundle.run: https://bundle.run/vue-iotacss

jsDelivr: https://cdn.jsdelivr.net/npm/vue-iotacss

unpkg: https://unpkg.com/vue-iotacss

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>
Categories: Vue js