Ideo3.2 Framework Documentation

#box

Mixins permettant de styler les "boites" ou "blocs"

#box.shadow(@shadow, @shadow-color);
#box.modern-shadow();
#box.filter-shadow(@shadow);
#box.border(@border-color, @border-size);
#box.radius(@radius);
#box.surface(@bg-color);
#box.surface-bold(@bg-color, @fg-color);
#box.surface-gradient(@gradient);
#box.backdrop(@blur, @brightness);
#box.absolute(@level);

<insert-markup>mixin.box-</insert-markup>

// empty

Markup: ../../../snippets/components/empty.hbs

// empty

Source: src/cssframework_v2/less/mixins/box.less, line 1

#debug

Mixins permettant de faire des tests de debug CSS

#debug.breakpoints();
#debug.no-alt();
#debug.highlight-all();

<insert-markup>mixin.debug-</insert-markup>

// empty

Markup: ../../../snippets/components/empty.hbs

// empty

Source: src/cssframework_v2/less/mixins/debug.less, line 1

#layout

Mixins permettant de faire de la mise en page Flex ou Grid

// Flex base
	#layout.flex();
	#layout.flex-row-revers();
	#layout.flex-wrap();
	#layout.flex-column();
	#layout.inline-flex();
	#layout.inline-flex-wrap();

// Grid base
	#layout.grid();
	#layout.grid-column();
	#layout.inline-grid();

// Items alignement
	#layout.place-items-start();
	#layout.place-items-center();
	#layout.place-items-end();
	#layout.place-items-center-start();
	#layout.place-items-center-end();
	#layout.place-items-start-center();
	#layout.place-items-start-end();
	#layout.place-items-end-start();
	#layout.place-items-end-center();
	#layout.place-items-stretch();

// Content alignement
	#layout.place-content-start();
	#layout.place-content-center();
	#layout.place-content-end();
	#layout.place-content-center-start();
	#layout.place-content-center-end();
	#layout.place-content-start-center();
	#layout.place-content-start-end();
	#layout.place-content-end-start();
	#layout.place-content-end-center();
	#layout.place-content-stretch();
	#layout.place-content-between();
	#layout.place-content-around();
	#layout.place-content-evenly();

// Justify Self
	#layout.justify-self-start();
	#layout.justify-self-end();
	#layout.justify-self-center();
	#layout.justify-self-stretch();

// Align Self
	#layout.align-self-start();
	#layout.align-self-end();
	#layout.align-self-center();
	#layout.align-self-baseline();
	#layout.align-self-stretch();

<insert-markup>mixin.layout-</insert-markup>

// empty

Markup: ../../../snippets/components/empty.hbs

// empty

Source: src/cssframework_v2/less/mixins/layout.less, line 1

#section

Mixins permettant de styler des sections

// 2 colonnes
// Appliquer sur une row contenant deux colonnes avec contenus dans la première colonne et blk-image dans la seconde colonne
// les mixins sont compatibles avec les options de row tel que revers, screen, full-broad, backgrounds, ...

#section#2columns.cta1(); // L'image rempira la section comme fond dans un dégradé transparent vers la gauche
#section#2columns.cta2(); // L'image rempira la section comme fond dans un dégradé transparent vers le bas
#section#2columns.cta3(); // L'image rempira la section comme fond dans un dégradé flou vers la gauche !pas compatible avec les backgrounds.

usage :
.my-class {
	#section#2columns.cta1();
}

<insert-markup>mixin.section-</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.