Documentation - Usage

Wrapping

Global wrapping for all DNA action requires a fieldset with class:

<fieldset class="dnaf_fieldset">
    <legend>Fieldset Legend</legend>
    ...
</fieldset>

Rowing

Each field in your form must be wrapped in a form row:

<div class="dnaf_row">
    <label>Field label</label>
    <input type="text" />
</div>

Row layout

A row is usually made up of a label and a field that occupy the space in two different ways:

Inline Row: where the label and the input follow each other horizontally

Row 50

Block Row: where the label and the input take 100% of the width, on top of each other:

Row 50

The layout can be declared using class dnaf_layout_inline or dnaf_layout_block as a top container (applying thus to the whole form) or at the fieldset level (for only the fields within).

<fieldset class="dnaf_fieldset dnaf_layout_inline">
    <legend>Fieldset Legend</legend>
    <div class="dnaf_row">
        <label>Field label</label>
        <input type="text" />
    </div>
</fieldset>

Row size

You can define the width you want the row to take up, relative to your page or parent container: 30%, 50%, 100%...

In block layout, each element takes up 100% of the width within the row.
In inline layout however, the label represents 20% of the row and the input takes up the rest).

See an example of a 50% row, taking up half of the main container width (20% for the label and 30% for the input):

Row 50

For each row, specify its size relative to the main container with a simple class:

<div class="dnaf_row dnaf_row_50">
    <label>Field label</label>
    <input type="text" />
</div>

Available rows (in %):

100
90
80
70
60
50
40
30
20
10
5

Row follow

You can combine floating rows to add up to 100% (50% + 20% + 30%) and make one cohesive row.
Followers are preceded by a 4% margin, which you can reduce to 1% by declaring it with the class dnaf_fol_tight, thus creating a grouping effect.

Row 50

Row 20

Row 30

Row 50

Row 20

Row 30, tightly following

Simply add a class to the floating rows following the row starter:

<div class="dnaf_row dnaf_row_50">
    <label>Row 50</label>
    <input type="text" />
</div>

<div class="dnaf_row dnaf_row_20 dnaf_row_fol">
    <label>Row 20</label>
    <input type="text" />
</div>

<div class="dnaf_row dnaf_row_30 dnaf_row_fol dnaf_fol_tight">
    <label>Row 30</label>
    <input type="text" />
</div>

Row label

Aside the standard 20% width label, you can specify longer, shorter, invisible or absent labels.

Row 60 - clickable label 20%

Row 60 invisible

Row 60 - label is 50% to allow for longer descriptions

10%

0%

Simply add a class dnaf_lab_long, dnaf_lab_short, dnaf_lab_invisible, dnaf_lab_less to the row.
You can also make clickable labels with hand cursor by properly adding HTML attributes for="" and id="".

<div class="dnaf_row dnaf_row_60 dnaf_lab_short">
    <label (for="input_id_1") >Row 60</label>
    <input (id="input_id_1") type="text" />
</div>

Important: you should keep the labels in your code with proper descriptions and references in any case, for accessibility purposes and code comprehension.

Offset (empty) and label-only rows

Offsets can be produced by instering empty rows.

Row 30

Row 30

Row 30

Row 20

Row 30

If you need a space to be filled by a label only, use row class dnaf_lab_only.

Label-only 30 filling up the 30% space, after an empty offset

Row 20, label-only

Row 30

Row 30

You can also use a label outside a row to produce a row separator.

Row 20

Row 30

Row 30

This is a separator, to introduce a new section within the fieldset:

Row 20

Row 30

Row 30

<div class="dnaf_row dnaf_row_60"></div>
<label>Separator</label>
<div class="dnaf_row dnaf_row_60 dnaf_lab_only">
    <label>Label-only filling the space</label>
</div>

Buttons and icons

Add action or information with floating label icons and/or up to 2 input buttons :

Legend

Row 60

Row with 1 button

