Overview
We all know that design of the website matters, as it plays an important role to get the attention of the user. Therefore we use many css frameworks like Bootstrap, PureCSS, Tailwind etc.. as these frameworks help us to implement design by writing less amount of code. Therefore in this blog we are going to take a glimpse of how PureCSS helps to create a better frame perfect design.
PureCSS Setup with ReactJS
First we need to create react app.
Command :-
npm init react-app react-pure-css
Install PureCSS Package
- After that we need to install PureCSS packageCommand:-
npm install purecss --save
- After the installation we can find the pure.css file in node_modules/purecss/build/pure.css
- After that we need to import pure.css file in index.js
Run Project
Once the installation is done, you can open your project folder and efficiently use the following command to run the app in development mode. It will open http://localhost:3000 to view in your browser.
Command :-
npm start
Adding Custom Code
After that you can write your code in App.js by using pure.css classes as mentioned below :-
import './App.css';
import card1 from './assets/img/card-1.svg';
import user1 from './assets/img/user-pic1.svg'
import card2 from './assets/img/card-2.svg';
import user2 from './assets/img/user-pic2.svg'
import card3 from './assets/img/card-3.svg';
import user3 from './assets/img/user-pic3.svg'
function App() {
return (
<div className="App">
<div className='container'>
<div className='pure-g main'>
<div className="pure-u-1-3 box">
<div className="box-inner">
<img src={card1} className="pure-img" alt="card-pic" />
<div className="box-desc">
<h4 className="user-title">Wayne Garner</h4>
<h3 className="user-position">Flui oriental art</h3>
<div className="bid pure-g justify-content-between align-items-center">
<div>
<h5>current Bid</h5>
<span>0.70 ETH</span>
</div>
<div>
<h5>Auction Ending in</h5>
<span>07h:25m:46s</span>
</div>
</div>
<img src={user1} alt="user-pic" className="pure-img user-image" />
</div>
</div>
</div>
<div className="pure-u-1-3 box">
<div className="box-inner">
<img src={card2} className="pure-img" alt="card-pic" />
<div className="box-desc">
<h4 className="user-title">Wayne Garner</h4>
<h3 className="user-position">Flui oriental art</h3>
<div className="bid pure-g justify-content-between align-items-center">
<div>
<h5>current Bid</h5>
<span>0.70 ETH</span>
</div>
<div>
<h5>Auctin Ending in</h5>
<span>07h:25m:46s</span>
</div>
</div>
<img src={user2} alt="user-pic" className="pure-img user-image" />
</div>
</div>
</div>
<div className="pure-u-1-3 box">
<div className="box-inner">
<img src={card3} className="pure-img" alt="card-pic" />
<div className="box-desc">
<h4 className="user-title">Wayne Garner</h4>
<h3 className="user-position">Flui oriental art</h3>
<div className="bid pure-g justify-content-between align-items-center">
<div>
<h5>current Bid</h5>
<span>0.70 ETH</span>
</div>
<div>
<h5>Auctin Ending in</h5>
<span>07h:25m:46s</span>
</div>
</div>
<img src={user3} alt="user-pic" className="pure-img user-image" />
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;For the better look of the website you can also add your own custom style in App.css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
:root{
--body-color: #141217;
--black-color: #000;
--white-color: #fff;
--light-black: rgba(59, 65, 79, 0.5);
}
*{margin: 0px; padding: 0px; box-sizing: border-box;}
body{background: var(--body-color); font-family: 'Manrope', sans-serif;}
.pure-g{letter-spacing: normal;}
.container{width: 1345px; max-width: 1345px; margin: 0px auto;}
.justify-content-between{justify-content: space-between;}
.align-items-center{align-items: center;}
.main{margin-top: 60px;}
.box{padding: 0px 15px;}
.box-inner{background: var(--light-black); border-radius: 15px;}
.box-inner > img{border-radius: 15px 15px 0px 0px; width: 100%;}
.box-desc{position: relative; padding: 24px; color: var(--white-color); text-transform: capitalize;}
.bid h5{margin-bottom: 7px;}
.bid span{font-size: 20px; line-height: 28px;}
.user-title{font-size: 14px; line-height: 20px;}
.user-position{text-transform: capitalize; margin: 16px 0px; font-size: 18px; line-height: 26px;}
.user-image{ position: absolute; right: 18px; top: -30px; width: 60px; border-radius: 50%; box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);}
Final Output
Hire Our Worthy Web DevelopersExplore the Benefits of Our Web
Development ServicesGet Expert Assistance
Development ServicesGet Expert Assistance
Conclusion
Hope this blog might be useful to make a better design with react js. In future I will also publish a blog on how the other css frameworks are useful and how to implement it in our project.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
