Free Social Analytics Dashboard Template

Developer: Mikhail Konin, Designer: Yehor Haiduk

What is this template all about?

• Fully CSS-Grid
• Fully responsive
• Fully separate to components
• No require dependencies
• No JQuery
• All code based on BEM principles
• Sass
• Google Fonts
• Quick start from prepared workspace: 🗲🗲
  • Husky - Pre-commit tests
  • Commitlint - Conventional changelog commits linter
  • Standard-version - Automatic Generate changelog from commits and create releases
  • Webpack and addons(Babel, Sass, loaders, minimizers, etc.)
• This template can be used as a base layer for any of your future projects

Request features ⚡

Use issue and follow the rules :)

Report bug 🤬

The data from repository is provided an "As is", without any guarantees. All the data provided is used at your own risk. If you want report a bug - use issue

TABLE OF CONTENTS

• General
  • Request feature
• Quick start
  • Requirements
  • Report a bug
• Workspace
  • Toolbox with scripts
  • Separated configurations
  • Semantic Versioning
• Template
  • Components
  • Customization
• Scaffolding
• Contributing
• Buy Me A Coffee
• License and Changelog

Quick start

If you need only compiled project:

1. Clone this repository:
2. Go to Dist folder.
3. Enjoy this!

If you need full workspace:

1. Clone this repository
2. Check system requirements.
3. Console or bash command for install package.json cd html-social-analytics-dashboard-template yarn install
4. Enjoy this!

---

if you do not have installed Yarn package manager: npm install -g yarn, and repeat guide;

Requirements:

• NodeJS: 17.3 (My version at building time)
• Yarn: 1.22

Workspace

Toolbox with scripts

package.json contains shortcuts for most requirement operations

---

Separated configurations

To simplify working environments and improve readability configuration - webpack.config.js will separate into 3 files, according building mode

New configs location: ./configuration/webpack/

FileName ('.js')	Description
environment	Configuration for environment paths
webpack.dev.config	Configuration for developer bundle
webpack.prod.config	Configuration for production bundle

---

Semantic Versioning

Project using commitlint for automatic generation of CHANGELOG.md from your commits.

Use template: tag: run message for commits.

Allowed tags for commits:

• build
• chore
• ci
• docs
• feat
• fix
• perf
• refactor
• revert
• style
• test

Template

Components 🔥

All project separated to components by BEM. You can easy copy-paste any module into another project. Don't forget to replace color variables.

Name	Description	Type
Select	Custom select dropdown list menu	JS - Component
Notifer	Small component for Notices	JS - Component
Toggle	Custom toggle switcher	JS - Component
Hamburger	Use as button-switcher mobile menu state	JS - Component
Counter Card	Display statistic	HTML/CSS
List	Use for list in another components	HTML/CSS
Logo	logo	HTML/CSS
Menu	Menu	HTML/CSS
Messages	Messages item in user-bar	HTML/CSS
More	More item in user-bar	HTML/CSS
New Action	New Action button item in user-bar	HTML/CSS
Profile	Profile picture item in user-bar	HTML/CSS
Page Heading	Page Title	HTML/CSS
Pie Chart	Diagram and legend styles	HTML/CSS
Search	Search box styles	HTML/CSS

Customization ‍🎨

Set colors, fonts, sizes as you like when needed.

For get all customize variables go to ./src/config/

Filename	Description
colors.config.scss	Full library with all colors used on this project
typography.config.scss	All for fonts.
variables.config.scss	Gaps, border radius, transition.

Scaffolding

.
├── .commitlintrc.json
├── .versionrc.json
├── babel.config.json
├── CHANGELOG.md
├── configuration
│   ├── husky
│   │   ├── commit-msg
│   │   ├── common.sh
│   │   └── pre-commit
│   └── webpack
│       ├── environment.js
│       ├── webpack.dev.config.js
│       └── webpack.prod.config.js
├── package.json
├── README.md
├── src
│   ├── assets
│   │   ├── css
│   │   │   └── main.scss
│   │   └── images
│   │       ├── branding
│   │       │   └── logo
│   │       │       ├── logo.png
│   │       │       ├── logo.svg
│   │       │       └── logo_stroked.svg
│   │       ├── favicon.ico
│   │       ├── icons
│   │       │   └── inbox.svg
│   │       └── thumbs
│   │           ├── posts
│   │           │   ├── loly.jpg
│   │           │   └── yory.jpg
│   │           └── users
│   │               ├── avatar.jpg
│   │               ├── mikhail.jpg
│   │               └── yehor.jpg
│   ├── components
│   │   ├── btn
│   │   │   └── btn.style.scss
│   │   ├── components.scss
│   │   ├── counter-card
│   │   │   ├── --darknes
│   │   │   │   └── counter-card--darkness.scss
│   │   │   ├── --primary
│   │   │   │   └── counter-card--primary.scss
│   │   │   ├── --rounded
│   │   │   │   └── counter-card--rounded.scss
│   │   │   ├── --secondary
│   │   │   │   └── counter-card--secondary.scss
│   │   │   ├── --tertiary
│   │   │   │   └── counter-card--tertiary.scss
│   │   │   ├── __count
│   │   │   │   ├── --balance
│   │   │   │   │   └── counter-card__count--balance.scss
│   │   │   │   ├── --has-label
│   │   │   │   │   └── counter-card__count--label.scss
│   │   │   │   ├── --size
│   │   │   │   │   └── counter-card__count--size.scss
│   │   │   │   └── counter-card__count.scss
│   │   │   ├── __footer
│   │   │   │   └── counter-card__footer.scss
│   │   │   ├── __head
│   │   │   │   └── counter-card__head.scss
│   │   │   ├── __icon
│   │   │   │   └── counter-card__icon.scss
│   │   │   ├── __link
│   │   │   │   └── counter-card__link.scss
│   │   │   ├── __list-item
│   │   │   │   ├── --icon
│   │   │   │   │   └── counter-card__list-item--icon.scss
│   │   │   │   └── counter-card__list-item.scss
│   │   │   ├── __list
│   │   │   │   ├── --horizontal
│   │   │   │   │   └── counter-card__list--horizontal.scss
│   │   │   │   └── counter-card__list.scss
│   │   │   ├── __logo
│   │   │   │   ├── --has-overlay
│   │   │   │   │   └── counter-card__logo--has-overlay.scss
│   │   │   │   └── counter-card__logo.scss
│   │   │   └── counter-card.style.scss
│   │   ├── hamburger
│   │   │   ├── --active
│   │   │   │   └── hamburger--active.scss
│   │   │   ├── __line
│   │   │   │   ├── --bottom
│   │   │   │   │   └── hamburger__line--bottom.scss
│   │   │   │   ├── --top
│   │   │   │   │   └── hamburger__line--top.scss
│   │   │   │   └── hamburger__line.scss
│   │   │   ├── __svg
│   │   │   │   └── hamburger__svg.scss
│   │   │   ├── hamburger.component.js
│   │   │   └── hamburger.style.scss
│   │   ├── list
│   │   │   ├── __brand-box
│   │   │   │   └── list__brand-box.scss
│   │   │   ├── __cell
│   │   │   │   ├── --wide