CSS Framework

How to use Foundation CSS Framework with React.js?

Foundation is a responsive front-end framework build with HTML, CSS, and JavaScript.

Rajdeep Singh
FrontEnd web

--

Foundation is a great CSS framework. Foundation framework provides lots of functionality to create a responsive website with write low CSS code. Compared to Bootstrap and Bulma, the Foundation CSS framework has not created a huge impact on the developer community. That is a very small drop-back for us.

Foundation CSS framework contains 29k stars as compared to Bootstrap contains 150k stars on GitHub. I know this huge difference between the two frameworks. But one thing I definitely told you is that the Foundation CSS framework slows to gain popularity in the developer community, according to Npm analytic.

Install Foundation 6 with react-foundation and use it with react.js
Install Foundation 6 with react-foundation and use it with react.js

Suppose you think of installing the Foundation framework in your react.js project. You follow these steps.

  1. Using CDN
  2. Download locally
  3. Custom Download
  4. Using Npm and Yarn
  5. Learn about foundation CSS
  6. Community Support

Using CDN

This is my favorite method to install any Libray in the project. If your app is very small, portfolio, or maybe a class project. You definitely use the CDN method. Secondly, you start a quick test app, then I recommended you too. The third way your app is small, and you try to load fast in the browser. Then you defiantly use the CDN method.

CDN Code

<!-- Compressed CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous"><!-- Compressed JavaScript --><script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>

Check all CDN Links with the specific version for app

React.js CDN Example

Go to the public folder and paste code inside the index.html file

CDN Demo With Codesandbox

Foundation CSS Framework demo with React.js

Download locally

If you try to download Foundation CSS Framework CSS and javascript files locally on your laptop.

Firstly go to the official Foundation website home page and click the Download foundation 6 button.

After receiving all files related to CSS and javascript like jQuery, plugin, and Compiled CSS and js files.

Official Foundation website.

Custom download

Foundation CSS Framework provides a custom download option for the developer. You download a specific component for your project.

Note

Sorry Custom support currently does not work in Foundation CSS Framework. Check GitHub issue also.

Using Npm and Yarn

You use the foundation framework with react js. Then I highly recommend you to use the react-foundation library to make a website or app with react.js and foundation CSS.

The react-foundation library provides custom build components use foundation CSS. You import components for the react-foundation library and use them on your project.

Note

Firstly install foundation-sites and react-foundation npm package or library in your project. Without install the foundation-sites package, react-foundation is not working in your project.

Install foundation-sites:

npm install foundation-sites --save

Install library:

npm install react-foundation --save

How to use it?

Use react-foundation library in your app straightforward process. We learn step by step.

Steps

  1. Import foundation CSS
  2. Import react-foundation component
  3. Using inside app
  4. Blog Demo

Import foundation CSS

First, import the foundation CSS file in your react js app. you import the CSS file into the index.js file.

import { StrictMode } from "react";
import ReactDOM from "react-dom";
// Add Foundation to index.js
import 'foundation-sites/dist/css/foundation.min.css';
// custom component
import App from "./App";
const rootElement = document.getElementById("root");ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,rootElement
);

Import react-foundation component

Firstly import the react-foundation component in your react.js project. Using javascript import method.

// Import react-foundation componentsimport { Grid, Cell,Menu,MenuItem } from "react-foundation";

Read About all builtin Component in react-foundation

Using inside app

After import the react-foundation component and then use it in its own component.

First example

// Import react-foundation components
import { Menu,MenuItem } from "react-foundation";
export default function Header() {return <Menu>
<MenuItem><a href="/">Home</a></MenuItem>
<MenuItem><a href="/">Blog</a></MenuItem>
<MenuItem><a href="/" >About</a></MenuItem>
<MenuItem><a href="/" >Contact</a></MenuItem>
</Menu>
}

Second example

// Import react-foundation components
import { MediaObject, MediaObjectSection, Thumbnail } from "react-foundation";
export default function Card() {return ( <div className="cardlayout">
<MediaObject>
<MediaObjectSection>
<Thumbnail src="https://source.unsplash.com/random/100x100" /> </MediaObjectSection>
<MediaObjectSection isMain>
<h4>Important Heading Here</h4>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commod.
</p>
</MediaObjectSection>
</MediaObject>
</div>

);
}

Blog Demo

If you play with code and check my blog demo on codesandbox.io

Blog demo with foundation CSS framework and React.js

Community Support

Foundation also builds an open-source community. Using community, you asked help and question from the community members. They will guide and solve your problem.

Conclusion

Foundation CSS framework is a good framework for everyone and provides many built-in components for the developer like bootstrap. But one drop-back popularity is shallow compared to other frameworks, and the second is the shallow job rate.

Else everything was fine in my opinion. The recent foundation CSS framework created a very impactful and good relationship with the developer and increased the weekly download rate according to npm.

--

--

Rajdeep Singh
FrontEnd web

JavaScript | TypeScript | Reactjs | Nextjs | Rust | Biotechnology | Bioinformatic | Frontend Developer | Author | https://linktr.ee/officialrajdeepsingh