Row with 2 buttons

Mixed entries

Label icons are simple floated <a> elements with a class used to pull the actual image (icon_log, icon_add, icon_delete, icon_help...).

Input buttons must be declared with a row class dnaf_button_input_1 or dnaf_button_input_2 that automaticaly adjusts the padding at the right of the input + the same other button class to pull the icon:

<legend class="right">
    <a title="Add an item" class="icon_add"></a>
    Legend title
</legend>

<div class="dnaf_row dnaf_row_60 dnaf_button_input_1">
    <label>
        <a title="Helper" class="icon_lock" href=""></a>
        <!-- repeat as necessary -->
        Row 60
    </label>
    <input type="text" />
    <button class="icon_add dnaf_buttons"></button>
</div>

Button row

You can use buttons to complete other rows or as stand-alone controllers within a form.
These buttons are also very useful if you like to control their width and alignment.

Row 40

Row with 1 button Controller

Row 50

Row 50 Action 1

Row with 1 button Action 2

<div class="dnaf_row dnaf_row_10 dnaf_lab_less dnaf_row_fol dnaf_fol_tight">
    <label>Row 10 with 1 button</label>
    <button type="button">Controller</button>
</div>

Action row

You can introduce or conclude a series of rows with an action row. It takes up to 100% width and is useful for global form actions - can be left or right aligned.

I accept Quit now You are responsible for your content

Cancel Save Save & continue Delete Edit list

<div class="dnaf_row dnaf_row_100 dnaf_action (left)">
    <button type="button">I accept</button>
    <button type="button">Quit now</button>
    You are responsible for your content
</div>

Radio / checkbox row

Special inputs can be presented like all other inputs, with a 20% label:

Male

Female

Other

Specify

Or you can use special class dnaf_row_rad to start each row with the input and have the label follow:

Undecided

Male

Female

Pick your favorite colors

Blue

Green

Yellow

Note: You don't have to (and should not) change the syntax within the form row : label first, input next.

<div class="dnaf_row dnaf_row_20 dnaf_row_rad">
    <label for="check1">Your choice</label>
    <input id="check1" type="checkbox" />
</div>

Select, textarea, file...

Using other HTML standard form controls is seamless:

Row 50 ChoiceOther choiceFinal choice

Row 50 Here is your text...

Row 60 Upload

<div class="dnaf_row dnaf_row_50">
    <label>Row 50</label>
    <textarea>Here is your text...</textarea>
</div>

Container as a field

In certain cases, depending on your programming, you might want to use <div> tags instead of inputs. For that reason we've added a special class:

Row 50 Div

Div as field

Row 50 Div

Div as field unstyled

Note: You can add your_custom_class to the div as field, to selectively apply the formatting of your choice and fit all situations. We provide the dnaf_unstyled for example.

<div class="dnaf_row dnaf_row_50">
    <label>Row 50 Div</label>
    <div class="dnaf_as_field (your_custom_class)">Div as field</div>
</div>

Notifications

You can prepare and insert field notifications that align automatically:

Row 50*

This is a required file

Row 50

Incorrect value

Row 50

Remember to check for availability

Row 50

Validated

Mixing with Bootstrap's alert declarations:

Mixing DNAF and Bootstrap

This is a warning (alert-warning)

Using Boostrap's style only

Field successfully validated (alert-success)

You can use the dedicated <div> tag with the following classes: dnaf_note_info, dnaf_note_success, dnaf_note_warning, dnaf_note_danger.

<div class="dnaf_row dnaf_row_50">
    <label>Row 50</label>
    <input type="text" />
    <div class="dnaf_note_info">Your notification here</div>
</div>

Complete row specifications

Row size in %	Block layout	Inline layout	Lab_invisible	Lab_long	Lab_short	Lab_less
100	100%-100%	20%-80%
70
60
50
40
30
20		auto short label
10		auto hidden label
5		auto hidden label