github twitter email rss
Lithium CSS Guide
Mar 3, 2015
4 minutes read

#Page

usage: #lia-body .CommunityPage .lia-body #lia-body .lia-page

a) CommunityPage b) ForumPage c) BlogPage d) TkbPage e) IdeaPage

usage: .min-width .lia-content

#List 1.table

a) lia-list-wide >3col with header

b) lia-list-slim >2col without header

c) lia-list-standard, lia-list-standard-inline >simple list

d) lia-list-statistics >2col for statistics

2.grid

usage: #lia-body .lia-content table.lia-list-wide td >table td global

a) lia-date-cell-primary >normally use with lia-date-cell-text

b) lia-date-cell-secondary >normally use with lia-date-cell-date lia-date-cell-ineger

c) lia-date-cell-tertiary >normally use with lia-date-cell-icon lia-date-cell-checkbox

#button

a) lia-button >main button class

b) lia-button-group >group button

c) lia-button-primary lia-button-secondary >use with most important / normal important

d) lia-button-interstitial-primary lia-button-interstitial-secondary >less important action with primary / secondary colors

e) lia-button-Submit-action lia-button-Cancel-action lia-Preview-action lia-button-Reset >detail

#Feedback ignore

#Effect

a) lia-effect-highlight

#Labels a) lia-label >usually a lia-list-standard-inline before a list

b) lia-label-tabs-sort >before a lia-tabs-sort

#Tooltip a) lia-panel-tooltip >just tooltip

#Tabs a) lia-tabs-standard-wrapper >main class of tabs

b) lia-tabs-standard >common class of tabs

c) lia-tabs-secondary >sub-tabs on current tab

d) lia-tabs-active lia-tabs-inactive lia-tabs-sort >detail

#Page/Pagination a) lia-paging-full-wrapper >wrapper of Pagination

b) lia-paging-full lia-paging-full-left >display pagination on right side / left side

c) lia-paging-full-pages lia-paging-page-previous lia-paging-page-next lia-paging-page-ellipses > page number / previous page / next page / ellipses

d) lia-paging-page-active lia-paging-page-first lia-paging-page-last >page active / first page number / last page number

e) lia-paging-page-link lia-paging-page-arrow > within lia-paging-page-previous lia-paging-page-next

#Menu a) lia-menu-action >main class of menu

b) lia-menu-bar lia-menu-bar-top lia-menu-bar-bottom >a combination of buttons,menus,paging component / if has top / bottom bar

c) lia-menu-navigation lia-menu-dropdown-items >dropdown menu / dropdown menu items

d) lia-menu-bar-buttons > the buttons in menu bar

e) lia-decoration-border-menu-bar lia-decoration-border-menu-bar-top lia-decoration-border-menu-bar-bottom lia-decoration-border-menu-bar-cotent >provide additional border class

#Autocomplete

a) lia-autocomplete >suggestions

b) lia-autocomplete-loader >loading image for autocomplete functionsimg

#Control/Link

a) lia-link-navigation >all link

b) lia-view-filter lia-view-filter-ascending lia-view-filter-descending > sorting or filter

d) lia-menu-item lia-view-all lia-link-disabled >menu item / view all / disabled

#Form

a) lia-form lia-form-tags lia-form-horizontal lia-form-vertical lia-form-inline >applied to all <form>/ horizontal /vertical /inline

b) lia-form-submit lia-form-footer >form action buttons / usually action buttons in

c) lia-form-row lia-form-row-reverse-label-input >row / row that label on the right

d) lia-form-label-wrapper lia-form-label lia-form-label-required lia-label-required-mark >form label wrapper / form label / form label required / marker required label

e) lia-form-input-wrapper lia-form-type-text lia-form-type-password lia-form-type-file >input wrapper / text input / password input / file input

f) lia-form-radio-group lia-form-fieldset-last >radio button in field / last fieldset

g) lia-form-field-error lia-form-error-text lia-form-validation-help-text >style input error / error text below input field / help text below input field

#Panel

a) lia-panel >basic panel

b) lia-decoration-border lia-decoration-border-top lia-decoration-content lia-decoration-bottom >decoration border

c) lia-panel-heading-bar lia-panel-heading-bar-wrapper lia-panel-heading-bar-title >title of panel / wrapper of heading bar / title text

d) lia-panel-content lia-panel-content-wrapper >content of the panel / wrapper of content

e) lia-panel-standard lia-panel-section >default panel class / separate panel section

#Message

a) lia-panel-message >common class of message

b) lia-message-board lia-message-blog lia-message-idea >forum / blog / idea

c) lia-panel-message-root lia-panel-message-content lia-panel-message-first >root message of a thread / message content / first message of multi-page thread

d) lia-mesage-actions lia-message-actions-secondary >primary action on message / secondary action on message

e) lia-message-body lia-message-body-content >message body / messge body content

f) lia-message-author lia-message-heading lia-message-footer lia-message-editor >author / heading / footer / editor

g) lia-message-labels lia-message-moderation lia-message-notify lia-message-options lia-message-dates >labels / Change Status / for moderator link / option menu / posting date

h) lia-message-read lia-message-unread lia-message-subject lia-message-subject-status lia-message-tags lia-message-statistics > read idea / unread idea / message subject / subject status(idea) / tags in footer / statistics in footer

i) lia-panel-intermission lia-message-posted-on lila-message-edited-on >blank between lia-panel-message / posting information / edit information

j) lia-message-view-style-collapsed lia-message-view-style-expanded >(idea only) collapsed view / expanded view

#Kudos

a) lia-button-image-kudos-wrapper lia-button-image-kudos >wrapper of kudos / kudos itself

b) lia-button-image-kudos-enabled lia-button-image-kudos-disabled lia-button-image-kudos-frozen lia-button-image-kudos-count lia-button-image-kudos-give >kudos enabled / disabled / frozen / count kudos / click to give kudos

c) lia-button-image-kudos-kudoed lia-button-image-kudos-not-kudoed lia-button-image-kudos-has-kudos >kudoed / not kudoed / has others kudos

#User/Avatar a) lia-user-info-group > top-level class of user info group

b)lia-user-avatar lia-user-attributes lia-user-name lia-user-rank lia-user-leaderboard-rank >user avatar / attributes(user-name rank leaderboard-rank

c) lia-user-kudos-weight lia-user-kudos-count >kudos weight on leaderboards / kudos count on leaderboards


Back to posts


comments powered by Disqus