Full-bleed layouts

Without the <... class="container"> , elements have no horizontal spacing, as the following image:

Accordion

Accordion Summary

You get an accordion using: <details> . Then, inside it put a <summary>

When <details> is open, its <summary> becomes Sticky till you scroll it out of the viewport, and also gets a background color. Have you noticed it? Try scroll up right now...

Accordion Summary

Accordion content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion

Need the accordion open at page load? <details open> does just that!

Note: When the accordion is open <summary> is Sticky.

When you tap it, it closes, and <details open> becomes <details>

Fiko offers a <class="status"> which displays the current status of the accordion and provide the 'Open', 'Closed' changes in this <summary> .

USE: add this inside it: <span class="status"></span> .

Navigation

Breadcrumbs

Horizontal line

Paragraph before the horizontal line.

Paragraph after the horizontal line.

Horizontal ruler and spacer

<hr class="space"> will provide an horizontal ruler with vertical padding, useful to separate sections, like the one here:

Spacer

Before the Spacer

After the Spacer

<... class="space"> will provide a spacer with vertical padding, useful to separate sections.

Links

I am a link

I am a secondary link

Lists

Unordered list

first
second with link
third

Ordered list

first
second
third

Buttons

Button Disabled

Full Full Disabled

Secondary Secondary Disabled

Paragraph

This is a paragraph, which is max 60 digits wide, to help readability. It ends with a rent full of lorem ipsum dolor sit, amet consectetur adipisicing elit, right?!

New paragraph. Amet consectetur adipisicing elit.

Grid

The <class='grid'> gives a minimal grid system with auto-layout columns.

Figure

Use <figure> when in need for Horizontal Scroll. Here it wraps a table:

Planet	Venus	Mercury	Jupiter	Mars	Saturn	Earth
Diameter (km)	12,104	4,880	6,779	6,779	6,779	12,742
Distance to Sun (AU)	0.72	0.39	1.52	1.52	1.52	1.00
Orbit (days)	225	88	687	687	687	365
Chinese Element	Metal	Water	Wood	Fire	Earth	n.a.
Chinese animal	White Tiger	Black Tortoise	Azure Dragon	Vermilion Bird	Yellow Dragon	n.a.

Here <figure> wraps a image:

figure caption

Blockquote

"Better classless than bloddy bloated, mate!"
— fiko.css

"For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally."
— worldwildlife.org

Headings

Fat vertical spacing for Clarity! and a small line-height cos they look better and there is no need for big space since Headings are big and readable anyway.

h1 FIKO 🐸

h2 FIKO 🐸

h3 FIKO 🐸

h4 FIKO 🐸

h5 FIKO 🐸

h6 FIKO 🐸

This long h1 heading is here just to show how it looks to all you Ladies and Germs!

Card

<article> renders as a card. Card's childs are centered horizontally by default. It has no border unless: <article class="border"> .

Here it wraps an image.

Card

To get the border just add the class: <article class="border">

Call to Action

No border Card

Card content goes here.

Call to Action

Card Title

Card Content goes here.

Call to Action

The article card offers convenient sub-sections header and footer.

Header

First paragraph.

Second paragraph.

Third paragraph.

Auto centering

"I am auto centred."

Use the <article> HTML element to get auto-centering. Pretty Cool huh?!

FULL WIDTH

text-wrap: balance

Fiko headings use <text-wrap: balance> .

Does this browser support it? Yes! Nope.

This long h4 heading is here to show text wrap balance functionality. It's designed to improve readability.

Does it? This long h5 heading is here to let you see if it makes any difference. Does it?

text-wrap: pretty

Use <class="pretty"> to get the newly available readability improvements of the new css functionality: <text-wrap: pretty> It prevents orphans, a single word on its own line, at the end of a text block.

Does this browser support it? Yes! Nope.

Invert css class

Invert + border


              <article class="invert border">

Flips light/dark colours.

<article class="border">

Shows the border

Invert no border

<article class="invert">

Flips light/dark colours.

Container Queries Grid (w.i.p.)

header with image rokma.com

Damn ridiculus fermentum fuckibulum quam fames ad quis spasmod rectum lectus jus.

header

A pretium consequat suspendisse posuere blandit platea turpis elit amet suspendisse consectetur faucibus lorem condimentum semper felis non a mi donec penatibus risus tortor in ullamcorper.

header

body

header

body

header

Light | Dark theme toggle

Fiko's theme toggle currently uses JS, look at this page source code to grab it!

Let me know, in Github issues, if you will prefer/need a pure css toggle instead.

Note: the necessary css styles for the toggle are already included in the component layer.