dragonfruit.css

About Dragonfruit

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.

Sections: Headers

This is a header.