Install

We recommend you to use it as an imported library from your Sass compiler and avoid to include it inside your project Sass sources.

Once library is available with your compiler, import it in your sources:

Alike with Foundation, you must load the settings first then libraries. In your settings you can define both Foundation and Sveetoy settings or you may split them in two or more settings files. Sveetoy allways come after Foundation since it relies on some of its mixins and settings.

sveetoy/_f6_settings.scss contains a sample setting file you may include in at end of your main settings file and adjust to your needs. Be aware that some of its values are linked to some Foundation setting values.

Once installed with sample settings it would add CSS styles for around 7Ko. Adding more items to color schemes and space schemes will grow up your CSS file a little bit.

Optionally you can watch about PyCssStyleguide to build a styleguide for Sveetoy components. A Sass source for CSS manifest is available which contains references about every components.

Vocabulary

Components features share the same vocabulary depending of feature kind.

The following vocabulary kinds are listing every word from lesser value to higher.

Colors

Sveetoy enforce color policy by defining every color stuff in color schemes so they are usable in other components like blocks, boxes, buttons, etc..

There is also a basic component that just generate helper class like .bg-NAME where NAME is the color scheme name. These classes are only created for color scheme with a background property.

You can find every available color scheme property from color scheme model documentation.

Colors you will see in this page is just a demonstration, Sveetoy default settings has no color scheme defined and sample settings only define a black and a white color schemes.

Note than transparent is a reserved keyword than you should not use to define your color scheme names. Commonly this word is used as a feature in some component to avoid using any color and just inherit from parent rules.

Helper classes can be disabled with

$include-sv-colors: false;

Helper classes source location

sveetoy/components/_colors.scss

Typography

This component adds some minor things to the Foundation typography stuff.

Also there is a new rule that prevent paragraphs to have a bottom margin if they are the last child of their parent.

Can be disabled with

$include-sv-typography: false;

Source location

sveetoy/components/_type.scss

Spaces

This component create some class helpers to apply paddings or margins using space rythmic defined in map $sv-spaces. All of these classes use the !important.

There are many space sizes available and each of them have their own breakpoint sizes.

Can be disabled with

$include-sv-spaces: false;

Create size classes from

$sv-spaces

Source location

sveetoy/components/_spaces.scss

!important mark usage can be disabled with

$sv-spaces-helpers-important: false;

Buttons

This component provides some features for buttons.

This component support 'hover' prefix for every color scheme properties that will operate on 'hover' event.

Also there is a new rule that prevent buttons to have a bottom margin if they are the last child of a div, p, dd, li element.

Can be disabled with

$include-sv-buttons: false;

Source location

sveetoy/components/_buttons.scss

Boxes

Box component combinates spaces and colors settings alike blocks but with both horizontal and vertical padding and optional borders.

This component support 'hover' prefix for every color scheme properties that will operate on 'hover' event.

Can be disabled with

$include-sv-boxes: false;

Source location

sveetoy/components/_boxes.scss

Flexbox

A simple flexbox grid.

Alike .row in float grid, .flex-grid is the main container and .cell is equivalent to .columns.

Available cell sizes are builded from $sv-flex-grid-sizes list and defined for each enabled breakpoints.

.margin feature is defined from $sv-flex-grid-gutter.

Available cell width sizes are builded from list $sv-flex-grid-sizes, note that size decimals are removed from the size class name so value 33.333 will build a class names like .small-33, .medium-33, etc..

Can be disabled with

$include-sv-flex: false;

Source location

sveetoy/components/_flex.scss