CoManD Frontend

Download

Download Frontend* current version for free

Download
*includes: this html-demopage, framework-css, icon-font, comand-ui

Introduction

The frontend-framework of CoManD uses strictly semantic correct HTML. So it is automatically valid, accessible, perfect readable for search engines and very easy to style and modify. The framework.css itself may not be edited to ensure compatbility with further updates. Beside default behaviours and styles for typography and rich media, the frontend-framework already contains styled user-interface elements, a flexible and responsive grid and a free to use iconfont. Nevertheless, it does not require a lot of CSS (compared to other frontend-frameworks) to improve performance. It also includes an optional, jQuery-based UI-kit (CoManD-UI).

Table of contents


Toggle entire HTML on page

Typography

Headlines

Headline 1

Click to copy

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Paragraphs (continous text)

This is a short paragpaph

This is continous text within a paragraph with text-align left (which is default). Longer texts should always be formatted with a <p>-tag. It can contain different further tags, i.e. <br />, <a>, <span>, <strong>, <em>, <div>. An additional <p>-tag inside a surrounding <p>-tag is not allowed. It should be also avoided to place to <br /> after each other (use a <p> instead), because another paragraph is required if you want to create a blank line (which is no real line, but a margin). Of course a paragprah may not contain tags for headlines, tables or forms.

This is continous text within a paragraph with text-align justify. Longer texts should always be formatted with a <p>-tag. It can contain different further tags, i.e. <br />, <a>, <span>, <strong>, <em>, <div>. An additional <p>-tag inside a surrounding <p>-tag is not allowed. It should be also avoided to place to <br /> after each other (use a <p> instead), because another paragraph is required if you want to create a blank line (which is no real line, but a margin). Of course a paragprah may not contain tags for headlines, tables or forms.

Lists

Unordered list

Ordered list

  1. List item
  2. List item
    • List item level 2
    • List item level 2
  3. List item

Definition list

Definiton term:
Defintion data
Definiton term:
Defintion data
Definiton term:
Defintion data


Miscellaneous

Emphasized

Emphasized text

Strong

Strong text

Superior/Subscript

textsuperior

textsubscript

Horizontal row


Tables

Table as large as its content

Table head Table head Table head Table head
Table data Table data Table data Table data
Table data Table data Table data Table data
Table data Table data Table data Table data

Table as large as possible/as its parent

Table head Table head Table head Table head
Table data Table data Table data Table data
Table data Table data Table data Table data
Table data Table data Table data Table data


RichMedia

Images

Logo CoManD
Caption for image without border
Logo CoManD
Caption for image with border

User Interface

Messages

System messages as large as their content

Error message

Advice message

Success message

System messages as large as possible/as their parent

Error message

Advice message

Success message

Buttons

<a>-tags as buttons (using class="button")

Button with label-text only Button with icon and label-text within a <span>

<button>-tags (for forms)

Forms

Legend


Grid

The grid handles a flexible and responsive adjustment to different screens and devices. It is based on a 12-partition. A width of "12" equals 100%; a width of "6" equals 50% etc.. In addition each row must contain subdivisions with a sum of 12 (otherwise the grid is broken). The widths for different screens and devices can be set with class="large-WIDTH" (i.e. large-12), class="medium-WIDTH" and class="small-WIDTH" to any element, so the the number of div-containers is reduced.

Examples for a 2-part grid

11
1
10
2
9
3
8
4
7
5
6
6

Examples for a 3-part grid

1
10
1
2
8
2
3
6
3
4
4
4
5
2
5

Examples for a 4-part grid

1
2
4
5
2
4
4
2
3
3
3
3

Example for grid changing by resolution

large: 3 - medium: 6 - small: 12
large: 3 - medium: 6 - small: 12
large: 3 - medium: 6 - small: 12
large: 3 - medium: 6 - small: 12

Examples for further grids (various parts)

12
3
2
5
2
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
Golden Ratio long
Golden Ratio short

Not-12-based-Grids

1/5
1/5
1/5
1/5
1/5
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11


Iconfont

The icons below are also already included within the frontend-framework/CMS. The font is based on a free to use icomoon-font, but a lot of custom styled icons were added. An icon can be used with class="icon-NAME". To edit or expand the font, you can overwrite and add icons individaul for each template inside the iconfont.css-file (CMS only).

add_image
add_images
address
all_messages
answer_message
arrow_down
arrow_left
arrow_right
arrow_up
attachment
bars
basic_settings
blocked
box
bug
cancel
cloud_download
configuration
contentpage
create
create_box
create_content
create_content_sub_level
create_modulepage
create_modules
create_navigation_entry
create_newspage
create_translation
create_user
create_user_group
custom_administration
delete
delete_image
donate
download
duplicate_content
edit
edit_box
edit_content
edit_contents
edit_images
edit_language
edit_modulepage
edit_modules
edit_navigation_entry
edit_newspage
edit_slideshowimages
edit_translations
edit_user
edit_user_groups
edit_users
facebook
female
files
film
filter
globe
google_analytics
googleplus
grid_templates
help
home
image
inbox
info
interfaces
key
link
link_content
link_file
link_website
linkedin
load_default_settings
localization
logon
logout
male
manage_design_templates
manage_files
manage_languages
manage_modules
manage_slideshow_images
manage_system
media_center
message_incoming
message_outgoing
message_read
messaging_system
module
modulepage
music
my_messages
my_profile
navigation_entry
new_message
newspage
not_visible
outbox
pointer
print
print_preview
read_message
register
remove
replace_image
save
search
security_settings
send_message
show_image
social_networks
square
system
time_currency_settings
time_settings
triangle_down
triangle_left
triangle_right
triangle_up
twitter
undo
update
upload
users
visible
warning
write_message
xing