Fast, lightweight mini.css components built with React/Preact
mini.css React/Preact libraries - Fast, lightweight mini.css components built with React/Preact

							
							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
										
									
									
										  Preact
										npm install 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.
		            
		            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. 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 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 (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 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 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')
);
											
										
		              
		          
		            Navigation  View moduleThe navigation module contains components for creating headers, footers, navigation bars and drawers.
								
		            
										Header
		                The Header component creates a <header> element and styles its contents appropriately, by applying the necessary classes. Notable attributes that describe it are as follows:
										
											sticky: specifies if the <header> is .sticky or not (true or false). 
											logo: applied on one child (usually the first), specifies the element on which the .logo class should be applied.
										
										 Note that both of the above attributes are optional. All elements inside the component will be styled as buttons (by applying the .button class) to display properly, based on the framework's guidelines.
		                Sample code
										
											
												ReactDOM.render(
  <Header sticky>
    <a logo href='#'>Logo</a>
    <a href='#'>Home</a>
  </Header>,
  document.getElementById('root')
);
											
											
												render(h(Header, {
    sticky: true
  }, [
    h('a', {href: '#', logo: true}, 'Logo'),
    h('a', {href: '#'}, 'Home')
  ]),
  document.getElementById('root')
);
											
										
		              
								
										NavigationBar
		                The NavigationBar component creates a <nav element and styles its contents, according to their properties. Notable attributes that describe it are as follows:
										
											sublink: applied on children (one or more), specifies their sublevel.
										
										 Note that elements inside the component that are given a sublink attribute, will get a .sublink- class applied to them, according to the value of the attribute.
		                Sample code
										
											
												ReactDOM.render(
  <NavigationBar>
    <a href='#'>Home</a>
    <a href='#' sublink='1'>About</a>
  </NavigationBar>,
  document.getElementById('root')
);
											
											
												render(h(NavigationBar, {
  }, [
    h('a', {href: '#'}, 'Home'),
    h('a', {href: '#', sublink: 1}, 'About')
  ]),
  document.getElementById('root')
);
											
										
		              
								
										Drawer & DrawerToggle
		                The Drawer and DrawerToggle components create .drawer and .drawer-toggle elements respectively, while applying the necessary styles and adding the elements required to make them fully functional.  Notable attributes that describe them are as follows:
										
											persistent: applied to both components, specifies if the .drawer is .persistent (true or false).
											id and htmlFor: id is applied to Drawer and htmlFor is applied to DrawerToggle, specify the link between the two components. required
											right: applied to Drawer, specifies if the .drawer is .right(true or false).
										
										 Note that id and htmlFor need to match for the components to work correctly together. Also note that the other attributes are optional and their values will default to false if not specified.
		                Sample code
										
											
												ReactDOM.render(
  <DrawerToggle htmlFor='drawer-menu' persistent />,
  document.getElementById('root')
);

ReactDOM.render(
  <Drawer id='drawer-menu' persistent>
    ...
  </Drawer>,
  document.getElementById('root')
);
											
											
												render(h(DrawerToggle, {
    htmlFor: 'drawer-menu',
    persistent: true
  }, null),
  document.getElementById('root')
);

render(h(Drawer, {
    id: 'drawer-menu',
    persistent: true
  }, ...),
  document.getElementById('root')
);
											
										
		              
								
										Footer
										The Footer component creates a <footer> element. Notable attributes that describe it are as follows:
										
											sticky: specifies if the <footer> is .sticky or not (true or false).
										
										 Note that the above attributes is optional and will default to false if not value is specified.
		                Sample code
										
											
												ReactDOM.render(
  <Footer sticky>
    <p>Copyright 2017 - Web corporation</a>
  </Footer>,
  document.getElementById('root')
);
											
											
												render(h(Footer, {
    sticky: true
  }, h('p', {}, 'Copyright 2017 - Web corporation')
  ),
  document.getElementById('root')
);
											
										
		              
		          
		            Table  View moduleThe 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 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. 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 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. 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 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 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 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.
		      