Github

React & Preact Libraries Fast, lightweight components

If you want to create a progressive web app, utilize a virtual DOM or just fancy trying React (or Preact), we got you covered! You can now download the React or Preact component library, install it and create anything that you want without having to remember the structure and patterns of the mini.css components and modules!


Setup & usage

The react-mini.css and preact-mini.css libraries are available for download on npm and yarn:

  React

npm install mini.css-react
yarn add mini.css-react

  Preact

npm install mini.css-preact
yarn add mini.css-preact

After you install the library of your choice and setup React or Preact to work with your page, you should also include a flavor file of the mini.css framework, as described in the framework's introduction page and you're ready to go. You can use any flavor with these libraries, provided that your library variables are tweaked to match the ones in your flavor.

 If you are an advanced user, we suggest that you use something like Webpack or Browserify, so that you can better bundle your files for production.

Quick start

If you want to try out one of the component libraries, you can use either the React template or the Preact template on Codepen.


Core

View module

The core module contains just the Image component, which will allow you to create clean, modern image views with captions.

Image

The Image component simply creates a <figure> that contains an <img> element, along with a <figcaption> element to describe it. Notable attributes that describe it are as follows:

  • src: specifies the URL of the image. required
  • alt: specifies an alternate text for the image, if the image cannot be displayed. required
  • description: specifies a description text for the image, displayed below it. required

Note that omitting either alt or description will not cause problems, as the value of the omitted attribute will be substituted by the value of the other one. However, omitting both will result in an error.

Sample code

ReactDOM.render(
  <Image src='...'
  alt='Image'
  description='Image caption' />,
  document.getElementById('root')
);
render(h(Image, {
  src: '...',
  alt: 'Image',
  description: 'Image caption'
  }, null),
  document.getElementById('root')
);

Grid

View module

The grid module contains three components corresponding to the container, row and column classes, allowing you to create responsive layouts.

GridContainer

The GridContainer component is a simple fluid .container for your page's layout and contents. It doesn't have any special attributes that need to be specified.

Sample code

ReactDOM.render(
  <GridContainer>
    ...
  </GridContainer>,
  document.getElementById('root')
);
render(h(GridContainer, {
  }, ...),
  document.getElementById('root')
);

GridRow

The GridRow component creates a flexible .row, that can specify pre-defined layouts for its children. Notable attributes that describe it are as follows:

  • extraSmall: specifies a width value (between 1 and 12 or 'fluid') for the children of the row on extra small screens. flavor-dependent
  • small: specifies a width value (between 1 and 12 or 'fluid') for the children of the row on small screens. 
  • medium: specifies a width value (between 1 and 12 or 'fluid') for the children of the row on medium-sized screens. 
  • large: specifies a width value (between 1 and 12 or 'fluid') for the children of the row on larger screens. 

