CSS Framework
How to use Foundation CSS Framework with React.js?
Foundation is a responsive front-end framework build with HTML, CSS, and JavaScript.
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.
Suppose you think of installing the Foundation framework in your react.js project. You follow these steps.
- Using CDN
- Download locally
- Custom Download
- Using Npm and Yarn
- Learn about foundation CSS
- 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
CDN Demo With Codesandbox
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.
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 --saveInstall library:
npm install react-foundation --saveHow to use it?
Use react-foundation library in your app straightforward process. We learn step by step.
Steps
- Import foundation CSS
- Import react-foundation component
- Using inside app
- 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
Learn about foundation CSS
The Foundation CSS framework provides lots of learning options for developers. You use this option to enhance the learning about foundation CSS.
- The first is very well define documentation for the developer.
- Second official youtube tutorial by foundation CSS framework
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.
