The Sense/Net CSS Framework

•  
•  
•  
•  

• sensenet.com
• Forum
• Blog
• [1]
• [2]

• 100%
• 6.0
• Enterprise
• Community
• Planned

Overview

Sense/Net CSS Framework is a simple Stylesheet structure which helps you to create complex page layouts and designs very fast. This framework and the standard look-and-feel of our skins are based on JQuery UI CSS Framework. Every elements' design have to use the JQuery UI framework classes to achieve a themeable skin system. The system specific elements (illustrated via code snippets - following the structure of a page) are the following:

Generic elements

• .sn-hide - for hiding elements
• .sn-clearfix - expand the parent elements which contains floated children only
• .sn-floatleft - float the element to left
• .sn-floatright - float the element to the right
• .sn-floatnone - clear floating
• .sn-left - left aligned text
• .sn-right - right aligned text
• .sn-center - center aligned text
• .sn-error + JQUI - common style for error texts
• .sn-disabled + JQUI - common style for disabled elements
• .sn-last - last element in a sequence
• .sn-first - first element in a sequence

Layout

The layout is standard div-based layout with header and footer and specific columns. To create custom layouts for your own needs you are provided different layout templates noted with .sn-layout1 to .sn-layoutN. You are able to define your own layouts, but the default install comes with 10 different layout types (based on 960 Grid System), see more in Sense/Net Predefined Layouts.

Page layout elements

• .sn-body - body class to identify SN skin
• .sn-layout-container - wrapper of a layout
  • .sn-layout-head - header container
    • .sn-wrapper - container for grouped layout elements (see .sn-layout8 Sense/Net Predefined Layouts)
    • .sn-column - section/column indicator
    • .sn-columnN - number of the column
  • .sn-layout-foot - footer container

Example

<body class="sn-body sn-layout6">
    <div class="sn-layout-container ui-helper-clearfix">
        <div class="sn-layout-head ui-helper-clearfix">[...]</div>
        <div class="sn-columns ui-helper-clearfix">
            <div class="sn-column sn-column1">
                [...]
            </div> 
            <div class="sn-column sn-column2">
                [...]
            </div>
            <div class="sn-column sn-column3">
                [...]
            </div>
        </div>
        <div class="sn-layout-foot ui-helper-clearfix">[...]</div>
    </div>
</body>

Zones

Sense/Net Zones are the containers of Portlets.

Example

 <div class="sn-zone sn-zone-empty">
    <span class="sn-zone-head ui-widget ui-widget-header">Zone title</span>
    <div class="sn-zone-body ui-helper-clearfix">
        <div class="sn-drop-cue"></div>
    </div>
</div>

* sn-zone-empty class only appears on emtpy zones

Controls

Container controls

• .sn-panel - a simple container for other controls
• .sn-layoutgrid - container for the controls below to create portlet layouts without writing any markup
  • .sn-layoutgrid-head - header area
  • .sn-layoutgrid-foot - footer area
    • .sn-layoutgrid-column - one column of the layout in a layout grid
    • .sn-layoutgridN (N=number) - the Nth column in a layout
    • .sn-layoutgrid-first,.sn-layoutgrid-last - first and last column indicator

Example

Layout Grid Example (where jQuery UI classes are also used to give some form)

<div class="sn-layougrid">
    <div class="sn-layoutgrid-head">
        <div class="sn-panel">Layoutgrid Head</div>
    </div>
    <div class="sn-layoutgrid-columns ui-helper-clearfix">
        <div class="sn-layoutgrid-column sn-layoutgrid-first sn-layoutgrid1" style="width: 20%">
            <div class="sn-panel ui-widget ui-widget-content ui-corner-all">Left column</div>
        </div>
        <div class="sn-layoutgrid-column sn-layoutgrid2" style="width: 80%">
            <div class="sn-layoutgrid-column">
                <div class="sn-panel ui-widget ui-widget-content ui-corner-all">Right column top</div>
            </div>
            <div class="sn-layoutgrid-columns ui-helper-clearfix">
                <div class="sn-layoutgrid-column sn-layoutgrid-first sn-layoutgrid1" style="width:49.9%">
                    <div class="sn-panel ui-widget ui-widget-content ui-corner-all">Right column bottom left</div>
                </div>
                <div class="sn-layoutgrid-column sn-layoutgrid-last sn-layoutgrid2" style="width:50%">
                    <div class="sn-panel ui-widget ui-widget-content ui-corner-all">Right column bottom right</div>
                </div>
            </div>
        </div>
    </div>
