• Gratis verzending vanaf € 150,-

Style guide

Waardes zijn van Demo Hyvä gepakt. En begin dit bestand is opgezet in Groveko. Het kan zijn dat dingen nog onduidelijk zijn tijdens het begin dan zijn er ?? neergezet. De andere waardes zijn uitgezocht.

01Breakpoints

LG is used to switch between small screens and large screens.
This will also be the breakpoint for switching between mobile and desktop menu.

Container has a max width of 1600px. This is four times 376px and three guters of 32px.
When your screen is smaller then 1648px then the container will be 100% with outside gutters of 1.5rem(24px).

breakpoints demo

2XL: 1648px; four columns (2rem(32px) gutters(gap-8), 1.5rem(24px) outside gutters)

XL: 1400px; four columns (2rem(32px) gutters(gap-8), 1.5rem(24px) outside gutters)

LG: 1200px; four columns (2rem(32px) gutters(gap-8), 1.5rem(24px) outside gutters)

MD: 900px; two columns (2rem(32px) gutters(gap-8), 1.5rem(24px) outside gutters)

SM: 640px; one column (1.5rem(24px) outside gutters)

Below: 640px; one column (1.5rem(24px) outside gutters)

02Logos

Groveko logo Groveko email logo Groveko favicon

Logo header

Logo email

Favicon

03Colors

Body: background-color: rgba(250,250,250,var(--tw-bg-opacity)); --tw-bg-opacity: 1; box-sizing: border-box; overflow-y: scroll; margin: 0;

Primary color

Helderblauw: #0080ff;

Lighter: #9fcfff;

Darker: #006dd9;

Classes: text-quaternary & bg-tertiary

Secondary color

Zonne geel: #fbd300;

Lighter: #fff3b5;

Darker: #d8b500;

Classes: bg-quaternary

Tertiary color

Donkerblauw: #001754;

Lighter: #93b0ff;

Darker: #000d2f;

Classes: text-secondary & bg-secondary

Quaternary color:

Luchtblauw: #edf6ff;

Classes: bg-primary

Quinary color:

Rood: #e02b27;

Classes: text-quinary & bg-quinary

Senary color:

Groen: #03a100;

Classes: text-senary & bg-senary

Container/septenary color

Wit: #fff;

Darker: #f9f9f9;

Classes: bg-container & text-tertiary

Text color

Graniet: #333;

Lighter: #8b8b8b;

Classes: text-primary

04Typography

