creativetimofficial / impact-design-system

Kick-Start Your Development With An Awesome Design System carefully designed for your online business showcase. Joint project by Creative Tim and Themesberg.

Impact Design System

Kick-Start Your Development With An Awesome Design System carefully designed for your online business showcase. It comes as a complete solution, with front pages and dashboard pages included.

Impact Design System features a huge number of components built to fit together and look amazing. If you are a new business looking to create your online presence or you just want to let people know who you are and what you do, this might be the answer for you.

Fully Coded Components

Impact Design System features over 200 individual components, giving you the freedom of choosing and combining. This means that there are thousands of possible combinations. All components can take variations in color, that you can easily modify using SASS files.

You will save a lot of time going from prototyping to full-functional code because all elements are implemented. We wanted the design process to be seamless, so switching from image to the real page is very easy to do.

View all components here.

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. From landing pages to e-commerce or blog pages, you will be able to quickly set up the basic structure for your web project.

View example front pages here and example dashboard pages here.

Complex Documentation

Each element is well presented in very complex documentation. You can read more about the idea behind this design system here. You can check the components here.

Table of Contents

• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Licensing
• Useful Links

Demo

Landing	About	Pricing	Contact

Dashboard	Login	Profile	Documentation

View More

Quick start

1. Clone this repository or download from Creative Tim
2. Make sure you have Node locally installed.
3. Download Gulp Command Line Interface to be able to use gulp in your Terminal.

npm install gulp-cli -g

4. After installing Gulp, run npm install in the main impact-design-system-vx.x.x/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.

npm install

5. Run gulp in the impact-design-system-vx.x.x/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

gulp

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Impact Design System is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

.
├── LICENSE.md
├── README.md
├── dashboard
│   └── assets
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── dashboard
    │   ├── assets
    │   │   ├── fonts
    │   │   ├── img
    │   │   └── js
    │   ├── pages
    │   │   ├── dashboards
    │   │   ├── examples
    │   │   ├── maps
    │   │   └── tables
    │   ├── partials
    │   │   ├── _head.html
    │   │   ├── _tracking-body.html
    │   │   └── _tracking.html
    │   └── scss
    │       ├── bootstrap
    │       ├── core
    │       ├── custom
    │       └── dashboard.scss
    ├── front
    │   ├── assets
    │   │   ├── img
    │   │   └── js
    │   ├── pages
    │   │   ├── about.html
    │   │   ├── all.html
    │   │   ├── contact.html
    │   │   ├── index.html
    │   │   └── pricing.html
    │   ├── partials
    │   │   ├── _demo.html
    │   │   ├── _footer.html
    │   │   ├── _head.html
    │   │   ├── _navigation.html
    │   │   ├── _preloader.html
    │   │   ├── _pricing.html
    │   │   ├── _scripts.html
    │   │   ├── _tracking-body.html
    │   │   ├── _tracking.html
    │   │   └── cta
    │   └── scss
    │       ├── bootstrap
    │       ├── front
    │       └── front.scss
    └── index.html

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://demos.creative-tim.com/impact-design-system/index.html
• Download Page: https://www.creative-tim.com/product/impact-design-system
• Documentation: https://demos.creative-tim.com/impact-design-system-pro/docs/getting-started/overview
• License Agreement: MIT License
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Impact Design System. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Impact Design System. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

• Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=mk-github-readme)
• Licensed under MIT (https://github.com/creativetimofficial/impact-design-system/blob/master/LICENSE.md)

Useful Links Creative Tim

• Tutorials
• Affiliate Program (earn money)
• Blog Creative Tim
• Free Products from Creative Tim
• Premium Products from Creative Tim
• React Products from Creative Tim
• Angular Products from Creative Tim
• VueJS Products from Creative Tim
• More products from Creative Tim
• Check our Bundles here

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/CreativeTimOfficial

Useful Links Themesberg

• Free themes from Themesberg
• Premium themes from Themesberg
• Blog Themesberg from Themesberg

Social Media

• Follow @themesberg on Twitter
• Like Themesberg on Facebook
• Follow Themesberg on Dribbble
• Follow Tthemesberg on Instagram

impact-design-system's Issues

Problem with plugins

I'm trying to use the Datepicker plugin, following this tutorial: https://demos.creative-tim.com/impact-design-system-pro/docs/plugins/datepicker/, but it didn't work.

On the HTML page I added the code snippet below:
<div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span> </div> <input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2020"> </div> </div>

On the _scripts.html page I added the code snippet below:

<script src="/assets/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

To test it, I tried to use other puglins available in the free version, and they didn't work either.

Is there any problem with the plugins available in the template?

Thanks.

webpack

Thanks for releasing this awesome theme.

Do you have any webpack version of this theme? i was planning use this on a project where the default build tool is webpack. so it would be helpful if you have one.

broken link to github

the github link from https://www.creative-tim.com/product/impact-design-system-pro

goes to a broken link:
https://github.com/creativetimofficial/impact-design-system-pro/issues

Sign in/up eye icon does not trigger show/hide of password

I have an issue with the password unhide in the Signin and Signup forms. When the user click on the eye icon its not showing up the hidden password.

Support Multi-level dropdowns

I was choosing between Argon Pro and Impact Pro, purchased Impact Pro and was disappointed to see that it does not support multi-level dropdowns like Argon does.

Please add multi-level dropdowns, thank you!

font-size missing rem

small bug in impact scss file

front/layout/_navbar.scss

Change: font-size: 0.875; To: font-size: 0.875rem;

Bootstrap/CSS Issue with Input Group Prepend

For the bootstrap compatible input groups, when sizing and implementing a prepend, the prepend item does not size properly along with the input box.

I found this while attempting to implement into one of my forms, and confirmed it is also present within the documentation as well (see attached image).

npm install fails, login required

Trying to build the template, on npm install crashes with this error:
1075 error code E401
1076 error Incorrect or missing password.
Checking the log, it comes that downloading of fontawesome requires an authentication.

Is this an error?

Here's full log:

1063 timing reifyNode:node_modules/rxjs Completed in 1952ms
1064 timing reify:rollback:createSparse Completed in 462ms
1065 timing reify:rollback:retireShallow Completed in 0ms
1066 timing command:install Completed in 3755ms
1067 verbose stack HttpErrorAuthUnknown: Unable to authenticate, need: Basic realm="https://npm.fontawesome.com/",service="npm.fontawesome.com"
1067 verbose stack at /usr/lib/node_modules/npm/node_modules/npm-registry-fetch/check-response.js:84:17
1067 verbose stack at processTicksAndRejections (node:internal/process/task_queues:96:5)
1068 verbose statusCode 401
1069 verbose pkgid @fortawesome/fontawesome-free@https://npm.fontawesome.com/@fortawesome/fontawesome-free/-/5.11.2/fontawesome-free-5.11.2.tgz
1070 verbose cwd /home/lemonz/Desktop/impact-design-system
1071 verbose Linux 5.4.0-81-generic
1072 verbose argv "/usr/bin/node" "/usr/bin/npm" "install"
1073 verbose node v16.7.0
1074 verbose npm v7.20.3
1075 error code E401
1076 error Incorrect or missing password.
1077 error If you were trying to login, change your password, create an
1077 error authentication token or enable two-factor authentication then
1077 error that means you likely typed your password in incorrectly.
1077 error Please try again, or recover your password at:
1077 error https://www.npmjs.com/forgot
1077 error
1077 error If you were doing some other operation then your saved credentials are
1077 error probably out of date. To correct this please try logging in again with:
1077 error npm login
1078 verbose exit 1

Boostrap 5 deprecated CSS

When bundleing the scss, my cosole returns multiple warnings.

It would be good to update for those that want to upgrade to Bootstap 5.

WARNING: text-emphasis-variant() has been deprecated as of v4.4.0. It will be removed entirely in v5.

npm install fails

I'm installing pointing to the python2, as it tries to run py2 code if I just run:

C:\Users\david\Downloads\impact-design-system-master>npm install
:

(...)
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Users\david\anaconda3\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\david\anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:399:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

Therefore

C:\Users\david\Downloads\impact-design-system-master>npm install --python=C:\Users\david\anaconda3\envs\py2.7\python.exe
:

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm ERR! code 1
npm ERR! path C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Users\david\AppData\Local\Temp\postinstall-1656063980193.cmd
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\david\Downloads\impact-design-system-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "C:\Users\david\anaconda3\envs\py2.7\python.exe" in the PATH
npm ERR! gyp verb `which` succeeded C:\Users\david\anaconda3\envs\py2.7\python.exe C:\Users\david\anaconda3\envs\py2.7\python.exe
npm ERR! gyp verb check python version `C:\Users\david\anaconda3\envs\py2.7\python.exe -c "import sys; print "2.7.18
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.14.2
npm ERR! gyp verb command install [ '16.14.2' ]
npm ERR! gyp verb install input version string "16.14.2"
npm ERR! gyp verb install installing version: 16.14.2
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.14.2
npm ERR! gyp verb build dir attempting to create "build" dir: C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass\build
npm ERR! gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
npm ERR! gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.Windows10SDK.19041
npm ERR! gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
npm ERR! gyp verb find vs2017   - Found Microsoft.VisualStudio.VC.MSBuild.Base
npm ERR! gyp verb find vs2017   - Using this installation with Windows 10 SDK
npm ERR! gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass\build\config.gypi
npm ERR! (node:93968) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass\config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass\common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "msvs"
npm ERR! gyp info spawn C:\Users\david\anaconda3\envs\py2.7\python.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   'C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp\\gyp\\gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'msvs',
npm ERR! gyp info spawn args   '-G',
npm ERR! gyp info spawn args   'msvs_version=2015',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-sass\\build\\config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp\\addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\david\\.node-gyp\\16.14.2\\include\\node\\common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=C:\\Users\\david\\.node-gyp\\16.14.2',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=C:\\Users\\david\\.node-gyp\\16.14.2\\<(target_arch)\\node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-sass',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-sass\\build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir C:\Users\david\.node-gyp\16.14.2
npm ERR! gyp verb found first Solution file build/binding.sln
npm ERR! gyp verb using MSBuild: C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\15.0\Bin\MSBuild.exe
npm ERR! gyp info spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\15.0\Bin\MSBuild.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   'build/binding.sln',
npm ERR! gyp info spawn args   '/nologo',
npm ERR! gyp info spawn args   '/p:Configuration=Release;Platform=x64'
npm ERR! gyp info spawn args ]
npm ERR! gyp ERR! UNCAUGHT EXCEPTION
npm ERR! gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\15.0\Bin\MSBuild.exe ENOENT
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:478:16)
npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\david\\Downloads\\impact-design-system-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\david\Downloads\impact-design-system-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! This is a bug in `node-gyp`.
npm ERR! gyp ERR! Try to update node-gyp and file an Issue if it does not help:
npm ERR! gyp ERR!     <https://github.com/nodejs/node-gyp/issues>
npm ERR! Build failed with error code: 7

By the way,

C:\Users\david\Downloads\impact-design-system-master>npm ls -g
C:\Program Files\nodejs -> .\
+-- @angular/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Broken path to asset

Recently purchased Impact pro, but this issue seems common in both versions.

File: src/dashboard/scss/core/vendors/_fullcalendar.scss

Line: 161, 164, ...

background-image: url('../img/calendar/january.jpg');
background-image: url('../img/calendar/february.jpg');
background-image: url('../img/calendar/march.jpg');

I can't find these jpg files

@zoltanszogyenyi Can you please look into this on priority? I am unable to use your product

Navbar links dropdown bugs in Chrome, but in Mozilla it works fine

I've tested this in Chrome desktop for Windows, on the smallest viewport (the default one, where no midia queries is applied).
In navbar links, when I move down my cursor, the dropdown menu fades before I reached it.
In Mozilla it works fine.

It can be tested even on the Demo's page
https://demos.creative-tim.com/impact-design-system/dashboard/pages/dashboards/dashboard.html