</div>

The result in a web browser (without any other formatting):

File:LayoutGridExample.png

Sample layout grid

More Controls

• .sn-listgrid + JQGRID (JQUI) - class for listgrids (tables)
• .sn-toolbar - container class for the toolbar elements
  • .sn-toolbar-btngroup - a class for grouped buttons in a toolbar
  • .sn-toolbar-button + JQUI - a simple toolbar button
  • .sn-toolbar-splitbutton + JQUI - a split button
  • .sn-toolbar-separator - a separator element between toolbar buttons (if needed)
• .sn-tree + JSTree - tree control (the rest comes from JSTREE)

• .sn-pager - container for pager elements
  • .sn-pager-prev, .sn-pager-next, .sn-pager-first, .sn-pager-last - pagination buttons
  • .sn-pager-separator - separator element between the pager elements
  • .sn-pager-active - current page indicator class
  • .sn-pager-pagesize - class for page size dropdown (sets the number of elements on a page)

Form Containers

• .sn-form - main container for a form
  • .sn-inputunit - one unit of an input line
    • .sn-iu-label - label area of an input line
      • .sn-iu-title - title for an input
      • .sn-iu-desc - description for an input
    • .sn-iu-control - the real input element (listed below)

<div class="sn-form">
    <div class="sn-inputunit ui-helper-clearfix sn-required">
        <div class="sn-iu-label">
            <label for="iuitem1" class="sn-iu-title">Input unit Title</label><br />
            <label for="iuitem1" class="sn-iu-desc">Input unit Description</label>
        </div>
        <div class="sn-iu-control">
            <!-- Controls section -->
        </div>
    </div>
</div>

* sn-required only appears on compulsory fields

Form Elements (used mainly in input units)

• .sn-ctrl - generic class for input controls
• .sn-radio - a single radio button control
• .sn-radiogroup - a container for multiple radio buttons
• .sn-checkbox - a single checkbox control
• .sn-checkboxgroup - a container for multiple checkboxes
• .sn-ctrl-short,.sn-ctrl-medium,.sn-ctrl-long - 3 different horizontal size for controls on a form
• .sn-ctrl-compulsory - common class for compulsory controls
• .sn-ctrl-text + JQUI - common class for text based input controls
• .sn-ctrl-textarea - class for multiline text boxes
• .sn-ctrl-select - class for single select (later will be replaced with JQUI select)
• .sn-ctrl-selectlist - class for multiline select (later will be replaced with JQUI multiselect)
• .sn-ctrl-password, .sn-ctrl-password2 - classes for password fields (primary and 're-enter')
• .sn-ctrl-number - a common class for numeric fields
• .sn-ctrl-date - the date part of the DatePicker Field Control
• .sn-ctrl-time - the time part of the DatePicker Field Control

Navigation

Site menu

• .sn-menu - menu container class (usually this is the UL element)
  • sn-menu-last - last menu item
  • .sn-menu-X - numbered menu items depends on position of the element (.sn-menu-1 can be used as .sn-menu-first)
  • .sn-index-Y - the given Index property value of the current node
  • .sn-menu-active - currently active menu item
  • .sn-menu-traversal - class for traversal elements above the current item