Basis text is font-family: "Roboto", sans-serif; font-size: 1rem (16px); line-height: 1.5rem (24px); letter-spacing: 0 (normal); --tw-text-opacity: 1; color: rgba(51,51,51,var(--tw-text-opacity)) (color:#333333;);

On headings are margins active.

Heading H1 5xl

Font size: 2.5rem (40px)
Line height: 3rem (48px)
Margin bottom: 1.5rem (24px)
Tailwind class .text-5xl

Heading H2 4xl

Font size: 2rem (32px)
Line height: 2.75rem (44px)
Margin bottom: 1.5rem (24px)
Tailwind class .text-4xl

Heading H3 3xl

Font size: 1.75rem (28px)
Line height: 2.5rem (40px)
Margin bottom: 1.5rem (24px)
Tailwind class .text-3xl

Heading H4 2xl

Font size: 1.5rem (24px)
Line height: 2.25rem (36px)
Margin bottom: 1.5rem (24px)
Tailwind class .text-2xl
Heading H5 xl
Font size: 1.25rem (20px)
Line height: 2rem (32px)
Margin bottom: 1.5rem (24px)
Tailwind class .text-xl

Mobile headings switch breakpoint lg.

Heading H1 mobile

Font size: 1.75rem (28px)
Line height: 2.5rem (40px)
Margin bottom: 1rem (16px)
Tailwind class .text-3xl

Heading H2 mobile

Font size: 1.5rem (24px)
Line height: 2.25rem (36px)
Margin bottom: 1rem (16px)
Tailwind class .text-2xl

Heading H3 mobile

Font size: 1.25rem (20px)
Line height: 2rem (32px)
Margin bottom: 1rem (16px)
Tailwind class .text-xl

Heading H4 mobile

Font size: 1.125rem (18px)
Line height: 1.75rem (28px)
Margin bottom: 1rem (16px)
Tailwind class .text-lg
Heading H5 mobile
Font size: 1.125rem (18px)
Line height: 1.75rem (28px)
Margin bottom: 1rem (16px)
Tailwind class .text-lg

Text xl

Font size: 1.25rem (20px)
Line height: 2rem (32px)
Tailwind class .text-xl

Text lg

Font size: 1.125rem (18px)
Line height: 1.75rem (28px)
Tailwind class .text-lg

Text base

Font size: 1rem (16px)
Line height: 1.5rem (24px)
Tailwind class .text-base

Text sm

Font size: 0.875rem (14px)
Line height: 1.25rem (20px)
Tailwind class .text-sm

Text xs

Font size: 0.75rem (12px)
Line height: 1rem (16px)
Tailwind class .text-xs

Font examples

This text has a secondary color. Use class .text-secondary

This is text in color: #fff. Use class .text-tertiary

This is text in color: #0080ff. Use class .text-quaternary

This is text in color: #e02b27. Use class .text-quinary

This is text in color: #03a100. Use class .text-senary

This is an italic text. Use class .italic

This is an underline text. Use class .underline

This is an underline text with offset of 8px. Use class .underline and .underline-offset-8

This is an overline text. Use class .overline

This is a line-through text. Use class .line-through

This is a text left alignment. Use class .text-left

This is a text center alignment. Use class .text-center

This is a text right alignment. Use class .text-right

This is font-weight: 400; text. Use class .font-normal (also the default)

This is font-weight: 700; text. Use class .font-bold (700 is same as bold)

Paragraphs

This is a text in a paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ligula vel arcu aliquet accumsan. Ut in eros euismod, pulvinar elit et, placerat quam. Morbi blandit felis in justo rutrum, et pharetra lorem blandit. Donec ut enim viverra, bibendum justo eu, semper sapien. Pellentesque pellentesque justo quis mi congue, in elementum velit semper. Sed sodales bibendum ante non semper. Nullam dui odio, elementum a nunc at, ullamcorper tincidunt lorem. Praesent odio eros, mollis vel nisl id, interdum faucibus justo. Nullam porta, est quis bibendum aliquam, nunc massa placerat dui, ut accumsan libero massa et sem. Nulla facilisi. Etiam volutpat mi at risus pulvinar, semper gravida tortor suscipit. Sed mollis maximus tortor quis interdum. Nunc sit amet ante arcu.


This is a text that is not in a paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ligula vel arcu aliquet accumsan. Ut in eros euismod, pulvinar elit et, placerat quam. Morbi blandit felis in justo rutrum, et pharetra lorem blandit. Donec ut enim viverra, bibendum justo eu, semper sapien. Pellentesque pellentesque justo quis mi congue, in elementum velit semper. Sed sodales bibendum ante non semper. Nullam dui odio, elementum a nunc at, ullamcorper tincidunt lorem. Praesent odio eros, mollis vel nisl id, interdum faucibus justo. Nullam porta, est quis bibendum aliquam, nunc massa placerat dui, ut accumsan libero massa et sem. Nulla facilisi. Etiam volutpat mi at risus pulvinar, semper gravida tortor suscipit. Sed mollis maximus tortor quis interdum. Nunc sit amet ante arcu.

Listings

This is the default list-style for UL and OL so no class needed. But when need use class .list-none to the UL/OL.
  • Lorem ipsum dolor sit amet
  • Praesent commodo euismod varius
  • tempus quis laoreet eu, auctor at ex
  • Phasellus hendrerit nunc sed ultrices fermentum
For this list-style add class .list-disc and .list-inside to the UL.
  • Lorem ipsum dolor sit amet
  • Praesent commodo euismod varius
  • tempus quis laoreet eu, auctor at ex
  • Phasellus hendrerit nunc sed ultrices fermentum
For this list-style add class .list-decimal and .list-inside to the OL.
  1. Lorem ipsum dolor sit amet
  2. Praesent commodo euismod varius
  3. tempus quis laoreet eu, auctor at ex
  4. Phasellus hendrerit nunc sed ultrices fermentum

05Buttons & links

Links

A link in a paragraph text.

Only a link (hover me to get underline) Can be used in places like the footer menu's

For some nice link hover ideas click here


Hover/focus elements below to see differents.


Link styled as button primary

Link styled as button secondary

Link styled as button tertiary


Link styled as button quaternary


Link styled as button quinary










06Form & inputs

Form

A form with class form and card.

Voor inputs and selects wordt de border kleur #d5d4cf gebruikt.

Voor secondary selects die luchtblauwe achtergrond hebben wordt de donkerblauwe tekst/rand gebruikt.

Class form-select added to select.

Class .cursor-pointer, .inline-block, .mb-0 and .pl-2 was added to input and label.

This are demo radio input. Do you want that?

Class .cursor-pointer, .inline-block, .mb-0 and .pl-2 was added to input and label.

This are demo checkbox input. Do you want that?

07Images

Moeten we nog iets over object-fit zeggen? Bron

Dit omdat we vaak mee maken dat afbeeldingen niet perfect worden geupload qua afmeetingen en dan kan dit een standaard waarde zijn.

Here will come information about images.

Images when possible need to be send as a svg files.

Icons

Check icon

Plus icon

Minus icon

Caret icon - dropwdown

Chevron icon - carrousel

Arrow icon

Mail icon

Search icon

User icon

Phone icon

Shopping cart icon

Shopping cart full icon

Shopping cart add icon

Facebook icon

Instagram icon

Linkedin icon

YouTube icon

08Borders

Borders have a width of 1px and color #8b8b8b and have de classes border border-primary or border border-container.

When in design is used a different hex gray color we still use #8b8b8b because of continuity. Only on exception we use lighter of darker.

Secondary borders have a width of 2px and color of Helderblauw #0080ff and have de classes border-2 border-secondary rounded-2xl.

Primary lighter #e6e6e6
Primary #8b8b8b
Primary darker #141414
Secondary #0080ff
As box width a boder

09Indents

Padding/Margins

Why use REM? The purpose is to customize the reading experience for the device used. As element padding values and margins are expressed using rem, the entire component scales with the device size.

Padding and margins are also using the rem value's. Where p-4 and m-4 are equal to 1rem. Which means that p-4 and m-4 are equal to 16px;

@Daniel dit hier onder is standaard Tailwind. Ik zou zeggen dat we op 1 of ander manier afspreken dat bijvoorbeeld alleen: p-0, p-1, p-2, p-4, p-8, etc. worden gebruikt. Ook kunnen we deze veel fout dan misschien aanhouden voor hoogtes van dingen?

classes to use p can be changed by m.
p-0 padding: 0;
p-0.5 padding: 0.125rem; (2px)
p-1 padding: 0.25rem; (4px)
p-1.5 padding: 0.375rem; (6px)
p-2 padding: 0.5rem; (8px)
p-2.5 padding: 0.625rem; (10px)
p-3 padding: 0.75rem; (12px)
p-3.5 padding: 0.875rem; (14px)
p-4 padding: 1rem; (16px)
p-5 padding: 1.25rem; (20px)
p-6 padding: 1.5rem; (24px) Phone left-right padding
p-7 padding: 1.75rem; (28px)
p-8 padding: 2rem; (32px)
p-9 padding: 2.25rem; (36px)
p-10 padding: 2.5rem; (40px)
p-11 padding: 2.75rem; (44px)
p-12 padding: 3rem; (48px)
p-14 padding: 3.5rem; (56px)
p-16 padding: 4rem; (64px)
p-20 padding: 5rem; (80px)
p-24 padding: 6rem; (96px)
From here it goes each time 1 rem more so in steps of 4.

10Messages