Client-First — Version 2

Tyyliohjeistus

Client-First on Finsweetin luoma joukko ohjeita ja strategioita, jotka auttavat sinua luomaan Webflow-verkkosivustoja.

Rakenneluokat

Määritelty ja joustava ydinrakenne, jota voimme käyttää kaikilla tai useimmilla sivuilla.

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

HTML-otsikkotunnisteet

HTML-tunnisteet määrittävät oletusotsikotyylit.

H1

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

H2

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

H3

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

H4

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

H5
Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.
H6
Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

Muut HTML-tunnisteet

HTML-tunnisteet määrittelevät oletustekstin tyylit.

All paragraphs

Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä. Esimerkkiteksti auttaa sinua ymmärtämään, miltä oikea teksti voi näyttää verkkosivustollasi. Esimerkkitekstiä käytetään oikean tekstin paikkamerkkinä.

All links
All Links
All quotes
Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä. Esimerkkiteksti auttaa sinua ymmärtämään, miltä oikea teksti voi näyttää verkkosivustollasi. Esimerkkitekstiä käytetään oikean tekstin paikkamerkkinä.
All Ordered Lists
  1. Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.
  2. Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.
  3. Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.
All Unordered Lists
  • Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.
  • Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.
  • Esimerkkitekstiä käytetään normaalisti läsnäolevan oikean tekstin paikkamerkkinä.

Otsikoiden tyylit

Luokkien otsikko, kun typografian tyyli ei vastaa oletusarvoista HTML-tunnistetta.

heading-style-h1

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

heading-style-h2

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

heading-style-h3

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

heading-style-h4

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

heading-style-h5

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

heading-style-h6

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

Tekstiluokat

Tekstiluokat, kun typografian tyyli ei vastaa oletusarvoista HTML-tunnistetta.

Text Sizes

text-size-large

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-size-medium

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-size-regular

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-size-small

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-size-tiny

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

Tekstin tyylit

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-style-2lines

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

text-style-3lines

Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä. Kiireisen yrittäjän strateginen shamaani visuaalisessa viestinnässä.

Tekstin paksuus

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Tekstin tasaukset

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Napit

Painikeyhdistelmäluokkajärjestelmä.

button
Prosessi
button
is-small
Prosessi
button
is-large
Prosessi
button
is-secondary
Prosessi
button
is-text
Prosessi
button
is-icon
Prosessi

Värit

Hallitse toistuvia teksti- ja taustavärejä.

Väripaletti

#f5fdee
#e7f9da
#dcf5c9
#caecb2
#55944F
#30632b
#3b4634
#171C15
#FF7B31

Tekstivärit

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white

Taustavärit

background-color-black
background-color-grey
background-color-white

Max leveydet

Käytä max-width CSS-ominaisuutta hallitaksesi sisällön enimmäisleveyttä.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Täytteet

Välien apujärjestelmä - täyteluokat. [padding-direction] + [padding-size].

Direction Classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Kokoluokat

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Marginaalit

Välien apujärjestelmä - täyteluokat. [margin-direction] + [margin-size].

Suuntaluokat

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Ikonit

Yhdistä kuvakkeiden koot. icon-height asettaa kuvakkeiden korkeuden. icon-1x1 määrittää kuvakkeiden korkeuden ja leveyden.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Hyödyllisiä apujärjestelmiä

Hyödyllisyysluokkia, joita haluamme käyttää useimmissa projekteissamme.

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex

Webflow elementit

Natiivit Webflow-elementit, joissa on käytetty Client-First-luokkia.

form_component

Esimerkki lomakekomponentista, joka käyttää kansioita.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.