Muilessium is a UI framework for static websites. 40+ components, 60+ utilities to make your code cleaner, LESS+RSCSS, fluid typography, keyboard and touchscreen support, understandable and well-organized code. The main purpose of its development is to create simple, but powerful framework for landings, personal websites, blogs etc.

Run console.log(Muilessium) on this page to see the structure of this tool.

<link rel='stylesheet' href='https://unpkg.com/muilessium/dist/css/muilessium.min.css'>
<script src='https://unpkg.com/muilessium/dist/js/muilessium.min.js'></script>

Basic example

The basic page layout is shown in this example. You'll see how to use header with logo and navigation, content containers and footer.

See the Pen Muilessium 1.0 - basic example by Ivan Bogachev (@sfi0zy) on CodePen.

Form example

In this example, you'll see how to create forms with Muilessium, how to use components in scripts and how to validate inputs.

See the Pen Muilessium 1.0 - form example by Ivan Bogachev (@sfi0zy) on CodePen.

/src/less/grid.less

Muilessium uses a classic grid with 12 columns. Default breakpoints are 400, 600 and 1200px. Its behavior is similar to the grid from flexboxgrid.com, but it uses RSCSS-style class names.

If you want to know more about the grid or another component of the Muilessium, use the file path included in the docs for the component under its name. You can take a look at sources on GitHub and get more information about styles or scripts for the component.

-s1
-s11
-s3
-s9
-s6 -m4 -l6
-s6 -m8 -l6
-m6 -l2
-m6 -l10
<div class='mui-row'>
    <div class='mui-column -s1'>-s1</div>
    <div class='mui-column -s11'>-s11</div>
</div>
<div class='mui-row'>
    <div class='mui-column -s3'>-s3</div>
    <div class='mui-column -s9'>-s9</div>
</div>
<div class='mui-row'>
    <div class='mui-column -s6 -m4 -l6'>-s6 -m4 -l6</div>
    <div class='mui-column -s6 -m8 -l6'>-s6 -m8 -l6</div>
</div>
<div class='mui-row'>
    <div class='mui-column -m6 -l2'>-m6 -l2</div>
    <div class='mui-column -m6 -l10'>-m6 -l10</div>
</div>

The basic page layout includes scroll-fix, page-header, page-container and page-footer. This layout is the simplest way to create a sticky footer.

<div class='mui-scroll-fix'></div>
<header class='mui-page-header'>header</header>
<div class='mui-page-container'>...</div>
<footer class='mui-page-footer'>footer</footer>

Muilessium uses Hammer.js (exported in Muilessium.DEPENDENCIES), and it is recommended to use the following viewport settings:

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1'>
/src/less/fonts.less
/src/less/helpers.less

Typography in Muilessium is fluid, and it is based on default system fonts and _bigger-* and _smaller-* helpers.

These helpers have different behavior on different screen sizes.

H1 Heading (+5)
H2 Heading (+4)
H3 Heading (+3)
H4 Heading (+2)
H5 Heading (+1)
H6 Heading (+0)
Normal text
Text (-1)
Text (-2)
Text (-3)
Text (-4)
Text (-5)
/src/less/colors.less
/src/less/color-scheme.less

These classes are created for fast painting. There are four types of them:

  • -color-[ 1 | 2 | 3 | 4 | 5 ] - text color and fill for the element. For example "-orange-4"
  • -color-[ 1 | 2 | 3 | 4 | 5 ]-bg - background for the element. For example "-blue-1-bg"
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ] - text color and fill for the :hover and :focus states of the element
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ]-bg - background color for the :hover and :focus states
White
FFFFFF
Grey
#fafafa
#eeeeee
#9e9e9e
#424242
#212121
Black
000000
Brown
#efebe9
#bcaaa4
#795548
#4e342e
#3e2723
Orange
#fff3e0
#ffcc80
#ff9800
#ef6c00
#e65100
Yellow
#fffde7
#fff59d
#ffeb3b
#f9a825
#f57f17
Red
#ffebee
#ef9a9a
#f44336
#c62828
#b71c1c
Pink
#fce4ec
#f48fb1
#e91e63
#ad1457
#880e4f
Violet
#ede7f6
#b39ddb
#673ab7
#4527a0
#311b92
Blue
#e3f2fd
#90caf9
#2196f3
#1565c0
#0d47a1
Cyan
#e0f7fa
#80deea
#00bcd4
#00838f
#006064
Green
#e8f5e9
#a5d6a7
#4caf50
#2e7d32
#1b5e20
/src/less/helpers.less

Muilessium has a lot of CSS helpers. You can take look at sources for more information about them.

Only helpers and classes for painting can include the "!important" rules.

  • Text
    • _text-[ left | center | right | justify ]
    • _[ upper | lower ]case
    • _capitalize
    • _bigger-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _smaller-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _line-[ 1r | 1-25 | 1-50 | 1-75 | 2r | 3r | 4r | 5r ]
  • Floating
    • _left
    • _right
  • Vertical rhythm
    • _separate-[ 1 | 2 | 3 | 4 | 5 ]
  • Shadows
    • _shadow-[ 1 | 2 | 3 | 4 | 5 ]
  • Pointer events
    • _disabled
  • Others
    • _no-overflow
    • _no-decoration
    • _truncate-line
    • _no-break
    • _allow-empty
    • _hidden
    • _disable-pointer-events
    • _disable-pointer-events-hard
/src/js/muilessium.js

Muilessium has one global entry point - window.Muilessium. It has a number of useful fields:

  • EVENTS - events observer
  • STORE - global store for data
  • FACTORY - the main factory of components
  • KEYBOARD, MOUSE, TOUCHPAD - utilities for controls
  • UTILS - a number of other useful utilities
  • DATA_TYPES - data types for internal usage
  • DEPENDENCIES - dependencies for internal usage
  • POLYFILLS - polyfills for internal usage

