#Texts

Working with texts

Headings

H1: Something wonderful is gonna happen

H2: Something wonderful is gonna happen

H3: Something wonderful is gonna happen

H4: Something wonderful is gonna happen

H5: Something wonderful is gonna happen

H6: Something wonderful is gonna happen

<h1>Something wonderful...</h1>
<h2>Something wonderful...</h2>
<h3>Something wonderful...</h3>
<h4>Something wonderful...</h4>
<h5>Something wonderful...</h5>
<h6>Something wonderful...</h6>

Font size

You can change the all the fonts sizes from the :root variables

	/* Fonts size */
	--body-font-size: 1em;
	--footer-font-size: 1em;
	--blockquote-font-size: 1em;
	--caption-font-size: .9em;
	--muted-font-size: .8em;
	--h1-font-size: 2.5em;
	--h2-font-size: 2.2em;
	--h3-font-size: 1.9em;
	--h4-font-size: 1.6em;
	--h5-font-size: 1.3em;
	--h6-font-size: 1.1em;

The basic labels are previously configured with the corresponding variables. However, you have a class and a variable available to directly override default font size value in the html: be-font-size, --size.

<p class="be-font-size" style="--size: 26px">Lorem ipsum dolor...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in pariatur.

Fonts Families

beCSS use four of the basic, safe and recomended fonts families: Arial, Verdana, Tahoma and Trebuchet.

Those fonts are transfered to variables and classes too.

	--font-type-1: Arial, Helvetica, sans-serif;
	--font-type-2: Verdana, Arial, Helvetica, sans-serif;
	--font-type-3: Tahoma, sans-serif;
	--font-type-4: "Trebuchet", "sans-serif";

/* Alternatily you have the fonts as classess
 * in case you need it */
.be-font-type-1 
.be-font-type-2 
.be-font-type-3 
.be-font-type-4 
/* Plus the classes */
.be-text-muted

In this way, in addition to defining the general parameters of all pages, specific modifications can also be made in certain parts.

Text Colors

You can use the Brand Color Schema to stylize the text. To do this, just use the following classes.

<!-- Brand Color for Texts -->
.be-text-brand-color
.be-text-dark-shades
.be-text-dark-accent
.be-text-light-accent
.be-text-light-shades
.be-text-dark-dark
.be-text-black
.be-text-white

Overriding text color

In addition to the specific classes to change the color of the texts, you can also override the default color using the be-text-color class and then the --text-color: variable.

<!-- Using the Flat UI Scheme Color -->
<p class="be-text-color" style="--text-color: var(--pumpkin)">Dolor sit amet...</p>

<!-- Using a personalized color -->
<p class="be-text-color" style="--text-color: blue">Dolor sit amet...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h1>This heading is outside of the container</h1>
<div class="be-container be-text-col-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

<!-- You can put 2 to 4 columns -->
.be-text-col-2
.be-text-col-3
.be-text-col-4
<!-- You can use the .be-gap family
to change space between columns. 
See Grid section for more details -->

Capital effect

You can give a nice design to the first character of the first paragraph of an article using the be-capital class, as you can see below.

<!-- It only works with the first paragraph
     contained in a div -->
  <p class="be-capital">Lorem ipsum dolor...</p>

Overriding Capital effect

You can override the be-capital class to change the color of the letter on which the effect has been executed.You can use any of the colors of the brand palette as well as the Flat UI Color Scheme that comes integrated with beCSS.

<!-- Using the Flat UI Scheme Color -->
<p class="be-capital" style="--color: var(--orange)">Dolor sit amet...</p>

<!-- Using personalized color -->
<p class="be-capital" style="--color: red">Dolor sit amet...</p>

Text muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<!-- Text Muted -->
<p class="be-text-muted">Lorem ipsum dolor sit amet...</p>

Text Marked

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p>Lorem ipsum <span class="be-text-marked">dolor sit amet</span>, consectetur adipiscing elit...</p>

Align Text

<div class="container be-width-40">
<p>Lorem ipsum consectetur...</p>
<p class="be-text-right">Lorem ipsum consectetur...</p>
<p class="be-text-center">Lorem ipsum consectetur...</p>
</div>

Text Transform

Lorem ipsum consectetur...

Lorem Ipsum CONSECTUR...

<p class="be-uppercase">Lorem ipsum consectetur...</p>
<p class="be-lowercase">Lorem Ipsum CONSECTUR...</p>

Lists

The traditional Html lists with a little more slack.

<ul class="be-ul">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ol class="be-ol">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>

Text decoration

be-text-underline: Lorem ipsum consectetur

be-text-strike: Lorem ipsum consectetur

<p><span class="be-text-underline">Lorem ipsum consectetur</span></p>

<p><span class="be-text-strike">Lorem ipsum consectetur</span></p>