The patterns described on this site are primarily intended for usage in administrative areas. Module settings, "edit" controls, and really any area of a module or site containing administrative functionality are prime candidates for these patterns. Of course you may wish to use some of the patterns outside of that context, but do keep the administrative experience in mind as you navigate this guide, as that is intended as the primary implementation scenario.

Every administrative area (or form, as it will often be referred to in this guide) in DNN starts with the CSS class .dnnForm. This provides a CSS scope for the area. Wrapping an area in a .dnnForm element allows you to declare your intent that this area should look and feel like a DNN administrative area. The core CSS styles to achieve that look and feel will be applied automatically to your elements when you define this scope.

To set up the foundation, just simply use .dnnForm as wrapper of your module. For example:

<div class="dnnForm">

Your module content here. Labels, inputs, action buttons, etc...

</div>

For specific module, you can use multiple CSS selectors to allow for additional customization without altering the core CSS.

<div class="dnnForm myAwesomeModule">

Your module content here.Your module content here. Labels, inputs, action buttons, etc...  

</div>

Extending the dnnForm CSS scope with your own unique CSS selector allows you to take advantage of all of the goodness that comes with dnnForm, but also easily target your specific content area as well when it requires unique styling.