Tässä artikkelissa esitellään tyylit ja työkalut, joiden avulla voit vaikuttaa Barebones-teeman tekstin ulkoasuun.

Barebones-teema poistuu.

Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.

Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.

Teeman typografia-asetukset määritellään SASS-tiedostossa /styles/scss/common/_typography.scss.

Tekstin koko

Oletusteemassa ovat käytössä luokkanimet Text-Small ja Text-Large, joiden avulla voit muuttaa tekstin kokoa.

Tekstin koot määritellään SASS-muuttujilla $font-size-small ja $font-size-large.

Fontit

Teeman fontit määritellään tiedostossa /styles/scss/common/_variables.scss.

Oletusarvoisesti käytössä ovat Google Fonts -palvelun Raleway- ja Roboto-fontit.

Fontit ladataan teeman tiedostossa /helpers/styles.html. Jos haluat vaihtaa käytössä olevia fontteja, hae täällä eri fontti ja lisää sen nimi fonttimuuttujiin $font-base-1 tai $font-base-2.

Tekstin sijainti

Voit sijoittaa tekstin oikeaan tai vasempaan reunaan tai keskittää sen käyttämällä luokkanimiä Text-Left, Text-Right ja Text-Center.

Listat

Voit luoda navigointipalkkeihin sopivan, yhdelle riville asettuvan navigaatiolistan seuraavan merkkauksen avulla:

<div class="InlineNavigation">
	<ul class="NavigationList">
		<li>Ensimmäinen listaelementti</li>
		<li>Toinen listaelementti</li>
	</ul>
</div>

Navigaatiolistan listaelementeille ei anneta mitään listatyyliä.

Font awesome -kuvakkeet

Oletusteema sisältää valmiiksi Font awesome -kuvakemerkistön, jonka avulla voit helposti lisätä teemaan palvelun omia kuvakkeita.

Voit käyttää Font awesomea teemasi SASS-tyyleissä seuraavasti:

.Elementti {
	&::before {
		@include fa-icon;
		content: $fa-var-check;
	}
}

Esimerkissä lisätään .Elementti-elementin before-pseudoelementtiin Font awesomen check-kuvake.

Voit käyttää Font awesomea myös antamalla haluamillesi elementeille Font awesomen luokkanimiä. Alla lisätään teemaan yllä olevan esimerkin kuvake HTML-elementtinä:

<i class="fa fa-check"></i>