Ideo3.2 Framework Documentation

Layout

Breakpoints et class utilitaires

Background utilities

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Liste des class de backgrounds et de shadows


// Backgrounds
bg-surface-0
bg-surface-1
bg-surface-2
bg-surface-3
bg-surface-4
bg-surface-5
bg-accent-0
bg-accent-1
bg-lead-0
bg-lead-1

//Shadows
level-low
level-medium
level-hight

<insert-markup>layout.backgrounds-</insert-markup>
// empty
Markup: ../../../snippets/components/empty.hbs
// empty
Source: src/cssframework_v2/less/layout/backgrounds.less, line 1

Breakpoints

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Liste des points d'arrêts.


// mobile max height
@mq-xs-height
// small mobile
@mq-xs-down
// large mobile
@mq-sm-up
@mq-sm-only
@mq-sm-down
// large mobile landscape
@mq-sml-down
// large mobile portrait
@mq-smp-down
// small tablet
@mq-md-up
@mq-md-only
@mq-md-down
// small tablet landscape
@mq-mdl-down
// small tablet portrait
@mq-mdp-down
// large tablet
@mq-lg-up
@mq-lg-only
@mq-lg-down
// laptop
@mq-xl-up
@mq-xl-only
@mq-xl-down
// desktop
@mq-2xl-up
@mq-2xl-only
@mq-2xl-down
// 1080p
@mq-1080p-up
@mq-1080p-only
@mq-1080p-down
// 2k
@mq-2k-up
@mq-2k-only
@mq-2k-down
// 4k
@mq-4k-up

// from to breakpoints
@mq-xs-to-sm
@mq-sm-to-md
@mq-md-to-lg
@mq-lg-to-xl
@mq-xl-to-2xl
@mq-2xl-to-1080p
@mq-1080p-to-2k
@mq-2k-to-4k
<insert-markup>layout.breakpoints-</insert-markup>
// empty
Markup: ../../../snippets/components/empty.hbs
// empty
Source: src/cssframework_v2/less/layout/breakpoints.less, line 1

Helpers, class utilitaires

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Liste des class utilitaires.


// blk-image blk-hero-image stretch
stretch

// hide / show

hide
md:show
md:hide
lg:show
lg:hide
xl:show
xl:hide
xxl:show
xxl:hide

//

no-overflow

// Sticky

sticky-top
sticky-offset-top
sticky-bottom
sticky-offset-bottom

Existent en version md:, lg:, xl: et xxl:
ex :

md:sticky-top

// Alignements

text-left
text-right
text-center
text-justify

Existent en version md:, lg:, xl: et xxl:
ex :

md:text-left

// Tailles

xs / tiny
sm / small
lg / large
xl / xlarge
xxl / xxlarge
xxxl / xxxlarge

// Alignement des .row

screen
wide
broad
tight
tight-left
tight-right
tight-right-to-broad
tight-right-to-wide
tight-right-to-screen
tight-to-broad
tight-to-wide
tight-to-screen
broad-to-tight-left
broad-to-tight
broad-to-wide
broad-to-screen
wide-to-tight-left
wide-to-tight
wide-to-broad
wide-to-screen
screen-to-tight-left
screen-to-tight
screen-to-broad
screen-to-wide
full-screen
full-wide
full-broad
full-tight

Existent en version md:, lg:, xl: et xxl:
ex :

md:screen

// Alignement des contenus d'une row ou d'une colonne

grid-content-center
grid-content-top-left
grid-content-top-center
grid-content-top-right
grid-content-bottom-left
grid-content-bottom-center
grid-content-bottom-right
grid-content-center-left
grid-content-center-right

Existent en version md:, lg:, xl: et xxl:
ex :

md:grid-content-center

// Row

reverse
collapse

// Positions des colonnes

col-span-1
col-span-2
col-span-3
col-span-4
col-span-5
col-span-6
col-span-7
col-span-8
col-span-9
col-span-10
col-span-11
col-span-12

col-start-1
col-start-2
col-start-3
col-start-4
col-start-5
col-start-6
col-start-7
col-start-8
col-start-9
col-start-10
col-start-11
col-start-12

row-span-1
row-span-2
row-span-3
row-span-4
row-span-5
row-span-6
row-span-7
row-span-8
row-span-9
row-span-10
row-span-11
row-span-12

row-start-1
row-start-2
row-start-3
row-start-4
row-start-5
row-start-6
row-start-7
row-start-8
row-start-9
row-start-10
row-start-11
row-start-12

Existent en version md:, lg:, xl: et xxl:
ex :

md:col-start-1
<insert-markup>layout.helpers-</insert-markup>
// empty
Markup: ../../../snippets/components/empty.hbs
// empty
Source: src/cssframework_v2/less/layout/helpers.less, line 1

Spacings

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Liste des class d'espacements.


// Max Width (em)

mw-70
mw-65
mw-60
mw-55
mw-50
mw-45
mw-40
mw-35
mw-30

// Margins

m-none // margin
mi-none // margin inline
mis-none // margin inline start
mie-none // margin inline end
mb-none // margin block
mbs-none // margin block start
mbe-none // margin block end

m-auto
mi-auto
mis-auto
mie-auto
mb-auto
mbs-auto
mbe-auto

m-tiny
mi-tiny
mis-tiny
mie-tiny
mb-tiny
mbs-tiny
mbe-tiny

m-small
mi-small
mis-small
mie-small
mb-small
mbs-small
mbe-small

m-medium
mi-medium
mis-medium
mie-medium
mb-medium
mbs-medium
mbe-medium

m-large
mi-large
mis-large
mie-large
mb-large
mbs-large
mbe-large

// Paddings

p-none // padding
pi-none // padding inline
pis-none // padding inline start
pie-none // padding inline end
pb-none // padding block
pbs-none // padding block start
pbe-none // padding block end

p-tiny
pi-tiny
pis-tiny
pie-tiny
pb-tiny
pbs-tiny
pbe-tiny

p-small
pi-small
pis-small
pie-small
pb-small
pbs-small
pbe-small

p-medium
pi-medium
pis-medium
pie-medium
pb-medium
pbs-medium
pbe-medium

p-large
pi-large
pis-large
pie-large
pb-large
pbs-large
pbe-large

<insert-markup>layout.spacing-</insert-markup>
// empty
Markup: ../../../snippets/components/empty.hbs
// empty
Source: src/cssframework_v2/less/layout/spacing.less, line 1

Text utilities

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Liste des class de styles de texte


// Textes
txt-highlight-1
txt-highlight-2
txt-highlight-3
txt-highlight-4

txt-underline-1

txt-color-1

<insert-markup>layout.text-</insert-markup>
// empty
Markup: ../../../snippets/components/empty.hbs
// empty
Source: src/cssframework_v2/less/typography/styles.less, line 1