Package Exports

fiko
fiko/package/fiko.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fiko) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FIKO 🐸 CSS FRAMEWORK.

Zero config DX. Import it from NPM. Link it in your framework. Boom. Done! Fiko is a contained, almost classless, layered, modern (late2023), dynamically sized responsiveness CSS starter framework. VERY 🐸 FIKO!

🐸 GREAT STYLES WITH JUST ONE CSS FILE. 🐸 RESPONSIVE EVERYTHING. 🐸 VARIABLE EVERYTHING. 🐸 LIGHT OR DARK MODE. 🐸 USES NATIVE HTML. 🐸 LAYERS. 🐸 MODERN NORMALISE. 🐸 STAY SANE! Low Code Verbosity.

You write your own classes

🫵 USE IT

Yo, WIP v0.7.0, don't use it yet. Did tell you!

It can be used in many ways.

Usage: Install

pnpm i fiko

Usage: Import

@import 'node_modules/fiko/fiko.css';

then:

<link
  rel="stylesheet"
  href="node_modules/fiko/package/fiko.css"
/>

Usage: Download

Download FIKO and link /fiko.css it in the <head> of your website.

<link rel="stylesheet" href="fiko.css" />

Usage: Astro

import 'fiko.css';

Usage: HTML

Put your custom styles on top of fiko, make sure to not use !important in your css cos it might break things.

import 'fiko' from 'path/to/fiko.css'
import 'my_custom_style' from 'path/to/my_custom_style.css'

Or probably also as show here:

<link
  rel="stylesheet"
  href="https://raw.githubusercontent.com/toybreaker/fiko/main/package/fiko.css"
/>

Most use case will need some custom, brand related styles...

Usage: CUSTOM CSS ON TOP OF FIKO

Write your my_custom_style.css you can leverage the existing fiko layers, just mind the order`.

/* ||| Layer Order Declaration ||| */
@layer reset, root, base, roles, toggle, containers, components, classes;

WHY?

The goal here is to reduce specificity born problems, by isolating rules. Refer to the code comments right inside fiko.css to decide where to put your rules. I'd say you probably go something like this:

@layer components {
  .button {
    color: green;
  }
  .call-to-action {
    font-size: 4ch;
    font-weight: 100;
    border: 1px solid pink;
  }
}

@layer root {
  :root {
    --color-white: #7fffd4;
    --color-black: #222222;
  }
}

or, if you want to change just one color of the 4 can go like this:

@layer root {
  :root {
    --dark-mode: var(--color-darkblue);
  }
}

or define it just for one page, and just the dark color, like this:

<head>
  ...
  <style>
    @layer root {
      :root {
        --color-darkblue: darkblue;
        --dark-mode: var(--color-darkblue);
      }
    }
  </style>
</head>

Generally if you are unsure just put them into un an unnamed, anonymous layer:

@layer {
  p {
    margin: 0;
  }
}

Use Check colour contrast | Devs here!

🫵 DEVELOP

UPGRADE

# Start by LIVING IN THE FUTURE:
pnpm upgrade

SEE INCLUDED SCRIPTS

# See ALL THE AVAILABLE SCRIPTS like this:
cat package.json

LAUNCH NEW PROJECT

# FIKO ASTRO START, PASTE this one:
pnpm create astro@latest && pnpm add fiko

ADD TO EXISTING PROJECT

# Add to EXISTING PROJECT using NPM:
npm astro add fiko

FRONTEND DEMO PAGE

Fiko comes with a demo page, useful to test and dev. Use Browsersync (install it system wide, it's very useful!)

# 🐲 DRY RECURRING START
browser-sync start --s 'package' --files 'package' --no-inject-changes

or:

cd package && browser-sync start --s

Now you have an auto-reload server whatching all files in 'package'. You'd see this in your terminal:

Local: http://localhost:3000
External: http://192.168.100.103:3000

NPM CAVEAT

Sometimes you need to solve dep's issues. This helps a lot, many times:

pnpm install --install-strategy=nested

--install-strategy=nested, Formerly legacy-bundling, instead of hoisting package installs in node_modules, installs packages in the same manner that they are depended on.

NOTE: This may cause very deep directory structures and duplicate package installs as there is no de-duplicating.

LIMITATIONS

FIKO can be used without custom CSS for quick or small projects. However, it’s designed to provide a starting point, like a “reset CSS on steroids”.

Developing with fiko.css require modern CSS knowledge to add any custom look.

BROWSER SUPPORT

FIKO is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does NOT support any version of IE, including IE 11.

COPYRIGHT AND LICENSE

Licensed under the MIT License.

This slim starter was develop to scratch my own needs and it's inspired by today classless css framework such as PICOCSS,WATER, CSSBED, by TOYBREAKER

CHANGELOG

fiko@0.6.0 | Use the platform

Some new layers:

@layer reset, root, base, roles, toggle, containers, components, classes;

Invert color-scheme utility class:

.invert {
  filter: invert(1);

Color constants:

/* COLOURS FOR LIGHT/DARK MODES */
/* '--alpha' CAN BE REDECLARED AS NEEDED */
--alpha: 1;
--color-white: rgba(255, 255, 255, var(--alpha));
--color-black: rgba(0, 0, 0, var(--alpha));

/* MODE-INDIPENDENT CONSTANT COLOURS */
/* When elements need consistency, not switching colors. */
--color-light: var(--color-white);
--color-dark: var(--color-black);

Color mode variables, Set the current varialiable and auto-get the derived ones.

/* Initial styles assuming light theme */
body[data-theme='light'] {
  /* set the CURRENT colours: */
  --currentBG: var(--color-white);
  --currentTXT: var(--color-black);
  --currentTXT50: rgba(0, 0, 0, 0.5);
  --currentV: var(--icon-chevron-black);
  /* DERIVED: apply the CURRENT colours: */
  background-color: var(--currentBG);
  color: var(--currentTXT);
}

fiko@0.5.0 | Restart with moder tech

Restart from ZERO. Css Only. With variables, nesting, layers, dvh, dvw, oklch, etc.. 2023 Platform. Let's Use it, Zod-damm-it! New slim structure:

package/
|- fiko.css
|- index.html

fiko@0.4.1 | DEAD END

Dont fix a broken house, It's faster to make a new one. Crucible moment. SCSS I love you but we gotta move on baby, there are new ways out there. New vehicle, fresh start.