The Sense/Net CSS Framework

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 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

References