Documentation
Getting Started
This guide will help you get started with IUC (Iconic Ultimate Crypto)! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to pixelwibes@gmail.com
If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest,
it really motivate us to provide something better.
Please Note :
- All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
- It does not include any Business logic to produce database records.
- All the Third-party plugins we use are installed via NPM and have their own support and updates separately. Pixelwibes can only provide support for the version of plugins used in the template. It applies to all the framework packages as well
Installation Setup
To get started, you need to do the following:
This template is built in ReactJS and requires Node 14.17.3 and NPM 6.14.13 to be Installed
This template is built on react 17+
- Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
- Project setup: After installing Node
npm install
command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file. - Development server: Run
npm Start
command from project directory and navigate to http://localhost:4200/ into your browser. - Build: Run
npm run build
command from project directory to build the project. The build artifacts will be stored in the dist/ directory. - Further help: To get more help on the project setup, go and check out https://reactjs.org/.
File Structure
- node_modules - NPM dependencies (by default the folder is not included)
npm
installs dependencies. - Public
-
src
- assets
-
Components
- Auth
- CaroselPage
- CollectionActivity
- CollectorsPage
- Common
- CreateNFT
- CreatorsPage
- Dashboard
- Data
- DiscoverPage
- FormOptions
- FromWizard
- HomePage2
- HomePage3
- HomePage4
- HotBids
- PlaceBids
- ProfileCreate
- ProfileEdit
- Status
- Support
- SupportDetail
- TableOption
- TopCollection
- TopCreatedCard
- UploadVariants
-
Redux
- Actions
- Reducers
-
screens
- CaroselPage
- CollectionActivity
- CollectorsPage
- CreateNFT
- CreatorsPage
- Dashboard
- DiscoverPage
- FormOptions
- FromWizard
- HomePage2
- HomePage3
- HomePage4
- PlaceBids
- ProfileCreate
- ProfileEdit
- Status
- Support
- SupportDetail
- TableOption
- UploadVariants
- App
- index
- reportwenvitals
- logo.svg
- setupTests
- store
- package.json - List of dependencies and npm information
-
documentation - Project documentation
-
assets
- css - Compiled CSS file
- fonts - Icon font and font awesome
- images - Image assets
- js - Compiled JS file
- plugin - plugins JS and css file
- index.html - well project document
-
assets
Setting info
Template Color Settings
There are 9 Color option template available here. just simple select your favorite color options.also sidebar gradient colorsidebar gradient color option available. just simple gradient swich on.
Dyanamic color setting
You can set your own primary colors and secondary colors also set chart color options available.just simply set your own color. click in the color box to open the color picker and choose your color
Google Font setting
There are 4 google font options. just simply select the fonts option
Light/Dark & Contrast Layout
Light: By Default Light Color Layout Template Selected
Dark: Enable Dark Mode Swich On.
High Contrast: Enable High Contrast Mode Swich On.
RTL: Enable RTL Mode Swich On.
High Contrast Themefor better accessibility
IUC has a pre-built High contrast theme for improving accessibility.
If you follow the standard of IUC, the High contrast theme will be applied to all IUC elements, regardless of whether they are charts or labels.
Comman Utilities With Custom Class
Text Color
Class | Results |
---|---|
.text-primary |
Lorem ipsum dolor sit amet consectecur. |
.text-secondary |
Lorem ipsum dolor sit amet consectecur. |
.text-success |
Lorem ipsum dolor sit amet consectecur. |
.text-info |
Lorem ipsum dolor sit amet consectecur. |
.text-warning |
Lorem ipsum dolor sit amet consectecur. |
.text-danger |
Lorem ipsum dolor sit amet consectecur. |
.text-dark |
Lorem ipsum dolor sit amet consectecur. |
.color-lightyellow |
Lorem ipsum dolor sit amet consectecur. |
.color-lightblue |
Lorem ipsum dolor sit amet consectecur. |
.color-light-success |
Lorem ipsum dolor sit amet consectecur. |
.color-light-orange |
Lorem ipsum dolor sit amet consectecur. |
.color-careys-pink |
Lorem ipsum dolor sit amet consectecur. |
Background Color
Class | Results |
---|---|
.bg-primary |
|
.bg-secondary |
|
.bg-success |
|
.bg-info |
|
.bg-warning |
|
.bg-danger |
|
.bg-dark |
|
.bg-white |
|
.bg-lightyellow |
|
.bg-lightblue |
|
.bg-careys-pink |
|
.light-success-bg |
|
.light-orange-bg |
Advantages
- Very easy access to any starters components and core settings from anywhere in the template.
- Intuitive clear architecture.
- Avoiding the probabilities of conflicts between Front codes and third party plugins (libraries).
- Creation of wrapper components simply solves complicated initializations structures for the users.
- Everything is structured, each component in its own file and in its component in the main object.
- The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
IUC Template Credit
Google font | https://fonts.google.com/ |
Bootstrap | https://v5.getbootstrap.com/ |
Jquery | https://jquery.com/ |
SASS | https://sass-lang.com/ |
Grunt | https://gruntjs.com/ |
NPM | https://www.npmjs.com/ |
Fontawesome | https://fontawesome.com/v4.7.0/ |
Icon Font | https://icofont.com/icons |
Apex Charts | https://apexcharts.com/ |
Pexels | https://www.pexels.com/ |