Dragonfruit.css
Dragonfruit is more geared toward personal websites, but can be used for
anything you like, as its not pushy. However, Dragonfruit is unusual
among frameworks in that it requires a top-level
.dragonfruit
class in order to style most components, especially those that use
semantic HTML.
Brief example:
Sections:
Sections
in dragonfruit are treated as distinct blocks, and are animated
upon hover.
These sections are wrapped up in
.dfruit-container
and
.dfruit-container-50sp
Buttons:
Typically, dragonfruit will style buttons automatically, so long as
they fall within the scope of the class:
.dragonfruit
.
These buttons are inside of a .dfruit-btn-group
Sections: Images.
You can include images in sections, and style them dedicated .dfruit
classes, such as
.dfruit-meicon
.
You may also wrap your images inside of
.dfruit-meicon
- this allows you to use
.dfruit-card
on your images.
You may even add the built-in Dragonfruit animation classes to give your images a little more
pizzazz!
Tabs
Dragonfruit gives you some basic tab styles:
.dfruit-tabs
You can also add modifier classes (not yet implemented) to change the
size, style, or purpose of a section. Since Dragonfruit relies heavily
on cascades, *where* you place your elements matters. Any element outside
the scope of the class '.dragonfruit,' for instance, will not be styled
by dragonfruit.css.