Texts, sizes, alignments, labels in Quickly

Here you will find documentation and examples about the typography in Quickly, covering global configurations, headers, body text, lists, text alignments and more.

Global configurations

Remember that you always have the freedom to customize every aspect of this framework.You can achieve it by creating your own CSS rules and linking your CSS file after calls to the predetermined styles of Quickly in the header section of your HTML document.

Headers H

Label Description
h1 The applied font size is 2.5rem
h2 El font size applied to 2rem
h3 The applied Font Size is 1.75rem
h4 The applied Font Size is 1.5rem
h5 The applied Font Size is 1.25rem
h6 The applied font size is 1.12rem

Sizes applied to labels H

h1 Quickly title

h2 Quickly title

h3 Quickly title

h4 Quickly title

h5 Quickly title
h6 Quickly title
HTML 
                                    
    <h1>This is Quickly's title in h1</h1>   
    <h2>This is Quickly's title in h2</h2>
    <h3>This is Quickly's title in h3</h3>  
    <h4>This is Quickly's title in h4</h4>  
    <h5>This is Quickly's title in h5</h5>  
    <h6>This is Quickly's title in h6</h6>

Classes .hn°

Classes .h1 until .h6 They are available for when you need to replicate the source style of a header, but you cannot use the corresponding HTML element.

.h1 (2,3,4,5,6)

Class Description
.h1 The applied font 2.5rem
.h2 The applied font 2rem
.h3 The applied font 1.75rem
.h4 The applied font 1.5rem
.h5 The applied font 1.25rem
.h6 The applied font 1.12rem

Examples of sizes

h1 Quickly title

h2 Quickly title

h3 Quickly title

h4 Quickly title

h5 Quickly title

h6 Quickly title

HTML 
                                    
    <p class="h1">This is Quickly's title with class h1</h1>   
    <p class="h2">This is Quickly's title with class h2</h2>
    <p class="h3">This is Quickly's title with class h3</h3>  
    <p class="h4">This is Quickly's title with class h4</h4>  
    <p class="h5">This is Quickly's title with class h5</h5>  
    <p class="h6">This is Quickly's title with class h6</h6>

Semantic labels

This is a list of semantic labels included in this framework.

Label Description
p By default, the height for the paragraphs is 1rem, equivalent to 16px.
strong The "Strong" label is assigned a Font Weight Bold.
em The "EM" label is assigned a normal and italic Font Weight.
ins The "INS" label is assigned a normal Font Weight and with Underline.
small The "Small" label is assigned a Font Size of .8rem (1rem = 16px) = 12px high.
del The "of" label is assigned a crossed out.
mark The "Mark" label is assigned a background and a text color.

Tag examples

P. This is the example of the paragraph label.

Strong. This is the example of the label strong.

Em. This is the example "For label em" In the paragraph.

Ins. This is the example For label ins In the paragraph.

Small. This is the example For label small.

Del. This is the example "For label del" In the paragraph.

Mark. This is the example For label mark In the paragraph.

HTML 
                                             
    <p>P. This is the paragraph example.</p>   
    <p>Strong. This is the example <strong>strong</strong>.</p>    
    <p>Em. This is the example <em>For label em</em>.</p>    
    <p>Ins. This is the example <ins>For label ins</ins>.</p>     
    <small>Small. This is the example For label small.</small>   
    <p>Del. This is the example <del>"For label del"</del>.</p>    
    <p>Mark. This is the example <mark>For label mark</mark>.</p>

Classes to apply underlined and crossed out to text

We present three classes designed to add underlined and crossed out to the text without compromising the semantic integrity of your website.

Class Description
.underline Apply an underlined line to the text that has the assigned class.
.midleline Apply a crossed out to the middle of the text that has the assigned class.
.overline Apply a line above the text that has the assigned class.

Tag examples

Underline. This is the example of the label.

Middleline. This is the example of the label.

Overline. This is the example of the label.

HTML 
                                               
    <p class="underline">Underline. This is the example of the label.</p>   
    <p class="middleline">Middleline. This is the example of the label.</p>    
    <p class="overline">Overline. This is the example of the label.</p>

Text heights

When you want to highlight a text within a paragraph, for example, above the others, you can consider the use of Font-S-N ° classes.These will provide you with the freedom to choose the most appropriate size.

.font-s-n°

Class Description
.font-s-1 The applied font 2rem
.font-s-2 The applied font 1.75rem
.font-s-3 The applied font 1.5rem
.font-s-4 The applied font 1.25rem
.font-s-5 The applied font 1.2rem
.font-s-6 The applied font 1.12rem
.font-s-7 The applied font .8rem
.font-s-8 The applied font .6rem

Examples of sizes

Class height font-s-1

Class height font-s-2

Class height font-s-3

Class height font-s-4

Class height font-s-5

Class height font-s-6

Class height font-s-7

Class height font-s-8

HTML 
                                    
    <p class="border bg-white rounded p-1 font-s-1">Class height font-s-1</p>   
    <p class="border bg-white rounded p-1 font-s-2">Class height font-s-2</p>
    <p class="border bg-white rounded p-1 font-s-3">Class height font-s-3</p>  
    <p class="border bg-white rounded p-1 font-s-4">Class height font-s-4</p>  
    <p class="border bg-white rounded p-1 font-s-5">Class height font-s-5</p>  
    <p class="border bg-white rounded p-1 font-s-6">Class height font-s-6</p>  
    <p class="border bg-white rounded p-1 font-s-7">Class height font-s-7</p>  
    <p class="border bg-white rounded p-1 font-s-8">Class height font-s-8</p>