Example

    <ul class="sn-menu">
        <li class="sn-menu-1 sn-index-10"><a href="#"><span>Menu item 1</span></a></li>
         <li class="sn-menu-2 sn-index-20 sn-traversal">
            <a href="#"><span>Menu item 1</span></a>
            <ul>
                <li class="sn-menu-1 sn-index-10"><a href="#"><span>Submenu item 1</span></a></li>
                <li class="sn-menu-2 sn-index-20 sn-menu-active"><a href="#"><span>Submenu item 2</span></a></li>
                <li class="sn-menu-3 sn-index-30 sn-menu-last"><a href="#"><span>Submenu item 3</span></a></li>
            </ul>
        </li>
        <li class="sn-menu-3 sn-index-30"><a href="#"><span>Menu item 2</span></a></li>
        <li class="sn-menu-4 sn-index-40 sn-menu-last"><a href="#"><span>Menu item 3</span></a></li>
    </ul>

Breadcrumb

• .sn-breadcrumb - container class for breadcrumb navigation
  • .sn-bc-separator - separator for breadcrumb items
  • .sn-bc-item - one breadcrumb item
  • .sn-bc-current - current breadcrumb item

    <div class="sn-breadcrumb">
        <a class="sn-bc-item" href="#">First level</a>
        <span class="sn-bc-separator">/</span>
        <a class="sn-bc-item" href="#">Second level</a>
        <span class="sn-bc-separator">/</span>
        <a class="sn-bc-item sn-bc-current" href="#">Current item</a>
    </div>

Icon system

The icon system is built to be able to handle different sizes and types. In the base system we have two type of icons: Overlayed and Not Overlayed. An Overlayed icon is for example an "Add Document" icon where the original item is the document and the system uses a small "+" icon to indicate the "Add" function.

• .sn-icon - common class for an icon in the system
• .sn-icon16 - class for default 16x16px icons
• .sn-icon32 - class for default 32x32px icons

Markup example

• No overlay:

  <img src="{{ICON_IMAGE_PATH}}" class="sn-icon sn-icon16" />

• Overlay:

  <img src="{{OVERLAY_IMAGE_PATH}}" style="background-image: url({{ICON_IMAGE_PATH}})" class="sn-icon sn-icon16" />

Content

Contents are also handled separately in the following form (with the pre-installed content views):

• .sn-content - common class for content containers
• .sn-content-title - the main title
• .sn-content-subtitle - subtitle
• .sn-content-sectiontitle - title of sections
• .sn-pic - class for content images
• .sn-pic-left, .sn-pic-right - left/right aligned content images
• .sn-list - common class for unordered lists in a content
• .sn-more - common class for "more..." details link
• .sn-lead - class for the lead part of the content
• .sn-contentlist - container class if there is a content list in a query (like news items)

Accordion elements

The default structure uses UI Accordion part for handling Accordion elements.

• .sn-accordion – container for accordion elements
  • .sn-accordion-title – accordion title / handler
  • .sn-accordion-content – accordion inside content

Portlets

Portlets are key elements of the system. Common naming structure is therefore necessary for these elements also.

• .sn-portlet - portlet container element
  • .sn-pt-header - portlet header
    • .sn-pt-header-tl - top left corner
    • .sn-pt-header-center - center header area
    • .sn-pt-header-tr - top right corner
  • .sn-pt-bodyborder - border for the portlet body (optional)
    • .sn-pt-body - portlet content (can contain any above mentioned regular controls/classes)
  • .sn-pt-footer - portlet footer
    • .sn-pt-footer-bl - bottom left corner
    • .sn-pt-footer-br - bottom right corner

• .sn-verbs - container for the portlet verbs (dropdown item for editing a portlet in admin mode)
  • .sn-verbs-openbtn - button to be able to open the dropdown
  • .sn-verbs-panel - container for verbs items
    • .sn-verbs-closebtn - closing button
    • .sn-verbs-content - content of the verbs panel

Normally portlets have to use the controls/classes above to build their own layout, but if you need any special classes to identify a part in the portlet, use the following naming convention: sn-xxxx-yyyy - where:

• sn- - Sensenet prefix
• xxxx- - Portlet name (short version!)
• yyyy- - Portlet specific element

Example: sn-contentpicker-search

Related links

• Skin System overview
• The Skin System - for End users
• The Skin System - for Portal builders
• The Skin System - for Developers
• Skin anatomy
• Sense/Net Predefined Layouts

References

• jQuery UI CSS Framework