<p>This website requires JavaScript to deliver the best possible experience.</p>



Blexar framework is designed to work with very tiny places and to support ultrawide screens.


Blexar is a mobile-first framework


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