VoceCSS (version 2)

Typography

Typography deals with default styles for headings, paragraphs, block-quotes, lists, and code elements.

Headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem
H6 Title 1.6rem
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget faucibus felis. Fusce interdum magna eu dictum varius. Proin vulputate tincidunt lectus, a ornare nibh porta vel. Nam sem ligula, tincidunt at accumsan eget, scelerisque auctor magna. Nam scelerisque risus erat, eu ornare neque aliquet sit amet. Vestibulum vitae mi et ex dignissim ultricies.

Morbi molestie, neque eu ultrices consectetur, elit magna maximus elit, vel laoreet risus nisi quis felis. Aliquam eu urna lobortis, efficitur ex non, ultricies nisi. Integer lacinia quam vitae eros malesuada ornare. Donec pharetra mi dui, in sagittis massa tempus non. Cras tellus ante, feugiat ac diam vel, fermentum laoreet elit.

Semantic Text Elements
I18N <abbr>
Bold <strong> <b>
Citation <cite>
Hello World! <code>
Deleted <del>
Emphasis <em>
Italic <i>
Ctrl + S <kbd>
Highlighted <mark>
Strikethrough <s>
Sample <samp>
Text Subscripted <sub>
Test Superscripted <sup>
<time>
Underline <u>
x = y + 2 <var>
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Source
Lists
  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  3. list item 3
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3

Tables

Tables deals with default styles for tables and data sets.

Label 1 Label 2 Label 3 Label 4
Blueberry Muffin 250 Lots of Yummy 123 Main Street USA
Blueberry Muffin 250 Lots of Yummy 123 Main Street USA
Blueberry Muffin 250 Lots of Yummy 123 Main Street USA
Blueberry Muffin 250 Lots of Yummy 123 Main Street USA

Add the class table to any <table> element. The class will add padding, border, and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.

Use the class selected to make <tr> element highlighted.

Buttons

Buttons include simple button styles for actions in different types and sizes.

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.

Add the class disabled or the attribute disabled for a disabled button.

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.

Icons with the class icon can be correctly rendered in each button size.

Button Groups

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

Forms

Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout.

To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.

The name is invalid.

The email is available.

The option is invalid.

The option is available.

For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.

input groups
slack.com/
@slack.com
slack.com/
slack.com/
@slack.com
slack.com/
slack.com/
@slack.com
slack.com/

If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.

Labels

Labels are formatted text tags for highlighted, informative information.

default label primary label success label danger label

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.

Media

Media include responsive images, figures and video classes.

Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

LoremPixel provides stock photos

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add .video-responsive-4-3 for 4:3 ratio video container or .video-responsive-1-1 for 1:1 ratio.

Flexbox Grid

Layout involves a flexbox-based responsive grid system with 12 columns.

col-12 (100%)
col-9 (75%)
col-6 (50%)
col-3 (25%)

Add the class columns to a container with the class container. And add any element you want with classname column inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

And you can add the class col-gapless to have gapless columns.

col-6 (gapless)
col-6 (gapless)

By default, VoceCSS grid has multi-line flexbox enabled. You can add the class col-oneline to columns to make all its child columns positioned in the same single row.

col-8
col-8

Responsive Grid

col-md-6
col-md-3
col-md-3
col-sm-6
col-sm-3
col-sm-3
col-xs-6
col-xs-3
col-xs-3

VoceCSS provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12], .col-lg-[1-12] and .col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

For hiding elements on specific viewport sizes, there are classes .hide-xs, .hide-sm, .hide-md, .hide-lg and .hide-xl available.

Avatars

Avatars are user profile pictures.

Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

Tooltips

Tooltips provide context information labels that appear on hover and focus.

Tooltip component is built entirely in CSS.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

Badges

Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

Signs

Signs are used to show alert or information to users.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add a container element with the class sign. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

And you can add the class sign-primary, sign-success or sign-danger for additional sign colors.

Modals

Modals are flexible dialog prompts.

Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.

VoceCSS does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container

modal sizes

Add the class modal-sm for a smaller modal dialog.

You want to see a Modal?

Cards

Cards are flexible content containers.

Microsoft

Software and hardware
Empower every person and every organization on the planet to achieve more.

Apple

Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.

Google

Software and hardware
Organize the world’s information and make it universally accessible and useful.
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.

Apple

Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.

Google I/O

An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer. The card-image can be placed in any position.

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

<!-- clear float -->
<div class="clearfix"></div>
<!-- float: left and right -->
<div class="float-left"></div>
<div class="float-right"></div>
<!-- position: relative, absolute and fixed -->
<div class="rel"></div>
<div class="abs"></div>
<div class="fixed"></div>
<!-- centered block -->
<div class="centered"></div>
<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
<div class="mt-10"></div>
<div class="mt-5"></div>
<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
<div class="pt-10"></div>
<div class="pt-5"></div>

Display utilities are used for display and hidden things.

<!-- display: block; -->
<div class="block"></div>
<!-- display: inline; -->
<div class="inline"></div>
<!-- display: inline-block; -->
<div class="inline-block"></div>
<!-- display: flex; -->
<div class="flex"></div>
<!-- display: inline-flex; -->
<div class="inline-flex"></div>
<!-- display: none; -->
<div class="hide"></div>
<!-- visibility: visible; -->
<div class="visible"></div>
<!-- visibility: hidden; -->
<div class="invisible"></div>
<!-- hide text contents -->
<div class="text-hide"></div>

Text utilities are used for text alignment, styles and overflow things.

<!-- left-aligned text -->
<div class="text-left"></div>
<!-- center-aligned text -->
<div class="text-center"></div>
<!-- right-aligned text -->
<div class="text-right"></div>
<!-- justified text -->
<div class="text-justify"></div>

<!-- Lowercased text -->
<div class="text-lowercase"></div>
<!-- Uppercased text -->
<div class="text-uppercase"></div>
<!-- Capitalized text -->
<div class="text-capitalize"></div>

<!-- Normal weight text -->
<div class="text-normal"></div>
<!-- Bold text -->
<div class="text-bold"></div>
<!-- Italicized text -->
<div class="text-italic"></div>

<!-- Overflow behavior: display an ellipsis to represent clipped text -->
<div class="text-ellipsis"></div>
<!-- Overflow behavior: truncate the text -->
<div class="text-clip"></div>
<!-- Text may be broken at arbitrary points -->
<div class="text-break"></div>

Shape utilities are used for change element shapes.

<!-- rounded element -->
<div class="rounded"></div>
<!-- circle element -->
<div class="circle"></div>

A Divider is used for separating elements.

<!-- divider element -->
<div class="divider"></div>

Loading indicator is used for loading or updating. Also, you can add the class loading to buttons for loading status.

<!-- loading element -->
<div class="loading"></div>
Back to Top