Source style and thickness

When you want to highlight a text within a paragraph, for example, above the others, you can consider the use of Font-S-N ° classes.These will provide you with the freedom to choose the most appropriate size.

.font-s-n°

Class Description
.font-l Font-Light. It shows with a minor thickness than that of your father element, providing a more delicate and subtle appearance.
.font-n Font-Normal. It is the default weight of most sources, providing a standard and balanced thickness.
.font-b Font-Bold. It shows the source with a greater thickness, highlighting it and making it more prominent.
.font-i Font-Italic. It makes the text tilt to the right, giving it a special emphasis and differentiating it from the normal text.

Examples of sizes

font-l This is the text for example.

font-n This is the text for example.

font-b This is the text for example.

font-i This is the text for example.

HTML 
                                    
    <p class="font-l">This is the text for example.</p>   
    <p class="font-n">This is the text for example.</p>
    <p class="font-b">This is the text for example.</p>  
    <p class="font-i">This is the text for example.</p>

line spacing

Quickly CSS Grid space classes adjust the space between text lines, improving readability and web design.Apply different values ​​to adapt to various screen sizes and styles, ensuring a clear and attractive presentation of your content. Optimize the reading experience on your websites with the Quickly space options.

.line-h-n°

Class Description
.line-h-1 By default, the HTML applies one line spot with a 1.25 -time line height the source size of the element.This adjustment introduces an additional space between the text lines, which improves the readability in a subtle way.
.line-h-2 The line spacing will be a line height of 1.5 times the source size, providing a larger space between the text lines, which is useful to improve the readability of longer text paragraphs.
.line-h-3 The line spacing will be a line height of 1.75 times the size of the source, adding a considerable space between the lines, ideal for more dense text blocks.
.line-h-4 The line spacing will be a line height 2 times the source size.This value adds a wide space between the lines, significantly improving readability in long texts.
.line-h-5 The line spacing will be a 2.25 line height.With this configuration, the line height will be twice the source size, providing a very wide space between the text lines, ideal to maximize readability and create a visually spacious design.
.line-h-6 The line spacing will be a 2.5 -time line height the source size of the element.

Examples of sizes

line-h-1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

line-h-2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

line-h-3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

line-h-4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

line-h-5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

line-h-6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

HTML 
                                    
    <p class="line-h-1">Lorem ipsum dolor sit amet...</p>   
    <p class="line-h-2">Lorem ipsum dolor sit amet...</p>   
    <p class="line-h-3">Lorem ipsum dolor sit amet...</p>   
    <p class="line-h-4">Lorem ipsum dolor sit amet...</p>   
    <p class="line-h-5">Lorem ipsum dolor sit amet...</p>   
    <p class="line-h-6">Lorem ipsum dolor sit amet...</p>

Great texts

If you need to highlight, you can use the following classes to make your design even more striking.

.font-s-n°

Class Description
.dis-s-1 The applied font 5rem
.dis-s-2 The applied font 4.5rem
.dis-s-3 The applied font 4rem
.dis-s-4 The applied font 3.5rem
.dis-s-5 The applied font 3rem
.dis-s-6 The applied font 2.75rem

Examples of sizes

dis-s-1

dis-s-2

dis-s-3

dis-s-4

dis-s-5

dis-s-6

HTML 
                                    
    <h1 class="dis-s-1">dis-s-1</h1>   
    <h1 class="dis-s-2">dis-s-2</h1>
    <h1 class="dis-s-3">dis-s-3</h1>  
    <h1 class="dis-s-4">dis-s-4</h1>  
    <h1 class="dis-s-5">dis-s-5</h1>  
    <h1 class="dis-s-6">dis-s-6</h1>

Text alignments

To align texts, there are three forms: to the right, the center and to the left.

.text-aOption (r,c,l)

Class Description
.text-ar Text-Align-Right. Align the text to the right.
.text-ac Text-Align-Center. Align the text to the center.
.text-al Text-Align-Left. Align the text to the left.

Alignment examples

text-right
text-center
text-left
HTML 
                                    
    <div class="text-ar">text-right</div>   
    <div class="text-ac">text-center</div>
    <div class="text-al">text-left</div>

Text transformations

To transform texts, there are three more forms one: Capitalize, Lowercase, Uppercase y none.

.text-tOption (c.l.u.n)

Class Description
.text-tc Text-Transform-Capitalize. Transforms the text so that the first letter of each word is capitalized and the others in lowercase.
.text-tl Text-Transform-Lowercase. Turn the entire text into lowercase.
.text-tu Text-Transform-Uppercase. Turn the entire text into capital letters.
.text-tn Text-Transform-None. It maintains the text without modifying, without any transformation of capital or lowercase.

Transformation examples

text-tc
text-tl
text-tu
text-tn
HTML 
                                    
    <div class="text-tc">text-tc</div>   
    <div class="text-tl">text-tl</div>
    <div class="text-tu">text-tu</div>  
    <div class="text-tn">text-tn</div>

Avoid overflows in extensive texts.

To avoid the overflow of long text within a container, use the class .text-wrap. This class adjusts Automatically the text so that it is divided into several lines when necessary, keeping everything inside the container.

.text-wrap

Normal class Description
.text-wrap This class causes the long text to adjust correctly and does not cause overflow of the container, maintaining the appearance of the content within the established limits.

Example of overflow

with text-wrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css">

without text-wrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css">

HTML 
                                    
    <div class="text-wrap">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css">
    </div>