These objects are prepared to use them inside Muilessium, but you can use all of them too. They'll help you to make your code cleaner. Take a look on this example of the ajax request:

const _      = Muilessium.UTILS;
const STORE  = Muilessium.STORE;
const EVENTS = Muilessium.EVENTS;

// This can be in the first module...
EVENTS.addEvent('data-updated');

// This can be in the second one...
EVENTS.addEventListener('data-updated', () => {
    console.log(STORE.get('my-data'));
});

// And this can be in th third module...
_.ajax.get('https://...', (responseText) => {
    STORE.set('my-data', responseText);
    EVENTS.fireEvent('data-updated');
});

Run "console.log(Muilessium)" on this page to see the full structure of it.

/src/js/events.js

Muilessium has a system of internal events. It exports that system as Muilessium.EVENTS. The main methods are:

  • addEvent(name)
  • addEventListener(name, callback, executeIfAlreadyFired=false)
  • fireEvent(name)

There are nine default events:

  1. resize-window
  2. resize-window-height
  3. resize-window-width
  4. scroll
  5. scroll-start
  6. scroll-end
  7. app-initialized
  8. images-loaded
  9. store-updated

For example:

const EVENTS = Muilessium.EVENTS;

EVENTS.addEvent('my-event');

EVENTS.addEventListener('my-event', () => {
    console.log('it works');
});

EVENTS.addEventListener('scroll-start', () => {
    EVENTS.fireEvent('my-event');
});

All components have the similar methods to work with their local events. You should store global events in the EVENTS object and the local events in the components themselves.

/src/js/store.js

Muilessium has a global store. It should be used to store different data and share it between components. Muilessium exports the store as Muilessium.STORE. The main methods are:

  • set(path, data)
  • get(path)

For example:

const STORE = Muilessium.STORE;

STORE.set('my-data.a', 'AAA');
STORE.set('my-data.b', 'BBB');

console.log(STORE.get('my-data.a') + STORE.get('my-data.b'));
/src/js/factory.js
/src/js/component.js

Muilessium has a factory of components. It exports that system as Muilessium.FACTORY. The main methods are:

  • registerComponent(type, component)
  • create(type, selector, options)

All components should extend the base Component class. It should be exported as Muilessium.FACTORY.BaseComponent.

For example:

const FACTORY = Muilessium.FACTORY;

class MyComponent extends FACTORY.BaseComponent {
    constructor() {
        super();
        console.log('ok');
    }
}

Muilessium.FACTORY.registerComponent('MyComponent', MyComponent);
Muilessium.FACTORY.create('MyComponent', 'body'); // <-- we use body just for example

console.log(Muilessium.FACTORY.componentsCache.MyComponent);

/src/js/controls/keyboard.js
/src/js/controls/mouse.js
/src/js/controls/touchpad.js

Muilessium has a number of handy utilities for controls. It exports them as Muilessium.KEYBOARD, Muilessium.MOUSE and Muilessium.TOUCHPAD. They should be used to keep the code clean and readable.

  • MOUSE
    • onClick(element, callback)
    • onMove(element, callback)
    • onMouseOver(element, callback)
    • onMouseOut(element, callback)
  • KEYBOARD
    • onEnterPressed(element, callback)
    • onSpacePressed(element, callback)
    • onEscapePressed(element, callback)
    • onTabPressed(element, callback)
    • onShiftTabPressed(element, callback)
    • onArrowUpPressed(element, callback)
    • onArrowRightPressed(element, callback)
    • onArrowDownPressed(element, callback)
    • onArrowLeftPressed(element, callback)
  • TOUCHPAD
    • onSwipeLeft(element, callback)
    • onSwipeRight(element, callback)
    • onSwipeUp(element, callback)
    • onSwipeDown(element, callback)
    • onPinchOut(element, callback)

For example:

const MOUSE = Muilessium.MOUSE;

MOUSE.onMove(document, (event) => {
    console.log(event);
});
/src/js/utils.js

