Fork me on GitHub

Sveetoy

A Sass library for programmatic rythm and some candies on top of Foundation for Sites version 6.3.x or better.

Responsive rhythm for your spaces and texts

Enforce your color policy from settings

Faster prototyping

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:

@import "settings";

@import "foundation";

@import "sveetoy";

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.

Thickness

  • thin
  • normal
  • bold

Distance

  • sticked
  • near
  • default
  • far

Width

  • tiny
  • short
  • normal
  • large
  • wide
  • full

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

Color palette

.bg-white :

#ffffff

.bg-black :

#000000

.bg-lightskyblue :

#87cefa

.bg-snow1 :

#fffafa

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

Title element

Title styles are not anymore sticked to hX elements, now you can use them by the way of .title-X classes on any other element to preserve semantic. You may even use a .title-X class on hX element.

h1

h2

h3

h4

h5
h6

.title-1

.title-2

.title-3

.title-4

.title-5

.title-6

Text colors

Text colors are available for every color defined in map $sv-color-text-palette. Properties are defined using !important flag so take care of their usage.

.text-white

.text-black

.text-gray25

.text-gray82

.text-gray88

.text-lightskyblue

.text-deepskyblue4

Font thickness

Two more font thickness are available if their corresponding variable is defined:

  • $global-weight-thin for thinest thickness;
  • $global-weight-strong for strongest thickness.

.text-thin

.text-normal

<b>, .text-bold

<strong>, .text-strong

Small

Add some size possibilities to <small> element. .medium is equivalent to the default <small> behavior. Available sizes are built from $sv-smalls.

.small Molestie dictum varius hendrerit odio quisque, amet maecenas proin iaculis, magna facilisi est lacus purus.

.big At sociosqu tristique eros magna lobortis, potenti hendrerit elementum mi, tempus parturient aenean aliquam torquent.

.large Lobortis ac in nam feugiat blandit sociis, viverra dis fermentum aliquam cubilia ultricies, porta inceptos.

Ut etiam vitae luctus feugiat aptent integer, proin euismod sed semper nulla dolor pulvinar neque.

Transform and decoration

.text-upper enables you to correctly write your texts in lowercase but render them as uppercase. .text-important just define the underline value for text-decoration property.

.text-upper

.text-important

Underline

Various underline positions, thickness and widths. All of them are implemented with border properties on a pseudo-element :after.

Width

Built from list $sv-underline-widths.

.underline.tiny

.underline.short

.underline.normal

.underline.large

.underline.full

Thickness

Built from map $sv-underline-thickness.

.underline.thin

.underline.normal

.underline.bold

Distance

Built from list $sv-underline-distances.

.underline.sticked

.underline.near

.underline.default

.underline.far

Alignment

No variable is used to build this single feature.

.underline.normal

.underline.text-center

Color

Built from list $sv-underline-colors.

.underline

.underline.white

.underline.black

.underline.gray25

.underline.gray82

.underline.gray88

.underline.lightskyblue

.underline.deepskyblue4

Horizontal rule

Various horizontal rule positions, thickness and widths. Following the same scheme formats than .underline features.

Thickness

Built from map $sv-hr-thickness.

hr.thin


hr.normal


hr.bold


Distance

Built from list $sv-hr-distances.

hr.sticked
hr.near
hr.default
hr.far

Color

Built from list $sv-hr-colors.

hr


hr.white


hr.black


hr.gray25


hr.gray82


hr.gray88


hr.lightskyblue


hr.deepskyblue4


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;

Vertical padding in element

.v-space-tiny
Foo
.v-space-short
Foo
.v-space-normal
Foo
.v-space-large
Foo
.v-space-wide
Foo

Only top or bottom

.v-space-normal.top-only
Foo
.v-space-normal.bottom-only
Foo

Horizontal padding in element

.h-space-tiny
Foo
.h-space-short
Foo
.h-space-normal
Foo
.h-space-large
Foo
.h-space-wide
Foo

Only left or right

.h-space-normal.left-only
Foo
.h-space-normal.right-only
Foo

Vertical margin divider

.v-divider-tiny Follower
.v-divider-short Follower
.v-divider-normal Follower
.v-divider-large Follower
.v-divider-wide Follower

Horizontal margin divider

.h-divider-tiny Follower
.h-divider-short Follower
.h-divider-normal Follower
.h-divider-large Follower
.h-divider-wide Follower

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

Important

Make the button text stronger and uppercase.

Sizes

Add .full feature that act like .expand from Foundation but preserve normal horizontal padding.

Paddings

Add .modest feature so the button padding are divided by two or less, it depend from size definitions in $sv-button-modests.

Colors

Button color features are builded from $sv-button-colors-schemes that is on the same format than $sv-colors-schemes and support border and hover properties from color schemes.

Blocks

A block is a full width container useful for fluid design layouts but with first goal to set background and font colors.

