Type Simple | Simply-UI

Introduction

Getting Started

Layout

Breakpoints WIPGrid WIP

Content

ColorsTypography

Forms

Buttons WIPFloating Label WIPInput Fields WIP

Components

Badges WIPCards WIPNavbar WIPToasts WIP

Typography

Defaults

By default Simply-UI has a few bases:

  • font-stack is Poppins.
  • font-size is 16px.

Font Sizes

This is font-sm
This is font-md
This is font-lg
This is font-xl
This is font-xxl
<div className="font-sm">this is font-sm</div>
<div className="font-md">this is font-md</div>
<div className="font-lg">this is font-lg</div>
<div className="font-xl">this is font-xl</div>
<div className="font-xxl">this is font-xxl</div>

Sass variables

Simply-UI has adjustable font-size variables that you can adjust on your own!
Adjusting $base-font-size: 1rem; will adjust all following font-size variables.

$base-font-size: 1rem;
$font-size-sm: $base-font-size * 0.75;
$font-size-lg: $base-font-size * 1.5;
$font-size-xl: $base-font-size * 2 1rem;
$font-size-xxl: $base-font-size * 3;

Font Stacks

Simply-UI has multiple built in font-stacks that you can set as a single element's class.
You can request a font-stack through our GitHub!
The current font-stacks built into Simply-UI are:

Helvetica
Lucida-Grande
Verdana
System
Garamond
Georgia
Hoefler-Text
Consolas
Courier-New
Monaco
Tahoma
<div className="font-helvetica">Helvetica</div>
<div className="font-lucida-grande">Lucida-Grande</div>
<div className="font-verdana">Verdana</div>
<div className="font-system">System</div>
<div className="font-garamond">Garamond</div>
<div className="font-georgia">Georgia</div>
<div className="font-hoefler-text">Hoefler-Text</div>
<div className="font-consolas">Consolas</div>
<div className="font-courier-new">Courier-New</div>
<div className="font-monaco">Monaco</div>
<div className="font-tahoma">Tahoma</div>