Muilessium exports over 60 internal utilities as Muilessium.UTILS. In the source code they are separated by categories:

  • AJAX
    • ajax.post(url, data, successCallback, errorCallback)
    • ajax.postProtected(url, data, callback)
    • ajax.get(url, successCallback, errorCallback)
    • ajax.getProtected(url, callback)
  • Animations
    • typeText(element, { text, delay, cycle, times }, callback)
    • typeTexts(element, textsList)
    • activateAnimation(element)
    • animateElement(element, animation)
  • WAI-ARIA
    • aria.set(element, property, value
    • aria.setRole(element, role)
    • aria.removeRole(element)
    • aria.setId(element, id)
    • aria.get(element, property)
    • aria.getRole(element)
    • aria.toggleState(element, state)
  • HTML attributes
    • setAttribute(element, attribute, value)
    • getAttribute(element, attribute, defaultValue)
    • removeAttribute(element, attribute)
  • Checking
    • isNode(element)
    • isInPage(element)
    • isNotInPage(element)
    • ifExists(element, callback)
    • ifNodeList(element, callback)
    • isDescendant(parent, child)
  • CSS classes
    • hasClass(element, class)
    • hasNotClass(element, class)
    • addClass(element, class)
    • addClasses(element, classes)
    • removeClass(element, class)
    • removeClasses(element, classes)
    • replaceClass(element, class, newClass)
    • toggleClass(element, class)
  • Focus & click
    • makeElementFocusable(element)
    • makeElementsFocusable(elementsList)
    • makeElementNotFocusable(element)
    • makeElementsNotFocusable(elementsList)
    • getFocusableChilds(element)
    • getAllFocusableElements()
    • getNextFocusableElement(element)
    • getPreviousFocusableElement(element)
    • goToNextFocusableElement(element)
    • goToPreviousFocusableElement(element)
    • makeElementClickable(element, callback, { mouse, keyboard }
    • makeElementsClickable(element, childs, callback, { mouse, keyboard }
    • onFocus(element, callback)
    • onBlur(element, callback)
    • clearFocus()
  • Scroll
    • scrollTo(element, callback)
    • scrollToTop(callback)
    • scrollFire(element, callback)
  • Viewport
    • isInViewport(element)
    • isAboveViewport(element)
  • Uncategorized
    • normalizeTabIndexes()
    • layLoadImages(callback)
    • initAnchorLinks()
    • generateRandomString(length)
    • stringify(object)
    • extend(target, sources)
    • debounce(func, delay)
    • callOnce(callback)
    • firstOfList(list)
    • lastOfList(list)
    • forEach(list, callback, delay)
    • deepGet(obj, path)
    • deepSet(obj, path, data)
    • toLispCase(str)
    • upperLimit(value, max)
    • lowerLimit(value, min)

For example:

const _ = Muilessium.UTILS;

_.scrollToTop();
_.animateElement(document.body, 'fade-out');
_.animateElement(document.body, 'fade-in-left');
/src/js/utils/uncategorized.js

Don't forget to add "noscript" tag for search engines.

<img class='mui-image -js-lazy-load'
    data-src='....'
    data-srcset='....'
    data-sizes='....'
    alt='Lazy loaded image'
    src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>

<noscript>
    <img class='mui-image' src='...' alt='Same image for better SEO'>
</noscript>
/src/less/components/svg-icon.less

Muilessium uses Ionicons by default.

You have to put the following sprite at the end of your pages. You can create custom icons by replacing symbols in this SVG.


<div class='mui-svg-sprite'>
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--check'><path d='M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--close'><path d='M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--arrow-down'><path d='M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--arrow-right'><path d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.701H85v42.75z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--arrow-left'><path d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--arrow-up'><path d='M277.375 427V167.296l119.702 119.702L427 256 256 85 85 256l29.924 29.922 119.701-118.626V427h42.75z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--hamburger'><path d='M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--spinner'><path d='M256 48c-75.033 0-144.531 40.658-181.373 106.107l-1.963 3.485 20.915 11.771 1.962-3.485C128.138 107.973 189.621 72 256 72c101.458 0 184 82.542 184 184a185.48 185.48 0 0 1-3.749 37.147l-.803 3.918 23.511 4.819.804-3.919A209.53 209.53 0 0 0 464 256c0-114.691-93.309-208-208-208zM416.459 346.119C383.862 404.027 322.379 440 256 440c-101.458 0-184-82.542-184-184 0-12.512 1.262-25.011 3.75-37.15l.803-3.918-23.511-4.819-.804 3.918A209.445 209.445 0 0 0 48 256c0 114.691 93.309 208 208 208 75.033 0 144.531-40.658 181.373-106.109l1.963-3.485-20.915-11.771-1.962 3.484z'></path><path d='M384 256l64 64 64-64zM0 256l64-64 64 64z'></path></symbol>
        <symbol viewBox='0 0 512 512' id='mui-svg-icon--tags'><path d='M472 239.2s-.1 0 0 0L282.1 48.1l-1.4-1.4h-.5c-7.5-7.2-16.1-10.9-27.1-11.1l-89.9-3.3-3.9-.1c-10.1.1-20 4.1-27.7 11.8l-27.1 27.2c7.4-6.6 16.6-10 26-10.1l3.8.1 89.8 3.3c11 .2 19.7 3.9 27.2 11.1h.5l1.4 1.4L443 268.1c10 10.8 10.7 28.2 0 38.9l29-28.9c10.6-10.7 10-28.1 0-38.9z'></path><path d='M428 282.5h.3L238.6 91.4l-1.3-1.4h-.3c-7.5-7.2-15.9-10.9-26.9-11.1L120 75.6l-4-.1c-9.2.1-18.2 3.4-25.6 9.8-.3.3-.7.6-1 .9l-1.2 1.2-44.3 44.5C35.8 140 32 150.8 32 161.4v.1l.1 3.8 5.9 87.9v1.9c1 7.9 4.2 15.6 9.6 22l5.1 4.9L239 470.4l2.8 2.8c10.7 9.4 27.1 9 37.3-1.3l13.1-13.2c.5-.4.9-.8 1.4-1.3l26.9-27c-.2.1-.3.2-.5.4l108.3-109.3c10.6-10.7 10.7-28.2-.3-39zm-317.4-143c6.6-4 14.3-6.3 22.6-6.3 23.9 0 43.4 19.4 43.4 43.4 0 8.3-2.3 16-6.3 22.6-7.6 12.5-21.3 20.8-37 20.8-23.9 0-43.4-19.4-43.4-43.4-.1-15.8 8.2-29.5 20.7-37.1z'></path></symbol>
    </svg>
</div>
/src/js/utils/animations.js
/src/less/animations.less

There are two ways to use animations. The first one:

<div class='-js-animation [ -hidden-by-default ]
    [ -fade-in
    | -fade-in-left
    | -fade-in-right
    | -fade-in-up
    | -fade-in-down
    | -fade-out
    | -fade-out-left
    | -fade-out-right
    | -fade-out-up
    | -fade-out-down ]'></div>
<script>
    Muilessium.UTILS.activateAnimation(document.querySelector('div'));
</script>

The second one:

<script>Muilessium.UTILS.animateElement(element, 'fade-in')</script>

Both ways have equal internal behavior and the names of the animations.

The first way is useful if the element will be animated once. The second one is useful if you need to animate one element multiple times.

Muilessium has a number of components listed below. Every component has a markup shown in example and this markup should be used as is, because some initializations of components are based on their markups.

All components are stored in Muilessium.FACTORY.componentsCache. If the main element of such component has an ID, the component can be obtained using Muilessium.get(componentName, id). For example:

// Let we have an accordion with id='my-accordion'.

const accordion = Muilessium.get('Accordion', 'my-accordion');

accordion.unfoldAllItems();

Components can have local events. Their behavior is similar to the main events observer.

All components should extend the BaseComponent and should be created by the Muilessium.FACTORY. See factory overview for more information. The BaseComponent have default methods:

  • initAria()
  • initControls()
  • initEvents()
  • addEvent()
  • addEventListener()
  • fireEvent()

and default fields:

  • domCache
  • state

Use them to keep the structure of the components.

Run "console.log(Muilessium.FACTORY.componentsCache.Checkbox[0])" on this page to see an example.

src/less/components/accordion.less

...

(!) Accordion - Use Muilessium.get('Accordion', id) to get it.
  • foldItem(index) - folds item with selected index
  • foldAllItems() - folds all items
  • unfoldItem(index) - unfolds item with selected index
  • unfoldAllItems() - unfolds all items
  • toggleItem(index) - unfolds item with selected index if it is folded and folds it otherwise
Requires svg-icon
  • Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
  • Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
Source code
  <ul class='mui-accordion' id='docs-only-id--accordion'>
      <li class='item'>
          <div class='title'>
              <div class='indicator'>
                  <svg class='mui-svg-icon'>
                      <use xlink:href='#mui-svg-icon--arrow-right'></use>
                  </svg>
              </div>
              <span>Lorem</span>
          </div>
          <div class='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
      </li>
      <li class='item'>
          <div class='title'>
              <div class='indicator'>
                  <svg class='mui-svg-icon'>
                      <use xlink:href='#mui-svg-icon--arrow-right'></use>
                  </svg>
              </div>
              <span>Lorem</span>
          </div>
          <div class='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
      </li>
  </ul>
src/less/components/badge.less

Badge can be used in buttons or collections. It has "-rounded" and "-new" variants those can be used together".

5 5 5 5
Source code
  <span class='mui-badge'>5</span>
  <span class='mui-badge -rounded'>5</span>
  <span class='mui-badge -new'>5</span>
  <span class='mui-badge -new -rounded'>5</span>
src/less/components/blockquote.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit? John Doe
Source code
  <blockquote class='mui-blockquote'>
      <span class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?</span>
      <span class='author'>John Doe</span>
  </blockquote>
src/less/components/breadcrumb.less

...

Variant: -slash-delimiter
Source code
  <div class='mui-breadcrumb'>
      <a class='link' href=''>category</a>
      <a class='link' href=''>subcategory</a>
      <a class='link' href=''>title</a>
  </div>
src/less/components/button-dropdown.less

...

(!) ButtonDropdown - Use Muilessium.get('ButtonDropdown', id) to get it.
  • openDropdown() - opens dropdown menu
  • closeDropdown() - closes dropdown menu
  • toggleDropdown() - opens dropdown menu if it is closed and closes it otherwise
Requires button
Requires dropdown-options
Requires shadow-toggle
Requires svg-icon
dropdown button  
Option 1
Option 2
Option 3
Option 4
Option 5
Source code
  <div class='mui-button-dropdown' id='docs-only-id--button-dropdown'>
      <a class='mui-button'>
          <span>dropdown button</span>
          <span> </span>
          <svg class='mui-svg-icon'>
              <use xlink:href='#mui-svg-icon--arrow-down'></use>
          </svg>
      </a>          
      <div class='mui-dropdown-options'>
          <div class='wrapper'>
              <div class='option'>Option 1</div>
              <div class='option'>Option 2</div>
              <div class='option'>Option 3</div>
              <div class='option'>Option 4</div>
              <div class='option'>Option 5</div>
          </div>
      </div>
      <div class='mui-shadow-toggle'></div>
  </div>
src/less/components/button-group.less

Should be used for grouping of buttons.

Requires button
Variant: -vertical
Variant: -or
Source code
  <div class='mui-button-group'>
      <button class='mui-button'>first</button>
      <button class='mui-button'>second</button>
      <button class='mui-button'>third</button>
  </div>
src/less/components/button.less

Button has a number of variants.

Variant: -small
Variant: -big
Variant: -dangerous
Variant: -ghost
Variant: -light-ghost
Source code
<a class='mui-button'>button</a>
src/less/components/button.less

...

Source code
  <a class='mui-button'>
      <svg class='mui-svg-icon'>
          <use xlink:href='#mui-svg-icon--check'></use>
      </svg>
      <span>button</span>
  </a>
  <a class='mui-button -icon'>
      <svg class='mui-svg-icon'>
          <use xlink:href='#mui-svg-icon--check'></use>
      </svg>
  </a>
src/less/components/button.less

...

Variant: -badge-on-top
Source code
  <a class='mui-button'>
      <span>button</span>
      <span class='mui-badge -rounded'>5</span>
  </a>
src/less/components/card.less

Its desirable to wrap card header text into h2-h6 tags for better navigation.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Source code
  <div class='mui-card _shadow-1'>
      <div class='header'>
          <h5>Lorem ipsum</h5>
      </div>
      <div class='content'>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
      </div>
  </div>
src/less/components/card.less

Same card, but with an image instead of traditional header. If an image used here only for presentation purposes, role='presentation' should be added to it manually.

Card header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Source code
  <div class='mui-card -with-image _shadow-1'>
      <div class='header'>
          <img class='mui-image -js-lazy-load' data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Card header'>
          <noscript>
              <img class='mui-image' src='https://placehold.it/800x600/4caf50/2e7d32' alt='Card header'>
          </noscript>
      </div>
      <div class='content'>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
      </div>
  </div>
src/less/components/carousel.less

You should use 3 or more slides. Interval in seconds can be setted using data-attribute. Use "-rounded" option to add default border-radius.

(!) Carousel - Use Muilessium.get('Carousel', id) to get it.
  • startRotation() - starts rotation
  • stopRotation() - stops rotation
  • rotateNext() - rotates carousel
  • rotatePrev() - rotates carousel
  • rotate(index) - rotates carousel to the selected slide
Requires image
Requires svg-icon
Source code
      <div class='mui-carousel -rounded' id='docs-only-id--carousel' data-interval='4s'>
          <ul class='mui-slides'>
              <li class='mui-slide'>
                  <img class='mui-image background -js-lazy-load' data-src='https://placehold.it/1024x768/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Slide 1'>
                  <noscript>
                      <img class='mui-image background' src='https://placehold.it/1024x768/4caf50/2e7d32/' alt='Slide 1'>
                  </noscript>
                  <div class='mui-slide-content -center'>
                      <div class='title'>1. Lorem ipsum dolor.</div>
                      <div class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ipsa.</div>
                  </div>
              </li>
              <li class='mui-slide'>
                  <img class='mui-image background -js-lazy-load' data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt=''>
                  <noscript>
                      <img class='mui-image background' src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Slide 2'>
                  </noscript>
                  <div class='mui-slide-content -content-left'>
                      <div class='title'>2. Lorem ipsum dolor sit amet.</div>
                      <div class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illo.</div>
                  </div>
              </li>
              <li class='mui-slide'>
                  <img class='mui-image background -js-lazy-load' data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt=''>
                  <noscript>
                      <img class='mui-image background' src='https://placehold.it/1200x800/2e7d32/1b5e20' alt='Slide 3'>
                  </noscript>
                  <div class='mui-slide-content -content-right'>
                      <div class='title'>3. Lorem ipsum dolor sit.</div>
                      <div class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aliquam.</div>
                  </div>
              </li>
          </ul>
          <div class='mui-carousel-controls'>
              <div class='prev'>
                  <svg class='mui-svg-icon -white'><use xlink:href='#mui-svg-icon--arrow-left'></use></svg>
              </div>
              <div class='next'>
                  <svg class='mui-svg-icon -white'><use xlink:href='#mui-svg-icon--arrow-right'></use></svg>
              </div>
          </div>
          <ul class='mui-carousel-indicators'>
              <li class='indicator'></li>
              <li class='indicator'></li>
              <li class='indicator'></li>
          </ul>
      </div>
src/less/components/checkbox.less

...

(!) Checkbox - Use Muilessium.get('Checkbox', id) to get it.
  • setCheckbox() - sets checkbox checked
  • unsetCheckbox() - sets checkbox unchecked
  • toggleCheckbox() - sets checkbox checked if it is unchecked and sets it unchecked otherwise
  • getState() - returns true if checkbox is checked and false otherwise
Event: update-state - Use Checkbox.addEventListener('update-state', () => { /* . . . */ }) to subscribe.
Requires svg-icon
Source code
  <div class='mui-checkbox' id='docs-only-id--checkbox'>
      <input type='checkbox' checked>
      <label>
          <span class='icon'>
              <span class='symbol'>
                  <svg class='mui-svg-icon'><use xlink:href="#mui-svg-icon--check"></use></svg>
              </span>
          </span>
          <span class='text'>Lorem ipsum.</span>
      </label>
  </div>
src/less/components/collection.less

Can be used with badges.

Requires badge*
  • Lorem ipsum dolor sit amet.
    1024
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    64
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source code
  <ul class='mui-collection'>
      <li class='item'>
          <div class='content'>Lorem ipsum dolor sit amet.</div>
          <div class='badge'>
              <span class='mui-badge -rounded'>1024</span>
          </div>
      </li>
      <li class='item'>
          <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
          <div class='badge'>
              <span class='mui-badge -rounded'>64</span>
          </div>
      </li>
      <li class='item'>
          <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </li>
  </ul>
src/less/components/containers.less

Container for content with limited width.

Source code
<div class='mui-content-container'></div>
src/less/components/containers.less

Container for creation of sticky footers. Should include all page content before page-footer.

Source code
<div class='mui-page-container'></div>
src/less/components/content-section.less

Section with optional background

Requires image*
Background
....
....
....
....
....
....
....
....
Source code
  <section class='mui-content-section'>
      <img class='mui-image background -js-lazy-load' data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background'>
      <noscript>
          <img class='mui-image background' src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Background'>
      </noscript>
      <div class='content'>
          ....<br>
          ....<br>
          ....<br>
          ....<br>
          ....<br>
          ....<br>
          ....<br>
          ....<br>
      </div>
  </section>
src/less/components/dropdown-options.less

This component should be used as a part of more complex components. See button-dropdown and select-dropdown components for more information.

Option 1
Option 2
Option 3
Option 4
Option 5
Source code
  <div class='mui-dropdown-options'>
      <div class='wrapper'>
          <div class='option'>Option 1</div>
          <div class='option'>Option 2</div>
          <div class='option'>Option 3</div>
          <div class='option'>Option 4</div>
          <div class='option'>Option 5</div>
      </div>
  </div>
src/less/components/header-logo.less

Should be used inside the page header.

Source code
  <div class='mui-page-header'>
      <div class='mui-header-logo'>
          <a class='link' href=''>
              <h1>Logo</h1>
          </a>
      </div>
  </div>
src/less/components/header-navigation.less

Should be used inside the page-header.

(!) HeaderNavigation - Use Muilessium.get('HeaderNavigation', id) to get it.
  • openNavigation() - opens mobile navigation
  • closeNavigation() - closes mobile navigation
  • toggleNavigation() - opens mobile navigation if it is closed and closes it otherwise
  • transformToMobile() - transforms navigation to mobile version
  • transformToDesktop() - transforms navigation to desktop version
Event: open-navigation - Use HeaderNavigation.addEventListener('open-navigation', () => { /* . . . */ }) to subscribe.
Event: close-navigation - Use HeaderNavigation.addEventListener('close-navigation', () => { /* . . . */ }) to subscribe.
Requires shadow-toggle
Source code
  <div class='mui-page-header'>
      <nav class='mui-header-navigation -mobile-version' id='docs-only-id--header-navigation'>
          <div class='mui-navigation-toggle -hamburger'>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--hamburger'></use>
              </svg>
          </div>
          <ul class='linkslist'>
              <li class='item'>
                  <a class='link' href=''>
                      <span>home</span>
                      <span class='mui-badge' aria-label='5 news'>5</span>
                  </a>
              </li>
              <li class='item'><a class='link' href=''>about</a></li>
              <li class='item'><a class='link' href=''>contacts</a></li>
          </ul>
          <div class='mui-shadow-toggle'></div>
      </nav>
 </div>
src/less/components/hero-header.less

...

Requires image
Requires svg-icon
Background

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!

Source code
  <div class='mui-hero-header'>
      <img class='mui-image background -js-lazy-load' data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background'>
      <noscript>
          <img class='mui-image background' src='https://placehold.it/1200x800/2e7d32/1b5e20' alt='Background'>
      </noscript>
      <div class='effects'></div>
      <div class='content'>
          <h2>Lorem ipsum dolor sit amet.</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!</p>
      </div>
      <div class='scrollicon'>
          <svg class='mui-svg-icon'>
              <use xlink:href='#mui-svg-icon--arrow-down'></use>
          </svg>
      </div>
  </div>
src/less/components/image.less

...

Example
Variant: -rounded
Example
Variant: -circle
Example
Source code
  <img class='mui-image -js-lazy-load' data-src='https://placehold.it/250x250/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example'>
  <noscript>
      <img class='mui-image' src='https://placehold.it/250x250/4caf50/2e7d32' alt='Example'>
  </noscript>
src/less/components/input.less

Has two parameters: regexp (/^(?:)$/ by default) and validation-delay (300ms by defaut). Use -js-no-validation class on mui-input to create input without validation.

(!) Input - Use Muilessium.get('Input', id) to get it.
  • validate() - validates input
  • isValid() - returns true if the input value is valid and false otherwise
  • getValue() - returns input value
Event: update-state - Use Input.addEventListener('update-state', () => { /* . . . */ }) to subscribe.
Username (min 3 characters, only letters allowed)
Source code
  <div class='mui-input-wrapper'>
      <label class='mui-input-label'>Username</label>
      <div class='mui-input-hint'>
          <span>Username (min 3 characters, only letters allowed)</span>
          <span class='mui-input-indicator'>
              <span class='validicon'>
                  <svg class='mui-svg-icon'>
                      <use xlink:href='#mui-svg-icon--check'></use>
                  </svg>
              </span>
              <span class='invalidicon'>
                  <svg class='mui-svg-icon'>
                      <use xlink:href='#mui-svg-icon--close'></use>
                  </svg>
              </span>
          </span>
      </div>
      <div class='mui-input' id='docs-only-id--input' data-regexp='^[a-zA-Z]{3,}$' data-validation-delay='1000'>
          <input type='text' placeholder='Your username'>
      </div>
  </div>
src/less/components/list.less

Ordered and unordered lists with a number of aditional styles. Use "-no-bullets" to remove bullets.

  • list item
  • list item
  • list item
  1. list item
  2. list item
  3. list item
  • list item
  • list item
    • list item
    • list item
      • list item
      • list item
    • list item
Source code
  <ul class='mui-list _separate-1'>
      <li class='item'>list item</li>
      <li class='item'>list item</li>
      <li class='item'>list item</li>
  </ul>
  <ol class='mui-list _separate-1'>
      <li class='item'>list item</li>
      <li class='item'>list item</li>
      <li class='item'>list item</li>
  </ol>
  <ul class='mui-list _separate-1'>
      <li class='item'>list item</li>
      <li class='item'>list item</li>
      <ul class='mui-list'>
          <li class='item'>list item</li>
          <li class='item'>list item</li>
          <ul class='mui-list _separate-1'>
              <li class='item'>list item</li>
              <li class='item'>list item</li>
          </ul>
          <li class='item'>list item</li>
      </ul>
  </ul>
src/less/components/marker.less
lorem ipsum
Source code
<span class='mui-marker'>lorem ipsum</span>
src/less/components/media-view.less

Use "-full-width" option to create media view with max-width=100%.

Requires image
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.
Source code
  <div class='mui-media-view'>
      <img class='mui-image -rounded -js-lazy-load' data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Lorem ipsum'>
      <noscript>
          <img class='mui-image' src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Lorem ipsum'>
      </noscript>
      <div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.</div>
  </div>
src/less/components/modal-window.less

Should be used for images. Shouldn't be used for interactive content.

(!) ModalWindow - Use Muilessium.get('ModalWindow', id) to get it.
  • openModal() - opens modal window
  • closeModal() - closes modal window
Event: open-modal - Use ModalWindow.addEventListener('open-modal', () => { /* . . . */ }) to subscribe.
Event: close-modal - Use ModalWindow.addEventListener('close-modal', () => { /* . . . */ }) to subscribe.
Requires shadow-toggle
Requires image
Requires svg-icon
Show big image
Image description
Source code
 <div class='mui-button' data-modal-opener='docs-only-id--modal-window'>Show big image</div>
 <div class='mui-modal-window' id='docs-only-id--modal-window'>
     <div class='window _shadow-3'>
         <div class='content -image'>
              <img class='mui-image -js-lazy-load' data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Image description'>
              <noscript>
                  <img class='mui-image' src='https://placehold.it/800x600/4caf50/2e7d32' alt='Image description'>
              </noscript>
         </div>
         <div class='closeicon'>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--close'></use>
              </svg>
         </div>
     </div>
     <div class='mui-shadow-toggle'></div>
 </div>
src/less/components/notification.less

Global notifications. There are two types of notifications - "banner" and "message". Banner should be used for static notifications for all users. Usually it is used at the top ot the page. Messages should be used as popup notifications (left and right). They are hidden by default. Use Muilessium.UTILS.animateElement to animate them with fade-in-* animations.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Source code
  <div class='mui-notification -message -left _shadow-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class='mui-notification -message -right _shadow-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class='mui-notification -banner'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
src/less/components/page-footer.less

Should be used with .mui-page-container for creating sticky footer.

Copyright © ...
Source code
<footer class='mui-page-footer'>Copyright © ...</footer>
src/less/components/page-header.less

...

Requires header-logo
Requires header-navigation
Source code
  <header class='mui-page-header'>
      <div class='mui-header-logo _left'>
          <a class='link' href=''>
              <h1>Logo</h1>
          </a>
      </div>
      <nav class='mui-header-navigation -mobile-version _right'>
          <div class='mui-navigation-toggle -hamburger'>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--hamburger'></use>
              </svg>
          </div>
          <ul class='linkslist'>
              <li class='item'>
                  <a class='link' href=''>
                      <span>home</span>
                      <span class='mui-badge'>5</span>
                  </a>
              </li>
              <li class='item'><a class='link' href=''>about</a></li>
          </ul>
          <div class='mui-navigation-toggle mui-shadow-toggle'></div>
      </nav>
  </header>
src/less/components/pagination.less

...

Requires svg-icon
Source code
  <div class='mui-pagination'>
      <button class='mui-button'>
          <svg class='mui-svg-icon'>
              <use xlink:href='#mui-svg-icon--arrow-left'></use>
          </svg>
      </button>
      <button class='mui-button'>1</button>
      <button class='mui-button'>2</button>
      <button class='mui-button'>3</button>
      <button class='mui-button'>4</button>
      <button class='mui-button'>
          <svg class='mui-svg-icon'>
              <use xlink:href='#mui-svg-icon--arrow-right'></use>
          </svg>
      </button>
  </div>
src/less/components/paragraph.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.

Source code
<p class='mui-p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.</p>
src/less/components/post.less

Components those should be used together for the posts on page.

Requires button
Requires tags-list
Published on September 29, 2018
Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.

read more
Source code
  <article class='mui-post _shadow-1'>
      <header class='mui-post-header'>
          <div class='title'>
              <a class='link' href=''><h4>Lorem ipsum dolor</h4></a>
          </div>
          <div class='information -grey-4'>
              <span>Published on</span>
              <span class='date'>September 29, 2018</span>
          </div>
      </header>
      <div class='mui-post-content'>
          <img class='mui-image -rounded -js-lazy-load' data-src='https://placehold.it/800x400/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example'>
          <noscript>
              <img class='mui-image' src='https://placehold.it/800x400/4caf50/2e7d32' alt='Example'>
          </noscript>
          <p class='mui-p _separate-1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.</p>
          <a href='' class='mui-button -ghost _separate-top-1'>
              <span>read more</span>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--arrow-right'></use>
              </svg>
          </a>
      </div>
      <footer class='mui-post-footer'>
          <div class='mui-tags-list' aria-label='Tags list'>
              <div class='mui-tag-wrapper -icon' role='presentation'>
                  <svg class='mui-svg-icon'>
                      <use xlink:href='#mui-svg-icon--tags'></use>
                  </svg>
              </div>
              <div class='mui-tag-wrapper'><a href='' class='mui-tag'>html</a></div>
              <div class='mui-tag-wrapper'><a href='' class='mui-tag'>css</a></div>
              <div class='mui-tag-wrapper'><a href='' class='mui-tag'>javascript</a></div>
              <div class='mui-tag-wrapper'><a href='' class='mui-tag'>gulp</a></div>
              <div class='mui-tag-wrapper'><a href='' class='mui-tag'>webpack</a></div>
          </div>
      </footer>
   </article>
src/less/components/progress-bar.less

...

(!) ProgressBar - Use Muilessium.get('ProgressBar', id) to get it.
  • setValue(newValue) - sets new value and animates the progress bar
  • getValue() - returns current value of the progress bar
Source code
  <div class='mui-progress-bar' id='docs-only-id--progress-bar' data-value='60'>
      <div class='indicator'></div>
      <div class='value'></div>
  </div>
src/less/components/progress-bar.less

Use "-align-center" option to set margin left/right to auto.

(!) ProgressBar - Use Muilessium.get('ProgressBar', id) to get it.
  • setValue(newValue) - sets new value and animates progress bar
  • getValue() - returns current value of the progress bar
Source code
  <div class='mui-progress-bar -radial' id='docs-only-id--radial-progress-bar' data-value='60'>
      <svg class='indicator' viewbox='0 0 100 100'>
          <circle class='background' cx='50' cy='50' r='34'></circle>
          <circle class='progress'   cx='50' cy='50' r='34'></circle>
      </svg>
      <div class='value'></div>
  </div>
src/less/components/radio.less

...

(!) Radio - Use Muilessium.get('Radio', id) to get it.
  • updateState(index) - makes input with selected index selected
  • getState() - returns index of the checked input
Event: update-state - Use Radio.addEventListener('update-state', () => { /* . . . */ }) to subscribe.
Requires input
Left or right?
Source code
  <div class='mui-input-wrapper'>
      <div class='mui-input-label'>Left or right?</div>
      <div class='mui-radio' id='docs-only-id--radio' data-name='docs-only-name--radio'>
          <input value='left' checked>
          <label>
              <span class='icon'></span>
              <span class='text'>Left</span>
          </label>
          <input value='right'>
          <label>
              <span class='icon'></span>
              <span class='text'>Right</span>
          </label>
      </div>
  </div>
src/less/components/ribbon.less

Ribbons whould be placed inside ribbon-wrappers or another containers with position=relative.

Source code
  <div class='mui-ribbon-wrapper'>
      <div class='mui-ribbon -classic -top -left' aria-hidden='true'>new</div>
      <div class='mui-ribbon -classic -top -right' aria-hidden='true'>new</div>
      <div class='mui-ribbon -classic -bottom -left' aria-hidden='true'>new</div>
      <div class='mui-ribbon -classic -bottom -right' aria-hidden='true'>new</div>
  </div>
  <div class='mui-ribbon-wrapper'>
      <div class='mui-ribbon -bookmark -left' aria-hidden='true'>new</div>
      <div class='mui-ribbon -bookmark -right' aria-hidden='true'>new</div>
  </div>
src/less/components/scroll-fix.less

Internal component.

src/less/components/select-dropdown.less

Data-id attribute should be used to select id and name attributes for the hidden html select element. Should be used with label for better accessibility.

(!) SelectDropdown - Use Muilessium.get('SelectDropdown', id) to get it.
  • getSelectedIndex() - returns index of the selected item
  • openDropdown() - opens dropdown menu
  • closeDropdown() - closes dropdown menu
  • toggleDropdown() - opens dropdown menu if it is closed and closes it otherwise
  • updateState(newIndex = 0) - selects item with selected index
  • getState() - returns index of the selected item
Event: update-state - Use SelectDropdown.addEventListener('update-state', () => { /* . . . */ }) to subscribe.
Requires input
Requires dropdown-options
Requires shadow-toggle
Requires svg-icon
Red
Green
Blue
Orange
Source code
  <div class='mui-input-wrapper'>
      <label class='mui-input-label'>Select color</label>
      <div class='mui-select-dropdown' id='docs-only-id--select-dropdown'>
          <div class='select'>
              <div class='state'></div>
              <div class='mui-dropdown-options _shadow-1'>
                  <div class='wrapper'>
                      <div class='option -selected' data-value='red'>Red</div>
                      <div class='option' data-value='green'>Green</div>
                      <div class='option' data-value='blue'>Blue</div>
                      <div class='option' data-value='orange'>Orange</div>
                  </div>
              </div>
          </div>
          <div class='mui-shadow-toggle'></div>
          <div class='icon'>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--arrow-down'></use>
              </svg>
          </div>
      </div>
  </div>
src/less/components/shadow-toggle.less

This component should be used as part of more complex components. See button-dropdown, select-dropdown, header-navigation components for more information.

src/less/components/spinner.less

...

Requires svg-icon
Source code
  <div class='mui-spinner' role='presentation'>
      <svg class='mui-svg-icon'>
          <use xlink:href='#mui-svg-icon--spinner'></use>
      </svg>
  </div>
src/less/components/spoiler.less

...

(!) Spoiler - Use Muilessium.get('Spoiler', id) to get it.
  • open() - opens spoiler
  • close() - closes spoiler
  • toggle() - opens spoiler if it is closed and closes it otherwise
spoiler

ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.

Source code
  <div class='mui-spoiler' id='docs-only-id--spoiler'>
      <div class='title'>spoiler</div>
      <div class='content'>
          <p class='mui-p'>ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.</p>
      </div>
  </div>
src/less/components/svg-icon.less

...

Requires svg-sprite
Source code
      <svg class='mui-svg-icon'>
          <use xlink:href='#mui-svg-icon--check'></use>
      </svg>
src/less/components/svg-sprite.less

...

Source code
  <div class='mui-svg-sprite'>
      <!--
      <svg>
          <symbol>...</symbol>
      </svg>
      -->
  </div>
src/less/components/table.less

...

Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Variant: -striped
Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Source code
  <table class='mui-table'>
      <tr class='header'>
          <th>Table</th>
          <th>Header</th>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum dolor sit</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum dolor sit</td>
      </tr>
  </table>
src/less/components/tabs.less

Horizontal tabs

(!) Tabs - Use Muilessium.get('Tabs', id) to get it.
  • goToPreviousTab() - switches component to next tab
  • goToNextTab() - switches component to previous tab
Tab 1 Lorem ipsum dolor sit amet
Tab 2 Lorem ipsum dolor
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.
Source code
  <div class='mui-tabs' id='docs-only-id--tabs'>
      <div class='labels'>
          <div class='label'>Tab 1 Lorem ipsum dolor sit amet</div>
          <div class='label'>Tab 2 Lorem ipsum dolor</div>
          <div class='label'>Tab 3</div>
      </div>
      <div class='tabs'>
          <div class='tab'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!</div>
          <div class='tab'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!</div>
          <div class='tab'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.</div>
      </div>
  </div>
src/less/components/tags-list.less

...

Requires svg-icon
Source code
      <div class='mui-tags-list' aria-label='Tags list'>
          <div class='mui-tag-wrapper -icon' role='presentation'>
              <svg class='mui-svg-icon'>
                  <use xlink:href='#mui-svg-icon--tags'></use>
              </svg>
          </div>
          <div class='mui-tag-wrapper'><a href='' class='mui-tag'>html</a></div>
          <div class='mui-tag-wrapper'><a href='' class='mui-tag'>css</a></div>
          <div class='mui-tag-wrapper'><a href='' class='mui-tag'>javascript</a></div>
          <div class='mui-tag-wrapper'><a href='' class='mui-tag'>gulp</a></div>
          <div class='mui-tag-wrapper'><a href='' class='mui-tag'>webpack</a></div>
      </div>
src/less/components/textarea.less

Label should be used for better accessibility.

(!) Textarea - Use Muilessium.get('Textarea', id) to get it.
  • getValue() - returns the value of the textarea
Event: update-state - Use Textarea.addEventListener('update-state', () => { /* . . . */ }) to subscribe.
Requires input
Source code
  <div class='mui-input-wrapper'>
      <label class='mui-input-label'>Your message</label>
      <div class='mui-textarea' id='docs-only-id--textarea'>   
          <textarea placeholder='Print your message here'></textarea>
      </div>
  </div>
Can I use Muilessium in my project?
Yes, Muilessium is distributed under the MIT license and you can use it in your projects for free.
What browsers are supported?
All modern evergreen browsers.
Can I join the project development?
Yes. I'll be glad to see new developers here. You can start from the issues page on GitHub.