Note that all of the above attributes are optional. The extraSmall attribute should only be used if your mini.css flavor specifies layouts for extra small screens (the default flavor doesn't).

Sample code

ReactDOM.render(
  <GridRow
    small='12'
    medium='6'
    large='fluid'>
    ...
  </GridRow>,
  document.getElementById('root')
);
render(h(GridRow, {
    small: 12,
    medium: 6,
    large: 'fluid'
  }, ...),
  document.getElementById('root')
);

GridColumn

The GridColumn component creates a responsive column, allowing you to specify custom layouts. Notable attributes that describe it are as follows:

  • extraSmall: specifies the width, offset and order of the column on extra small screens. required flavor-dependent
  • small: specifies the width, offset and order of the column on small screens. required
  • medium: specifies the width, offset and order of the column on medium-sized screens. required
  • large: specifies the width, offset and order of the column on larger screens. required

Note that it is mandatory to provide at least one of the above attributes. The extraSmall attribute should only be used if your mini.css flavor specifies layouts for extra small screens (the default flavor doesn't). Each of the above attributes is structured as follows:

  • width: specifies a width value (between 1 and 12 or 'fluid') for the specific layout.
  • offset: specifies an offset value (between 0 and 11 ) for the specific layout.
  • order: specifies an ordering value ('first', 'last' or 'normal') for the specific layout.

You should provide at least one of the above properties for each layout size that you have specified.

Sample code

ReactDOM.render(
  <GridColumn
    small={{width: 12, order: 'first'}}
    medium={{width:8, offset: 2}}
    large={{width: 'fluid', offset: 0, order: 'normal'}}>
    ...
  </GridColumn>,
  document.getElementById('root')
);
render(h(GridColumn, {
    small: {width: 12, order: 'first'},
    medium: {width:8, offset: 2},
    large: {width: 'fluid', offset: 0, order: 'normal'}
  }, ...),
  document.getElementById('root')
);

Input Control

View module

The input_control module contains multiple components for creating custom-styled input elements using input groups, such as buttons, checkboxes, file uploads and switches.

InputGroup

The InputGroup component creates an .input-group, which you can use as a container for your <input> and <label> elements. Notable attributes that describe it are as follows:

  • fluid: specifies if the .input-group should be .fluid (true or false). exclusive
  • vertical: specifies if the .input-group should be .vertical (true or false). exclusive

Note that both of the above attributes are optional, however they are mutually exclusive when enabled.

Sample code

ReactDOM.render(
  <InputGroup fluid>
    ...
  </InputGroup>,
  document.getElementById('root')
);
render(h(InputGroup, {
    fluid: true
  }, ...),
  document.getElementById('root')
);

Checkbox

The Checkbox component creates an .input-group that contains an <input type="checkbox"> element and a <label> linked to it. Notable attributes that describe it are as follows:

  • labelText: specifies the text that will be shown inside the <label> element. required

Note that, if not provided with an id attribute, the component will automatically generate its own internal id that will link the two elements.

Sample code

ReactDOM.render(
  <Checkbox labelText='Checkbox' />,
  document.getElementById('root')
);
render(h(Checkbox, {
    labelText: 'Checkbox',
  }, null),
  document.getElementById('root')
);

Radio

The Radio component creates an .input-group that contains an <input type="radio"> element and a <label> linked to it. Notable attributes that describe it are as follows:

  • labelText: specifies the text that will be shown inside the <label> element. required

Note that, if not provided with an id attribute, the component will automatically generate its own internal id that will link the two elements.

Sample code

ReactDOM.render(
  <Radio labelText='Radio' group='radio-group'/>,
  document.getElementById('root')
);
render(h(Radio, {
    labelText: 'Radio',
    group: 'radio-group'
  }, null),
  document.getElementById('root')
);

Switch

The Switch component creates an .input-group that contains an <input> element of appropriate type and a <label> linked to it. Notable attributes that describe it are as follows:

  • labelText: specifies the text that will be shown inside the <label> element. required
  • type: specifies the type of the <input> element (checkbox or radio).

Note that, if not provided with an id attribute, the component will automatically generate its own internal id that will link the two elements. Similarly, if not provided with a type attribute, the <input> element will default to a checkbox.

Sample code

ReactDOM.render(
  <Switch labelText='Switch' type='checkbox'/>,
  document.getElementById('root')
);
render(h(Switch, {
    labelText: 'Switch',
    type: 'checkbox'
  }, null),
  document.getElementById('root')
);

Button

The Button component creates a .button or a <button> or an <input> element of appropriate type. Notable attributes that describe it are as follows:

  • type: specifies the type of the button ('button', 'link', 'label', 'input', 'submit' or 'reset'). 

Note that if not provided with a value for the type attribute, the default value of 'button' will be applied, creating a <button> element.

Sample code

ReactDOM.render(
  <Button type='input'>
    Button
  </Button>
  document.getElementById('root')
);
render(h(Checkbox, {
    type: 'input'
  }, 'Button'),
  document.getElementById('root')
);

FileUpload

The FileUpload component creates an .input-group that contains an <input type="file"> element and a <label> linked to it. Notable attributes that describe it are as follows:

  • labelText: specifies the text that will be shown inside the <label> element. required

Note that, if not provided with an id attribute, the component will automatically generate its own internal id that will link the two elements.

Sample code

ReactDOM.render(
  <FileUpload labelText='Upload file'/>,
  document.getElementById('root')
);
render(h(FileUpload, {
    labelText: 'Upload file'
  }, null),
  document.getElementById('root')
);

Table

View module

The table module provides a single component for creating and styling tables.

Table

The Table component creates a <table> element and applies the necessary classes, based on the attributes provided. Notable attributes that describe it are as follows:

  • scrollable: specifies if the <table> is .scrollable or not (true or false). exclusive
  • horizontal: specifies if the <table> is .horizontal or not (true or false). exclusive
  • preset: specifies if the <table> is .preset or not (true or false).

Note that the scrollable and horizontal attributes are optional, however they are mutually exclusive when enabled.

Sample code

ReactDOM.render(
  <Table horizontal preset>
    ...
  </Table>,
  document.getElementById('root')
);
render(h(Table, {
    horizontal: true,
    preset: true
  }, ...),
  document.getElementById('root')
);

Card

View module

The card module contains two components that allow the creation of cards and sections respectively.

Card & Section

The Card and Section components are used to create .card and .section elements respectively.

Sample code

ReactDOM.render(
  <Card>
    <Section>
      ...
    </Section>
  </Card>,
  document.getElementById('root')
);
render(h(Card, {
  }, h(Section, {}, ...)),
  document.getElementById('root')
);

Tab

View module

The tab module contains a component for creating tabs, along with a complementary component for creating the inner structure of tabs.

Tabs & Tab

The Tabs component creates a .tabs container, along with all the necessary elements to support tabbed navigation. All the children of the Tabs component must be based on the Tab component, which serves as a complementary component. Notable attributes that describe them are as follows:

  • tabTitle: applied on Tab component, specifies the text inside the <label> of the tab. required
  • stacked: applied on Tabs component, specifies if the tabs are .stacked or not (true or false).
  • multiple: applied on Tabs component, specifies if the tabs allow multiple open at the same time or not (true or false).

Note that the value of multiple will only be applied if the value of stacked is set to true, otherwise it will default to false.

Sample code

ReactDOM.render(
  <Tabs stacked multiple>
    <Tab tabTitle='Tab 1'>
      ...
    </Tab>
    <Tab tabTitle='Tab 2'>
      ...
    </Tab>
  </Tabs>,
  document.getElementById('root')
);
render(h(Tabs, {
    stacked: true,
    multiple: true
  }, [
    h(Tab, {tabTitle: 'Tab 1'}, ...),
    h(Tab, {tabTitle: 'Tab 2'}, ...)
  ]),
  document.getElementById('root')
);

Contextual

View module

The contextual module contains components for creating toast messages, tooltips and modal dialogs.

Toast

The Toast component creates a .toast element, based on the attributes provided.

Sample code

ReactDOM.render(
  <Toast>
  ...
  </Toast>,
  document.getElementById('root')
);
render(h(Toast, {
  }, ...),
  document.getElementById('root')
);

Tooltip

The Tooltip component creates a .tooltip element, based on the attributes provided. Notable attributes that describe it are as follows:

  • tooltipText: specifies the text to be display when hovering over the .tooltip. required
  • bottom: specifies if the .tooltip should have the .bottom class (true or false).

Note that the bottom attribute is optional and its value will default to false if not specified otherwise.

Sample code

ReactDOM.render(
  <Tooltip bottom tooltipText='Tooltip'>
  ...
  </Tooltip>,
  document.getElementById('root')
);
render(h(Tooltip, {
    bottom: true,
    tooltipText: 'Tooltip'
  }, ...),
  document.getElementById('root')
);

Modal

The Modal component creates a .modal element along with a <label> that can show it to the user. Notable attributes that describe it are as follows:

  • id: specifies the id of the .modal dialog.
  • labelText: specifies the text inside the <label> element that controls the display of the .modal dialog.

Note that both attributes are optional and will revert to their default values if not specified.

Sample code

ReactDOM.render(
  <Modal id='modal-dialog' labelText='Open modal'>
  ...
  </Modal>,
  document.getElementById('root')
);
render(h(Modal, {
    id: 'modal-dialog',
    labelText: 'Open modal'
  }, ...),
  document.getElementById('root')
);

Progess

View module

The progress module contains components for creating progress elements and donut spinners.

Progress

The Progress component creates a <progress> element based on the specified attributes. Notable attributes that describe it are as follows:

  • value: specifies the value of the <progress> element (numeric or percentage). required
  • max: specifies the max value of the <progress> element (numeric only).

Note that you can use a percentage (e.g. 45%) for value and you can specify a custom max value, both of which will be appropriately converted by the component.

Sample code

ReactDOM.render(
  <Progress value='45%' max='10' />,
  document.getElementById('root')
);
render(h(Progress, {
    value: '45%',
    max: '10'
  }, null),
  document.getElementById('root')
);

SpinnerDonut

The SpinnerDonut component creates a .spinner-donut element based on the specified attributes. Notable attributes that describe it are as follows:

  • progressBar: specifies if the related accessibility role should be applied to the .spinner-donut element (true or false).
  • elementType: specifies the type of the .spinner-donut element ('div' or 'span').

Note that both of the above attributes are optional and will use their default values if not specified.

Sample code

ReactDOM.render(
  <SpinnerDonut progressBar elementType='div' />,
  document.getElementById('root')
);
render(h(SpinnerDonut, {
    progressBar: true,
    elementType: 'div'
  }, null),
  document.getElementById('root')
);

Utility

View module

The utility module contains components for creating utilities, such as breadcrumbs and close icons.

Breadcrumbs

The Breadcrumbs component creates a .breadcrumbs element and styles the children of the component accordingly.

Sample code

ReactDOM.render(
  <Breadcrumbs>
    <a href='#'>Root</a>
    <span>Docs</span>
  </Breadcrumbs>,
  document.getElementById('root')
);
render(h(Breadcrumbs, {
  }, [
    h('a', {href: '#'}, 'Root'),
    h('span', {}, 'Docs')
  ]),
  document.getElementById('root')
);

Close

The Close component creates a .close element. Note that this component is not allowed to have any children.

Sample code

ReactDOM.render(
  <Close/>,
  document.getElementById('root')
);
render(h(Close, {
  }, null),
  document.getElementById('root')
);

If you want to learn more about mini.css, check out the framework's introduction page.