Home

Installation

FCSSF (The Functional CSS Framework) is an agnostic framework. It doesn't require anything to run but a modern browser. However, you can use it with any framework or library you want. In this guide, we will show you how to install properly.

Running this project locally

Go to the TFCSSF repository and clone it. Then, go to the root folder and run:

➜  tfcssf git:(main) ✗ yarn && yarn dev

Browse the src/styles folder for the CSS files. You will find this:

→ tfcssf git:(main) cd src/styles
→ styles git:(master) ls -la
total 376
  320 Jul 21 11:59 .
  192 Jul 21 13:29 ..
  106 Aug 14 16:53 custom.css
49111 Aug 17 15:54 focus.css
44933 Aug 17 15:25 generics.css
49111 Aug 17 14:52 hovers.css
29062 Aug 14 10:16 lg.css
29021 Aug 14 10:16 md.css
 1037 Jul 21 11:59 normalizer.css
  865 Jul 21 11:59 root.css
28514 Aug 14 10:16 sm.css
29017 Aug 14 10:16 xl.css

These are the most important files for your project. You can use them as you want. So, imagine you have a React or Next.js project, go to styles/, delete all the base CSS files in it and copy all the files from this framework. And after that happened, go to your _app.tsx file and add the following lines:

/** @format */

import '@/styles/root.css';
import '@/styles/normalizer.css';
import '@/styles/generics.css';
import '@/styles/hover.css';
import '@/styles/focus.css';
import '@/styles/sm.css';
import '@/styles/md.css';
import '@/styles/lg.css';
import '@/styles/xl.css';
import '@/styles/xxl.css';
import '@/styles/custom.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

The order is really important. We need to import the root.css file first, then the normalizer.css file, and then the generics.css, hovers.css and focus.css files. After that, we can import the media queries files. The order is important because we need to override the styles from the previous files. So, if you want to override the styles from the root.css file, you need to import the root.css file first, and then other files.

After that, you can use a custon.css file where you can add your own styles. This file will be imported after the xxl.css file. Because of inheritance, this file must be the latest to be imported.

Once your setup, in your first view, you should see changes. Write a DIV element with a className='border-dp' and you should see the framework in action:

Now you can start working on your project. But before writing the first lines of code, I advice you to inspect your designs and choose the right breakpoint strategy.

Adding to an existing project

This framework is agnostic. It means you don't need to use a specific framework or library to use it. And since it's pure CSS, you can use it with your current setup. Just make sure the imported files are over your current setup.

/** @format */
import '@/styles/my-current-styles.css';
...
...
import '@/styles/root.css'; // make sure you don't repeat this one
import '@/styles/normalizer.css'; // make sure you don't repeat this one too
import '@/styles/generics.css';
import '@/styles/hovers.css';
import '@/styles/focus.css';
import '@/styles/sm.css';
import '@/styles/md.css';
import '@/styles/lg.css';
import '@/styles/xl.css';
import '@/styles/xxl.css';
import '@/styles/custom.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Since our framework uses a specific naming convention, you can use it with your current setup pretty much without any problem.