Petal.less

Petal is comprised of several sub-files ('modules') that contain the classes and styles relevant to the each UI element kind. The petal.less file serves as the wrapper file that imports the modules.

Here's how it looks:

// * ================================= *
// *  Petal.less main file
// * ================================= *

// default variables
@import 'variables.less';

// basics
@import 'mixins.less';
@import 'normalize.less';
@import 'color-palette.less';
@import 'petalicon.less';
@import 'z-index.less';

// modules
@import 'basic.less';
@import 'layout.less';
@import 'utilities.less';
@import 'colors.less';
@import 'typography.less';
@import 'buttons.less';
@import 'forms.less';
@import 'progress.less';
@import 'tables.less';
@import 'paging.less';
@import 'panels.less';
@import 'tabs.less';
@import 'alerts.less';
@import 'modals.less';

// custom variables
@import 'custom-variables.less';

All modules have included a (reference) import for any dependency it may have (variables, mixins) so they can be compiled independently. Given that all files are on the same directory, you can exclude some modules you don't need, or even choose to import only one of the modules you want. But beware that the modules only contain the styles related to that specific UI element, so if you leave out some modules such as basic.less and typography.less, fonts, text sizes or styles may look weird because they won't have any base styles declared. Use appropriately by combining Petal with your site's own stylesheet.

Check out the documentation for each modules by clicking the items on the left.