Available features can apply various vertical padding using rythmic space from $sv-spaces and various color schemes from $sv-colors-schemes.

This component does not apply border properties and 'hover' prefix for color scheme properties.

See Box component for available spacing features.

Can be disabled with
$include-sv-blocks: false;
Source location
sveetoy/components/_blocks.scss

.block

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Montes rhoncus accumsan ullamcorper sit id, vehicula viverra molestie duis commodo, suscipit laoreet diam amet praesent libero. Risus ante pede arcu hac, maecenas augue blandit ornare dis, ut ac eu nonummy turpis per, dui donec potenti malesuada. Aptent pede gravida suscipit metus facilisi, porta inceptos magnis.

Quisque eget ante pede leo, neque felis netus aenean natoque neque, curabitur praesent vulputate tempus neque. Dis nunc enim ultricies a, sed a aliquet curae class, habitant ad torquent nec taciti, semper sit leo odio. Primis volutpat.

.block.white

#ffffff

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Porta facilisi rhoncus urna mauris, velit integer iaculis pretium aenean, sit facilisis curabitur quam, velit tincidunt hendrerit lacus dapibus, donec ligula sapien suscipit tortor.

Platea est conubia volutpat platea ut, habitant lacus quam donec leo curae, nascetur fames fringilla leo pulvinar, pharetra adipiscing mollis parturient nascetur. Feugiat aliquet primis habitasse egestas, adipiscing.

.block.black

#000000

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Viverra vitae eleifend sagittis ullamcorper turpis, neque sapien arcu odio ac ante dapibus, ante augue rutrum justo imperdiet laoreet facilisis, pede. Curabitur maecenas id aptent, gravida tortor gravida dapibus eu, faucibus feugiat facilisi suspendisse interdum, sollicitudin ligula scelerisque eleifend dolor.

Montes litora gravida dapibus tellus consequat, eleifend purus habitant rutrum mollis sem nulla, parturient vehicula euismod ultricies potenti facilisi, risus nisi parturient. Auctor ad potenti ridiculus justo, ultrices consequat tortor varius metus tempor, ultrices venenatis nascetur morbi interdum sagittis massa, nascetur cras elementum. Diam augue platea posuere.

.block.lightskyblue

#87cefa

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Tellus euismod dolor id ligula odio, pulvinar tempor non suspendisse, vivamus iaculis bibendum ut id libero ligula, sapien id porta blandit. Magna ultricies nisl sociosqu a erat nibh, egestas dui tincidunt erat, auctor vehicula vestibulum torquent. Mattis id lorem nisi risus penatibus, per sed aliquam mus est, per.

Risus turpis eget curae lectus id, purus nostra taciti parturient mauris, ac cras orci neque quis nascetur, aenean nostra erat posuere, vulputate. Laoreet.

.block.snow1

#fffafa

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Lacinia cursus lobortis quam dictum tempus, magnis montes tempus ac curabitur cursus vulputate, lobortis quisque porta aenean phasellus, vivamus adipiscing penatibus per pellentesque. Praesent cubilia habitant suscipit per habitasse euismod iaculis, malesuada maecenas interdum condimentum molestie, ipsum ridiculus vitae penatibus.

Posuere nec sem tellus phasellus risus, amet varius dignissim est placerat natoque, pretium sociosqu imperdiet class natoque, nunc sodales nonummy. Accumsan.

.block.lightskyblue-bordered

#87cefa

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Netus tristique proin nostra donec velit adipiscing, sodales nulla suscipit leo cubilia aliquet, hendrerit sociis parturient. Pretium lorem vitae ridiculus semper, consectetuer primis taciti aliquet nostra facilisis commodo, dictum consequat commodo scelerisque turpis natoque, dignissim amet lorem consectetuer. Penatibus pede vitae quisque.

Commodo hymenaeos condimentum massa ipsum egestas platea, inceptos ante taciti turpis vitae venenatis, eleifend porta dignissim varius curae, felis fringilla. Aptent feugiat netus dolor laoreet.

.block.snow1-bordered

#fffafa

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Velit litora eget hac per libero porttitor netus, a taciti a nulla lobortis leo vel, hymenaeos litora accumsan venenatis congue,. Facilisi cursus odio fames tempus quam, ipsum leo eget pellentesque ornare sem consequat, morbi venenatis diam laoreet semper, cras.

Integer id adipiscing volutpat turpis placerat, ad natoque iaculis integer placerat, torquent pretium id sed rhoncus, habitasse feugiat. Maecenas cursus laoreet eu, duis vulputate gravida dictum augue ornare facilisi metus, sociis nonummy phasellus ultricies proin condimentum. Lacinia congue ornare class, consectetuer ornare elit eros tincidunt.

.block.delegate and .inner child

