Navigationback to top
Colorsback to top
Backgrounds:
This sentence has a couple of highlighted words.
Text:
Mustra maps all colors to a LESS variable, and comes with a vibrant default theme, and some basics covered for you.
There are helper classes to color backgrounds (.bg-[variable]) and text (.text-[variable]) respectively.
Font familiesback to top
'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
Normal
a b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0
Black (900)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0
By default Mustra uses the designated system font, and if that fails it falls back on the tried and true sans-serif font stack.
Titlesback to top
This is a pretitle element.
Your main, section title.
Section titles
Often used as page headings. This style is also mapped to h1 and .h1.
They have no top margin, so you don't have to pay attention to margin collapsing. Utilize the spacing classes accordingly.
This example illustrates a title accompanied with a pre-title element which is completely optional.
This is a standard title.
Titles
Use them as titles for your text. This style is also mapped to h2 and .h2.
A Subtitle
Subtitles
This style is also mapped to .h3 and is best used within text for more granular separation.
Breadcrumbsback to top
Breadcrumbs
Breadcrumbs are responsive and on smaller screens items are moved to the dropdown menu.
Textual elementsback to top
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Style for leading, and standard body copy.
- Standard link
- Standard underlined link
- Quiet link
- UI link
- Bold text with
strong - Bold text with class
.strong - Uppercase text
- 1234567890
Inline styles
Styles for various often-used inline elements.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Styles for text sizing, enforces font size. Classes are .text-lg, .text-md, .text-base (for reset), .text-sm and .text-xs.
It's important to note that the text sizing classes shouldn't be included into other classes as they contain the !important flag.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quiet text, enforces color and can be combined with other elements.
Left-Aligned text.
Center-Aligned text.
Right-Aligned text.
Text flow control. It's important to note that the text align classes shouldn't be included into other classes as they contain the !important flag.
Some really long sentence that will be truncated.
Text overflow control. Just wrap your text into .text-truncate element.
Note: Please note that in some cases, due the specific browser's width calculations, this solution might not work as expected.
Listsback to top
- List item 1
- List item 2
- List item 2.1
- List item 3
- List item 1
- List item 2
- List item 2.2
- List item 3
Default unordered and ordered lists.
- List item 1
- List item 2
- List item 2.1
- List item 3
Unstyled lists.
- Inline list item 1
- Inline list item 2
- Inline list item 3
- Right-aligned inline list
- Inline list item 2
- Inline list item 3
- Inline-Block list item 1
- Inline-Block list item 2
- Inline-Block list item 3
- Inline list item 1
- Inline list item 2
- Inline list item 3
Inline lists.
The two classes provided, while almost identical .list-inline is meant for inline content, such as text, links and such, while .list-inline-block is meant for inline-block flowing content such as buttons, also useful when you don't want to break the list item's content into lines.
There is also a possiblity to separate list items with dots.
Formsback to top
Default form styles
Default/vertical/stacked form styles with label, field and form text.
Horizontal form
Form with labels and fileds on one line. The layout utilizes the existing grid system for the columns, all you need to do is to add a class .form-horizontal to the form or any other parent wrapper element for the proper alignment of the labels.
Form inline
Form with inline labels and fileds (everything is on one line).
Simply add .form-inline to the form or any other parent wrapper element.
Various form control sizes
Form validation
Validation errors and messages.
Just add class .has-success or .has-danger to the .form-group or any other wrapper element.
Input groups
Easily extend form controls by adding text or buttons on either side of textual inputs.
Buttonsback to top
Various button flavors and sizes.
Tablesback to top
| Table footer. | |||
| Header | Header | Header | Header |
|---|---|---|---|
| Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell |
| Fig. 3.4. | |||
| Header | Header | Header | Num. |
|---|---|---|---|
| Cell | Cell | Cell | $19.99 |
| Cell | Cell | Cell | $123.45 |
Tables
Tables come in two formats: standard tables (e.g. when you need to present tabular data in longform text), and datatables (e.g. when you want to present something spreadsheet-like).
The .txtr class can be pretty useful within tables when dealing with numbers and you need the figures to line up.
Boxesback to top
Boxes
Boxes in various flavors and sizes. Use them when you need to frame some content. Use the .box-nopadding class in case you want to nest a .grid layout within it.
By default boxes don't have any margins.
Messagesback to top
Messages
Global message styles. Absolutely positioned to the top of the screen by default. In case you need more layout control feel free to use a .grid layout instead of .message-content.
In case you want them to be dismissable, add a class .animated along with an exit class from animate.css within a data-dismissable attribute.
Media objectback to top
Media value.
Anything can go in here.
The media element should be used any time you need a key-value pair in a visual sense. This includes a comment+avatar combo, literal key-value pairs (e.g. two-column tables), etc.
The key element accepts an image, or text, while the body acts as a standard container. Media element uses flexbox for layout.
Tabsback to top
Collapse & Accordionback to top
Bootstrap collapse implementation.
Bootstrap collapse implementation for accordion.
Dropdownsback to top
Simple Bootstrap dropdown implementation.
Overlaysback to top
Custom overlay styles based on Bootstrap modal library.
Drawersback to top
Custom drawer with support for left (.drawer-left and by default), and right (.drawer-right)) placement.
State-Content Togglerback to top
Use this component when you need to have a trigger element (e.g. a button) that toggles the visibility of another element's contents (e.g. a list of things), and you also need to change the toggler element's content to reflect the state of the target element.
Carouselsback to top
Single slide carousel.
Multiple slides carousel.
Full width & height carousel (relative to the relatively positioned parent container).
Suitable for full width or height page sections like hero/intro blocks.
Flexbox gridback to top
The flexbox-based grid uses the same syntax as the Bootstrap's grid, and supports the same features.
The main thing that makes it a better alternative to the old float-based grid is the fact that it's nestable. Other features that set it apart are modern properties that come with flexbox layout model, such as easy vertical centering through .top/middle/bottom-XX classes, ability to define starting points for the grid (we used to revert floats before) through .left/center/right-XX.
Find out more at flexboxgrid.com.
Helper classesback to top
Clearfix
The .clearfix class is a standard one you might have seen before. Add it to a parent or import it into another class in order to clear the parent element of floats.
Content visibility
You can control element's visibility using the following classes:
.no-showwhich positions the element outside the viewport with absolute positioning, but doesn't applydisplay: noneto it..hiddenhides the element withdisplay: none..fadecoupled with.inhides and shows an element using theopacityproperty (has a transition effect by default as well).
Display
You can force an element's display with literal classes .display-block, .display-inline-block, and .display-inline.
Floats
Mustra uses the following classes to horizontally align elements using floats: .left, .right.
The .center class is used to center a block-level element horizontally, although it requires that the element has a set width.
Centering blocks vertically
There are two classes available for you to center a block:
.block-centerwhich will center a block both vertically and horizontally, and.block-vcenterwhich will only center a block vertically.
These classes require a relatively positioned parent, and for this you can use the utility .position-relative class.
Centering content vertically
There are three classes used to center inline content vertically, intended mostly for use within table cells:
.valign-top.valign-bottom.valign-center
Responsive figures
In order to prevent figures like images and objects overflow their containers, apply one of the following classes: .contain, or img-responsive.
Both classes do the same thing, the first one is specific to Mustra, while the latter is following Bootstrap's convention.
Responsive videos
In order to maintain aspect ratio of embedded videos, maps, etc. apply .responsive-embed to its container. This class by itself will make the embed a square. There are two additional classes by default mainly menat to be used for videos:
.responsive-embed-16-9, and.responsive-embed-4-3
Margins
Mustra supplies you with necessary spacing classes your can use to preserve consistency in your UIs.
The basic formula is: .m[direction]-[size] where the direction can be l (left), t (top), r (right), or b (bottom), and sizes are: xs, sm, base, md, lg, xl, and type.
The specific sizing suffix type uses the typographic em value for size (1em by default) and is meant to be used when you e.g. want to insert a custom UI element within longform text, but you want to keep the flow natural.
It's important to note that these classes should not be imported into other classes, as they have the !important flag. They are meant to be used to overcome defaults on a case-by-case basis. In order to keep spacing consistent throughout your UI you should rely on the default spacing variables, and expand from there if you need to.
Colors
All of the supported coloring options are available to you to use in order to override the current value, for both backgrounds and text:
| Text | Backgrounds | Result |
|---|---|---|
.text-light |
.bg-light |
Inverted color (white) |
.text-default |
.bg-text |
Default text color |
.text-primary |
.bg-primary |
Primary color |
.text-sucess |
.bg-sucess |
Sucess color |
.text-danger |
.bg-danger |
Danger color |
.text-warning |
.bg-warning |
Warning color |
.text-shaded |
.bg-shaded |
Shaded color |
These are the helper classes available in Mustra by default. They are extremely useful for fine-grained control of your UI, and when writing a special class isn't possible or optimal.
The MIT License (MIT)
Copyright 2016 Sprawsm doo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.