JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q42973F
  • License MIT

Quickly build basic React websites using Blok

Package Exports

  • blok

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blok) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

blok

DISCLAIMER

This is currently in the early stages of development

This guide will eventually be moved to its own website

Getting Started

npm install --save blok

Usage

Import

import { Component, Component2 } from 'blok'

Contents

  • Blok

    • Content
    • Header

  • Grid

    • Row
    • Column

  • Heading

  • Line

  • Link

  • Text

Blok

Content

Name Default Type Options Use
color string black, white, red, green, blue <Blok.Content color='blue' />
description array Custom array <Blok.Content description={[{text: 'para one'}]} />
divide boolean true, false <Blok.Content divide />
heading string Custom String <Blok.Content heading='Hello' />
kicker string Custom string <Blok.Content kicker='World' />
padded boolean true, false <Blok.Content padded /> 
<Blok.Content
  heading='Section One'
  kicker='The Begining'
  divide
  padded
  description={[
    {text: 'This is section one and this is a paragraph.'}
  ]}
/>

Header

Name Default Type Options Use
color 'white' string black, white, red, green, blue <Blok.Header color='blue' />
heading 'Title' string Custom String <Blok.Header heading='Hello' />
link array Custom array <Blok.Header link={[{text: 'link1', linkRef: '#', active: true}]} />
raised string Custom string <Blok.Header raised />
transparent boolean true, false <Blok.Header transparent /> 
<Blok.Header
  heading='Title'
  link={[
    {text: 'link1'},
    {text: 'link2'}
  ]}
  raised 
/>

Grid

Grid

Name Default Type Options Use
className string Custom classes <Grid className='custom-class' />
color string black, white, red, green, blue <Grid color='blue' />
font string heading, body, fancy <Grid font='heading' />
raised boolean true, false <Grid raised />
size string text, quote, h4, h3, h2, h1 <Grid size='large' />
textAlign string left, middle, right, justified <Grid textAlign='middle' />

Row

Name Default Type Options Use
className string Custom classes <Grid.Row className='custom-class' />
color string black, white, red, green, blue <Grid.Row color='blue' />
font string heading, body, fancy <Grid.Row font='heading' />
size string text, quote, h4, h3, h2, h1 <Grid.Row size='large' />
textAlign string left, middle, right, justified <Grid.Row textAlign='middle' />

Column

Name Default Type Options Use
className string Custom classes <Grid.Column className='custom-class' />
color string black, white, red, green, blue <Grid.Column color='blue' />
font string heading, body, fancy <Grid.Column font='heading' />
size string text, quote, h4, h3, h2, h1 <Grid.Column size='large' />
textAlign string left, middle, right, justified <Grid.Column textAlign='middle' />
width number 1, 2, 3, 4, 5, 6, 7, 8 <Grid.Column width={2} /> 
<Grid raised color='blue'>
  <Grid.Row className='my-row'>
    <Grid.Column width={2} textAlign='middle'>Hello</Grid.Column>
    <Grid.Column width={6} textAlign='right'>World</Grid.Column>
  <Grid.Row>
</Grid>

Heading

Heading

Name Default Type Options Use
className string Custom classes <Heading className='custom-class' />
font string heading, body, fancy <Heading font='heading' />
size string text, quote, h4, h3, h2, h1 <Heading size='large' />
tag h1 string p, h1, h2, h3, h4, h5, h6 <Heading tag='h3' />
text string Custom string <Heading text='Hello World' />
textAlign string Custom string <Heading text='Hello World' /> 
<Heading font='body' text='Hello World' />

Line

Line

Name Default Type Options Use
small boolean true, false <Line small /> 
<Line small />

Link

Name Default Type Options Use
active boolean true, false <Link active />
className string Custom classes <Link className='custom-class' />
color string black, white, red, green, blue <Link color='blue' />
font string heading, body, fancy <Link font='heading' />
linkRef string Custom href <Link linkRef='www.website.com' />
size string text, quote, h4, h3, h2, h1 <Link size='large' />
text string Custom string <Link text='Link to Website' /> 
<Link linkRef='www.website.com' text='Website' active />

Text

Text

Name Default Type Options Use
className string Custom classes <Text className='custom-class' />
text string Custom string <Text text='Hello World' /> 
<Text text='This is my custom text' />