HubRedit CSS Documentation
Framework documentation with live examples using only HubRedit classes.
Typography
TEXT ALIGN:
Text Align Left
Text Align Center
Text Align Right
.text-start
.text-center
.text-end
FONT SIZE:
Font Size XS
Font Size SM
Font Size Base
Font Size LG
Font Size XL
Font Size 2XL
.fs-xs
.fs-sm
.fs-base
.fs-lg
.fs-xl
.fs-2xl
FONT WEIGHT:
Font Weight Light
Font Weight Normal
Font Weight Medium
Font Weight Semi Bold
Font Weight Bold
.fw-light
.fw-normal
.fw-medium
.fw-semibold
.fw-bold
FONT STYLE:
Font Style Normal
Font Style Italic
Font Style Oblique
.fst-normal
.fst-italic
.fst-oblique
LINE HEIGHT:
Line Height XS
Line Height SM
Line Height Base
Line Height LG
Line Height XL
Line Height 2XL
.lh-xs
.lh-sm
.lh-base
.lh-lg
.lh-xl
.lh-2xl
TEXT TRANSFORM:
text uppercase
TEXT LOWERCASE
text capitalize
NoNe
.text-uppercase
.text-lowercase
.text-capitalize
.text-none
LETTER SPACING:
Letter Spacing XS
Letter Spacing SM
Letter Spacing Base
Letter Spacing LG
Letter Spacing XL
Letter Spacing 2XL
.ls-xs
.ls-sm
.ls-base
.ls-lg
.ls-xl
.ls-2xl
TEXT DECORATION:
Text Underline
Text Overline
Text Line Through
Text No Decoration
.text-underline
.text-overline
.text-line-through
.text-no-decoration
HEADINGS:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
DISPLAY HEADINGS:
Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6
.display-1
.display-2
.display-3
.display-4
.display-5
.display-6
LEAD TEXT:
Lead Text
.lead
INLINE TEXT ELEMENTS:
Code
Keyboard Input
Sample Output
<strong>
<b>
<em>
<i>
<small>
<mark>
<code>
<kbd>
<samp>
<del>
<ins>
<abbr>
LISTS:
Default List
- HTML
- CSS
- JavaScript
- DOM
- Events
- Install Hubredit
- Create Layout
- Build Components
Unstyled List
- Dashboard
- Profile
- Settings
Inline List
- Home
- About
- Contact
List XS
- Item One
- Item Two
- Item Three
List SM
- Item One
- Item Two
- Item Three
List Base
- Item One
- Item Two
- Item Three
List LG
- Item One
- Item Two
- Item Three
List XL
- Item One
- Item Two
- Item Three
List 2XL
- Item One
- Item Two
- Item Three
.typography
<ul>
<ol>
<li>
.list-unstyled
.list-inline
.list-inline-item
.list-xs
.list-sm
.list-base
.list-lg
.list-xl
.list-2xl
DESCRIPTION LISTS:
- HTML
- Markup language used to structure web pages.
- CSS
- Style sheet language used for designing web pages.
- JavaScript
- Programming language used to create interactive websites.
<dl>
<dt>
<dd>
BLOCKQUOTES:
“Design is not just what it looks like and feels like. Design is how it works.”
— Steve Jobs
<blockquote>
<p>
<cite>
MONOSPACE:
const framework = "Hubredit";
npm install hubredit
.font-mono