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 moduleThe 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. requiredalt
: specifies an alternate text for the image, if the image cannot be displayed. requireddescription
: 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 moduleThe 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 (between1
and12
or'fluid'
) for the children of the row on extra small screens. flavor-dependentsmall
: specifies a width value (between1
and12
or'fluid'
) for the children of the row on small screens.medium
: specifies a width value (between1
and12
or'fluid'
) for the children of the row on medium-sized screens.large
: specifies a width value (between1
and12
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-dependentsmall
: specifies the width, offset and order of the column on small screens. requiredmedium
: specifies the width, offset and order of the column on medium-sized screens. requiredlarge
: 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 (between1
and12
or'fluid'
) for the specific layout.offset
: specifies an offset value (between0
and11
) 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 moduleThe 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
orfalse
). exclusivevertical
: specifies if the.input-group
should be.vertical
(true
orfalse
). 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. requiredtype
: specifies thetype
of the<input>
element (checkbox
orradio
).
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
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
orfalse
). exclusivehorizontal
: specifies if the<table>
is.horizontal
or not (true
orfalse
). exclusivepreset
: specifies if the<table>
is.preset
or not (true
orfalse
).
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 moduleThe 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 moduleThe 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. requiredstacked
: applied on Tabs component, specifies if the tabs are.stacked
or not (true
orfalse
).multiple
: applied on Tabs component, specifies if the tabs allow multiple open at the same time or not (true
orfalse
).
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 moduleThe 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
. requiredbottom
: specifies if the.tooltip
should have the.bottom
class (true
orfalse
).
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 theid
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 moduleThe 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 thevalue
of the<progress>
element (numeric or percentage). requiredmax
: specifies themax
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
orfalse
).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 moduleThe 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.