You can delegate spacing behavior to a .inner in a .block.delegate, the latter will only retains the color features.

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Pretium ante dictum habitant urna suscipit, semper metus torquent pulvinar nunc ante, habitant dignissim vestibulum facilisi tincidunt. Fusce nibh aliquam scelerisque, nonummy pharetra magna augue erat imperdiet, fermentum vel venenatis.

Dui senectus eleifend pharetra vivamus pellentesque luctus, lorem facilisis id et, in elementum ullamcorper risus luctus, vivamus rhoncus mi ad. Luctus posuere tempor hac justo, hymenaeos felis massa fusce ante, lobortis curae.

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

Spaces

Space features are built from $sv-spaces (except for .unpadded that just set padding to 0). Default box spaces comes from normal item from $sv-spaces.

Additionaly, to respect visual spaces, first direct child never have a margin and last direct child never have a margin bottom.

.box.unpadded

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box.tiny

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box.short

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box.normal

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box.large

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.box.wide

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Colors

Color features are built from $sv-colors-schemes. Default box colors comes from $sv-colors-scheme-default.

Alike Button component border and hover properties are supported.

.white

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.black

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.lightskyblue

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.snow1

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.lightskyblue-bordered

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.snow1-bordered

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Border thickness

Optionally if your color scheme support borders you can change its thickness using some features. These thickness are built from $sv-boxes-thickness.

.border-thin

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.border-normal

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.border-bold

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Transparent

Color scheme is only applied to element without .transparent feature so they can just inherit from parent properties.

.lightskyblue

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

Default behavior

Apply default box color scheme

.lightskyblue

Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.

.transparent behavior

Don't apply any color scheme

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

Simple grid

.cell

.cell.small-100.medium-20

20%

.cell.small-100.medium-25

25%

.cell.small-100.medium-33

33.3333%

.cell.small-100.medium-50

50%

.cell.small-100.medium-75

75%

.cell.small-100.medium-100

100%

With margin between cells

.cell

.cell.small-100.medium-20

20%

.cell.small-100.medium-25

25%

.cell.small-100.medium-33

33.3333%

.cell.small-100.medium-50

50%

.cell.small-100.medium-75

75%

.cell.small-100.medium-100

100%

Vertical content alignment

.v-align-start

Torquent tincidunt curae commodo ante dictum sit, commodo nonummy cum sociis facilisi nulla varius, ante.

.v-align-end

Ut placerat facilisi aliquet nulla, scelerisque mus lacus ligula, hendrerit nam dui purus laoreet turpis.

.v-align-center

Ridiculus placerat dictumst est vivamus, mi neque arcu ad gravida, quam dignissim faucibus tellus nunc.

.v-align-around

Vivamus euismod elit orci quam adipiscing class, sit elit integer vel convallis ut, lacus sit.

.v-align-between

Nulla neque curae sem montes, phasellus eget turpis pharetra fermentum rhoncus, turpis integer dolor faucibus.

Using responsive classes

Every alignment classname is available for each breakpoint names, you can combine them to change alignment behavior between breakpoints.

Classnames are builded using enabled breakpoints from $sv-breakpoints.

Start End Center Around Between
.v-align-start .v-align-end .v-align-center .v-align-around .v-align-between
Small .small-v-align-start .small-v-align-end .small-v-align-center .small-v-align-around .small-v-align-between
Medium .medium-v-align-start .medium-v-align-end .medium-v-align-center .medium-v-align-around .medium-v-align-between
Large .large-v-align-start .large-v-align-end .large-v-align-center .large-v-align-around .large-v-align-between
Xlarge .xlarge-v-align-start .xlarge-v-align-end .xlarge-v-align-center .xlarge-v-align-around .xlarge-v-align-between
Xxlarge .xxlarge-v-align-start .xxlarge-v-align-end .xxlarge-v-align-center .xxlarge-v-align-around .xxlarge-v-align-between

Container items direction

.direction-row

1
2
3

.direction-row-reverse

1
2
3

.direction-column

1
2
3

.direction-column-reverse

1
2
3

Using responsive classes

Every direction classname is available for each breakpoint names, you can combine them to change direction behavior between breakpoints.

Like below with .direction-column.large-direction-row:

1
2
3

Classnames are builded using enabled breakpoints from $sv-breakpoints.

Row Row-reverse Column Column-reverse
.direction-row .direction-row-reverse .direction-column .direction-column-reverse
Small .small-direction-row .small-direction-row-reverse .small-direction-column .small-direction-column-reverse
Medium .medium-direction-row .medium-direction-row-reverse .medium-direction-column .medium-direction-column-reverse
Large .large-direction-row .large-direction-row-reverse .large-direction-column .large-direction-column-reverse
Xlarge .xlarge-direction-row .xlarge-direction-row-reverse .xlarge-direction-column .xlarge-direction-column-reverse
Xxlarge .xxlarge-direction-row .xxlarge-direction-row-reverse .xxlarge-direction-column .xxlarge-direction-column-reverse