Thank you so much for purchasing our item from themeforest
Hello! Welcome to Masco's official documentation. Simple, Flexible, ready to use React Template which will bring you so much closer to your end goals. Let’s dive in.
React is constructed leveraging Node.js. as its foundation. To initiate your journey with React, it's essential to have an up-to-date version of Node.js and Yarn installed on your machine. For managing routing within your React application, the employment of React Router DOM is necessary.
We require many packages (dependencies) to run our site. Move into /masco-react (project root) directory and run command below.
yarn
After the installation, you should have a folder named
/node_modules in the project root directory..
To start our development server run command below:
yarn devOpen your browser and visit http://localhost:3000!. You should see a page like below.
Voila! You are a genious. Now
open the code editor and start hacking!
Some useful commands to work with the project.
1. yarn dev to Start
development server at
http://localhost:3000
2. yarn build for
Generating production build
3. yarn serve To
serve build files at
http://localhost:9000
Follow the steps below to setup your site template:
masco-react/src/style - Sass filesmasco-react/src/pages - All pagesmasco-react/src/routes - Routes files
masco-react/assets/image - Images files
masco-react/index.html - Root file
We have added SASS .scss files in template. If
you know how to use SASS you can change sass files and compile
the css as well. You can find sass file here -
src/style
Open the src/style and Edit any file according to
your needs. If you need more Advanced Setup then you can Edit
the Respective Files yourself which have been branched inside
the same Folder. It is completely at your discretion only to
include the Required .scss Files you need to
minimize the amount of CSS & including only the Styles of the
Blocks you need. This can be setup in your
main.scss File.
You can change your Website's Colors by modifying following
variable inside style/abstract/_colors.scss
Available Variables:
$primary-hex: #3147FF;
$l2-primary-hex: #A259FF;
$l2-secondary-hex: #0A102F;
$l3-primary-hex: #FFC900;
$l4-primary-hex: #4B2AAD;
$l5-primary-hex: #FF9966;
$l5-secondary-hex: #1B1C1D;
$l6-primary-hex: #3147FF;
$l7-primary-hex: #191919;
$l7-secondary-hex: #A259FF;
$l8-primary-hex: #C1FF00;
$l9-primary-hex: #324438;
$l9-secondary-hex: #F4B905;
$l10-primary-hex: #2D2B92;
$l10-secondary-hex: #FFD874;
$black: #0A102F;
$white: #FFFFFF;
$offwhite-hex: #FAF9F5;
You can update the logo by simply replacing it with a new logo of the same name.
You have the option to modify default logo and its name. All you have to do is substitute the custom name at this location.
You have the option to pass the custom logo in the header component.
You have the option to make use of the 'white' property in order to acquire the dark version of the logo. This can be achieved by following the provided method. The logo will be white by default.
<BrandLogo type="white" >
Documentation and examples for header, footer, grid
Main header of the website. It contains the logo and the contact information.
The list of various footer types & its descriptions are provided below for your reference:
Default footer with logo and social icons on left side.
Second footer with logo and social icons on left side and app store links on right side.
Documentation and examples for displaying typography, table, image and video and more..
Documentation and examples for typography, headings, body text, lists, and more.
| Heading | Example |
|---|---|
<h1></h1>
|
h1. Heading |
<h2></h2>
|
h2. Heading |
<h3></h3>
|
h3. Heading |
<h4></h4>
|
h4. Heading |
<h5></h5>
|
h5. Heading |
<h6></h6>
|
h6. Heading |
Make a paragraph stand out by adding .text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
<p className="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</p>You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted
text.
This line of text is meant to be treated as no longer
accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Font Awesome 6 icons are supported in Demox.
<i className="fa-solid fa-arrow-up"></i>
<i className="fa-brands fa-twitter"></i>
<i className="fas fa-credit-card"></i>
<i className="fa-brands fa-facebook-f"></i>
A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.
See what's new added, changed, fixed, improved or updated in the latest versions.
Initial Release