Rhythm Documentation
Hello & Welcome! Thank you for purchasing!
If you have any questions, feel free to contact us at this page. Find more React templates on https://themeforest.net/user/srbthemes/portfolio.
Updated: 07/09/2024
Template Features
- One Page and Multi Page Demos
- 50+ Different Demos
- 40+ Portfolio Pages
- 5 Single Project Pages
- Light, Dark and Transparent Menu Bars
- Isotope portfolio filtering
- Fully responsive
- Retina ready
- Font Awesome 400+ icons
- Powered with Bootstrap
- Jarallax sections
- Google Maps easy to setup via data attributes
- 9 Blog layouts
- 5 Posts variants (Text post, Image, Gallery, Video, Quote)
- Powerful shortcodes
- Browser compatibility (IE9+, Chrome, Safari, Firefox, Opera)
- Well documented
- Clear & Neat design
- FAQ Included
Getting Started
Unzip the archive and find out the folder Rhythm. There are all the template files in this folder. You can open the following files for viewing in browser.
1. Installa Node.js
- Make sure to have Node.js installed & running on your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 20. We suggest you to use LTS version of Node.js.
npm i/ npm install
yarn/ npm add
2. Run Project
- You have to folllow below commnds.
npm run dev
yarn run dev
3. Build Directory
- You have to folllow below commnds.
npm run build
yarn build
Logotype
To change logotype in the dark navigation panel, find image assets/images/logo-dark.png and replace it with your logo.
Note: to ensure Retina ready, the width and height of the image should be twice bigger than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 118x27, but the actual size of the image is 236x54px.
To change logotype in the white navigation panel, find image assets/images/logo-white.png and replace it with your own logo.
Note: to ensure Retina ready, the width and height of the image should be twice bigger than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 118x27, but the actual size of the image is 236x54px.
Menu Bar
You can choose one of the few variants for the navigation bar:
- White menu bar
- White menu bar (transparent)
- Dark menu bar
- Dark menu bar (transparent)
White Menu Bar
React structure of the White Menu Bar looks like this:
White menu bar (transparent)
The React structure of the White menu bar (transparent) is similar to the structure of White Menu Bar but has extra classes:
Dark Menu Bar
The React structure of the Dark Menu Bar is similar to the structure of White Menu Bar but has
extra class — dark:
Dark Menu Bar (transparent)
The React structure of the Dark Menu Bar (transparent) is similar to the structure of White Menu Bar but has extra classes:
Menu Bar: top fixed
To make the menu bar fixed to top, add extra class — stick-fixed:
Page Section
The standard section has the following React structure:
About Studio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu adipiscing lacus, a iaculis diam. Nullam placerat blandit auctor. Sed at enim ipsum. Nulla accumsan ipsum et nibh rhoncus, eget tempus sapien ultricies. Donec mollis lorem vehicula.
Section With Background
To change the background image, open React file and replace the value of data-background attribute of this construction:
...
Section Extra Classes
You can use next modification classes to customize page section:
| Class Function: |
Modification class for
<section>
tag
|
|---|---|
| To make dark background: |
.bg-dark .bg-dark-lighter
|
| To make dark overlay: |
.bg-dark-alfa-30 .bg-dark-alfa-50 .bg-dark-alfa-70
.bg-dark-alfa-90 .bg-dark-alfa
|
| To make gray background: |
.bg-gray .bg-gray-lighter
|
| To make light overlay: |
.bg-light-alfa-30 .bg-light-alfa-50 .bg-light-alfa-70
.bg-light-alfa-90 .bg-light-alfa
|
| To make color background: |
.bg-yellow .bg-orange .bg-red .bg-purple
.bg-blue .bg-cyan .bg-green
|
| To make active color overlay: |
.bg-color-alfa-30 .bg-color-alfa-50 .bg-color-alfa-70
.bg-color-alfa-90 .bg-color-alfa
|
| Parallax for image background: |
.parallax-1 .parallax-2 .parallax-3 .parallax-4
.parallax-5 .parallax-6 .parallax-7 .parallax-8
.parallax-9 .parallax-10
Note: If you want to use parallax, you need
delete class
bg-scroll from section tag. |
Vertical Rhythm Utility
You can use next modification classes to set block margins and paddings:
| Screen size: | Modification class |
|---|---|
| Default |
margin-top
mt-10 mt-20 ... mt-140
margin-bottom
mb-10 mb-20 ... mb-140
padding-top
pt-10 pt-20 ... pt-140
padding-bottom
pb-10 pb-20 ... pb-140
|
| max-width: 1200px |
margin-top
mt-lg-10 mt-lg-20 ... mt-lg-140
margin-bottom
mb-lg-10 mb-lg-20 ... mb-lg-140
padding-top
pt-lg-10 pt-lg-20 ... pt-lg-140
padding-bottom
pb-lg-10 pb-lg-20 ... pb-lg-140
|
| max-width: 1024px |
margin-top
mt-md-10 mt-md-20 ... mt-md-140
margin-bottom
mb-md-10 mb-md-20 ... mb-md-140
padding-top
pt-md-10 pt-md-20 ... pt-md-140
padding-bottom
pb-md-10 pb-md-20 ... pb-md-140
|
| max-width: 768px |
margin-top
mt-sm-10 mt-sm-20 ... mt-sm-140
margin-bottom
mb-sm-10 mb-sm-20 ... mb-sm-140
padding-top
pt-sm-10 pt-sm-20 ... pt-sm-140
padding-bottom
pb-sm-10 pb-sm-20 ... pb-sm-140
|
| max-width: 767px |
margin-top
mt-xs-10 mt-xs-20 ... mt-xs-140
margin-bottom
mb-xs-10 mb-xs-20 ... mb-xs-140
padding-top
pt-xs-10 pt-xs-20 ... pt-xs-140
padding-bottom
pb-xs-10 pb-xs-20 ... pb-xs-140
|
| max-width: 480px |
margin-top
mt-xxs-10 mt-xxs-20 ... mt-xxs-140
margin-bottom
mb-xxs-10 mb-xxs-20 ... mb-xs-140
padding-top
pt-xxs-10 pt-xxs-20 ... pt-xxs-140
padding-bottom
pb-xxs-10 pb-xxs-20 ... pb-xxs-140
|
Portfolio Section
The structure of the filter of works looks like this:
Lightbox Project Item
The lightbox with photo project item structure looks like this:
Hand
The lightbox with video project item structure looks like this:
Hand
The last classes of the tag <li class="work-item mix category-1 category-2">
belong to categories by which the projects are filtered.
Single Page Project Item
The single React page project item structure looks like this:
Bicycles
The last classes of the tag <li class="work-item mix category-1 category-2">
belong to categories by which the projects are filtered.
Google Maps
Open your React file and replace this code of Google Maps embed with your own one:
Here you can find an instruction how to generate your own Google Maps code.
The Google Maps code looks like this:
Open the map
Close the map
Credits
All the photos used in this template are intended only to illustrate the template and all the rights on them belong to their legal owners.
- React
- React Bootstrap
- Bootstrap
- Vite
- Smooth Scroll
- Jarallax
- Swiper
- React responsive mesonry
- Framer Motion
Support
If you have any questions, feel free to contact us at this page - .
Changelog
Added:
- Angular
- Initial Released
© SRBThemes 2024