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.

YO IT'S ONLY VERSION 0.3.9

W.I.P., DON'T USE IT YET!

465 downloads? It doesn't even work yet!

465 downloads?

W.I.P., DON'T USE IT YET! Did tell you!

STAY SANE | Low Code Verbosity, just few Classes with `var(--magic)`

VERY 🐸 FIKO! Test here

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

🫵 USE IT

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

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

Install with pnpm (or npm)

pnpm i fiko

Usage: Astro

import 'fiko.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

or with bash shortcut:

prc

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 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.

FIKO `fiko.css`

Full zero config DX. Import it from NPM. Link it in yor framework. Boom. Done!

Use this version when you write your own classes

FIKO is compiled with this settings:

enable-semantic-container: true

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 when you write your own classes

FIKO CLASSLESS is compiled with this settings:

When :

enable-semantic-container: true
enable-classes: false

FLUID `fiko.fluid.css`

No max width on .container here. FULL-ON AT ALL TIMES!

Use this version when you need a fluid, FULL-VIEWPORT container.

FIKO FLUID is compiled with this settings:

enable-semantic-container: true
enable-viewport: false
enable-classes: false

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