CSS changes for Flow 2014 release

by Arno Kusters, Reflexis, june 2014.

Introduction

For Flow 2014 we changed the way parts add CSS classes to their output. The main reasons for this change are to improve consistency and prevent (class) naming conflicts. Hopefully, this'll make it easier for people to build and adapt stylesheets to their specific needs.

The general rule is that each part now outputs a container (either div or span) with a class name equal to the name of the part itself.

For instance, for older Flow releases the ui/data_grid part generated a table element with a "datagrid" class. In the new scheme, this grid part wraps the table in a container div with a "data_grid" class.

The section below contains a summary of all the major changes. It describes how parts handled CSS classes for older releases and how this was changed for the Flow 2014 release. You can use it to upgrade your project stylesheets.

The changes

  container
partold classnamenewold
ui/actionbardivul
ui/buttonsbuttonspana, button
input type="button"
ui/checkboxspaninput type="checkbox"
ui/counter1spanspan
ui/data_griddatagriddivtable
navbutton navinput type="button"a
ui/datespaninput
ui/datetime2span
ui/display_objectdisplayobject
ui/dropdownspanselect
ui/explanation3span
ui/gatesgatesbarspanul
ui/grid_editorgrideditordivtable
ui/imagedefaultspanimg
ui/logindivtable
ui/mapmapview
ui/menu_list
headermenu_heading
itemmenu_item
ui/multi_answerdivdiv or table
ui/numberspaninput type="text"
ui/objectvobjectdivtable
ui/propertiesproperty_editordivtable
ui/qutext
listqutext_list
ui/rangegridscalegriddivtable
ui/recentsdivul
ui/render_list4divdepended on item
ui/render_propertiesviewproperties
ui/stateboardboarddivtable
stateboard_menuplanboard_menu
ui/tab_controltabstrip
ui/textspaninput type="password"
input type="text"
textarea
ui/uploadspaninput type="file"
pg/formformed
std/defaulttodo

1 - part now only renders container span with "counter" class (was on span within span)
2 - introduced container span with new "datetime" class
3 - introduced container span for the link when answer_mode = id
4 - introduced container div with "render_list" class to always wrap the parts' output.

AK.