Fiber Elements

This is a work-in-progress, things might not work correctly.

I'm trying to make it easier for designer's to make use of web components. Fiber is a base foundation which consists of a few example custom elements. You can modify these elements to create your own framework and start using them in your websites or applications. Fiber also provides a library of custom CSS properties using PostCSS which makes it easier to style rudimentary layout.

Build

To build the elements

gulp build

This processes PostCSS styles within the src directory including inline <style> tags and creates CSS from attributes used inside HTML elements.

Serve

To start a server so you can preview the elements

gulp serve

Properties

Style markup using custom Fiber CSS properties, see PostCSS Fiber for features.

:host {
    layout: flex;
    guttering: 4gu;
    width: 50%;
}

Attributes

Provided is a shortcut to style markup using Fiber CSS properties as HTML attributes

<fiber-button w_10gu>View</fiber-button>

Install

To use the elements as they are in your project.

bower install fiber-elements

Reference fiber-elements inside the HTML of your project

<link rel="import" href="fiber-elements.html">