Layout

Responsiveness

Blexar is a mobile-first framework

Breakpoints

Blexar has five breakpoints to control column width over screen sizes

• mobile: up to 768px
• tablet: from 769px
• desktop: from 991px
• widescreen: from 1360px
• ultrawide: from 1920px

Elements Sizes

Blexar has five sizes for each element, each size is defined using font-size, then element padding and margin are calculated based on its font-size using em unit

• tiny
• small
• normal
• large
• massive

Related Variables

variable	default	description
$size-tiny	12px	tiny element font-size
$size-small	14px	small element font-size
$size-normal	16px	normal element font-size
$size-large	20px	large element font-size
$size-massive	24px	massive element font-size
$paddding	0.5em	element padding relative to its font-size
$margin	0.5em	element margin relative to its font-size

Naming Conventions

Blexar uses a naming conventions that is based onsuit