Package Exports

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.

STAY SANE! LOW CODE VERBOSITY, just few classes with `var(--magic)`, VERY FIKO!

"YO, THIS IN FULL-ON WORK IN PROGRESS. I'm telling 🫵 you!"

VERSION: 0.2.11

TEST: FIKO 🐸 CSS test

🐸 GREAT STYLES WITH JUST ONE CSS FILE
🐸 RESPONSIVE EVERYTHING
🐸 LIGHT OR DARK MODE
🐸 USES THE SEMANTICS OF NATIVE HTML TAGS.
🐸 CLASSLESS OPTION.
🐸 FULL fiko.min.css version. 11 CLASSES. 26kb.
🐸 CLASSLESS fiko.classless.min.css. ZERO CLASSES. 24kB.
🐸 FLUID fiko.fluid.classless.min.css FULL-VIEWPORT, ZERO CLASSES versions. 24kB.

🫵 USE IT

Download FIKO and link /css/fiko.min.css ( or any other version... ) in the <head> of your website.

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

Install with pnpm (or npm)

pnpm i fiko

Usage: Astro

import 'alku/alku.css';

Usage: HTML

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

🫵 DEVELOP CLI STUFF

FRONTEND

Run a simple Python server on lh:3000. (You'll need to install Python for your sys first!)

# 🐲 DRY RECURRING START
echo '|';
echo 'cd src/web/';
cd src/web/;
echo '|';
echo '🐲 now i am here:';
CWD=$(pwd -P)
echo $CWD
echo '|';
echo 'cd serve';
serve

PACKAGE

# Start by LIVING IN THE FUTURE:
pnpm upgrade

BUILD

# BUILD.
pnpm run F

DEV

# DEV:
pnpm run dev

LINT

# LINT:
pnpm run lint

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 astro add fiko

OPEN FIKO NPM PAGE

# Open fiko NPM page in the default browser:
pnpm repo

ADD TO EXISTING PROJECT

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

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.

WHY THREE VERSIONS?

To cater to 3 different kinds of STARTER TEMPLATE needs.

CLASSLESS

fiko.classless.css No helpers nor utilities, FIKO classless still provides: header,main, footer behaving as DYNAMICALLY-SPACED containers, i.e.: have horizontal spacing, and max width on .container.

Use this version if you need centred viewports

FLUID

Or use the fiko.fluid.classless.css version. When you need a fluid, FULL-VIEWPORT container. No max width on .container here. FULL-ON AT ALL TIMES!

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

fiko