You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+43-32Lines changed: 43 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,51 +1,47 @@
1
1
## AngularJS + Bootstrap Responsive Dashboard
2
2
3
-
This dashboard front-end was created as I was lacking a simple responsive but slick looking dashboard for another project of mine. Other available dashboards were bloated with external plugins and required a lot of hackery/work out of the box - plus the fact many were powered by jQuery. The design takes inspiration from other dashboards around, but the code to create the layout is my own.
3
+
This AngularJS driven dashboard was created as there is a lack of free, open-source, readable and bloat free admin templates. Many premium templates require a lot of hackery out of the box - this template is intended to have only the extra features we think are needed to get up and running as quick as possible.
[*Want the dashboard without AngularJS and build functionality?*](https://github.com/Ehesp/Responsive-Dashboard/tree/barebones)
10
8
11
-
Live Example:
12
-
*http://ehesp.github.io/Responsive-Dashboard/
13
-
14
-
> jQuery version available on the [jQuery branch](https://github.com/Ehesp/Responsive-Dashboard/tree/jquery)!
15
-
16
-
### Usage
17
-
18
-
Simply clone, or download and unzip this repository and access the dist folder via your browser. There is only one page on show (`index.html`), and the relevant sections have been commented.
19
-
20
-
### Development
21
-
22
-
Requirements:
9
+
### Requirements
23
10
*[Node](http://nodejs.org/)
24
11
*[NPM](http://npmjs.org/)
25
12
26
-
The project uses:
13
+
### Usage
14
+
15
+
This project uses the following tools:
27
16
*[Gulp](http://gulpjs.com/)
28
17
*[Bower](http://bower.io/)
29
18
*[AngularJS](https://angularjs.org/)
30
19
31
20
#### Getting Started
32
21
33
-
Clone the repo, run `npm install` to install all dependencies.
34
-
After that you can either:
35
-
- Run `node_modules/.bin/gulp build` to build the project.
36
-
- Run `node_modules/.bin/gulp` to start a local webserver with **AWESOME** automatic compilation and [Livereload](http://livereload.com/) (We use [gulp-connect](https://github.com/avevlad/gulp-connect)).
22
+
1. Clone the repository and run `npm install` to install all dependencies. This will also run the `bower install` automatically after completion.
23
+
2. There are now two `gulp` commands to choose from:
24
+
-`node_modules/.bin/gulp build` to build the project.
25
+
-`node_modules/.bin/gulp` to start a local webserver with **AWESOME** automatic compilation and [Livereload](http://livereload.com/) (We use [gulp-connect](https://github.com/avevlad/gulp-connect)).
26
+
3. The files will now be built into the `dist` directory.
37
27
38
-
### Stylesheets
28
+
### Styling
39
29
40
-
#### Theme
30
+
Currently, only the sidebar colours can be easily be changed. [LESS](http://lesscss.org/) is used for styling so we take advantage of variables - checkout `src/less/dashboard/variables.less` and change the sidebar base colour, the others will be converted for you.
41
31
42
-
Responsive Dashboard uses [LESS](http://lesscss.org/) for styling so we take advantage of variables to theme the dashboard. Take a look at `src/less/dashboard/variables.less` and customize with your own colors.
32
+
#### Hamburg Menu
43
33
44
-
#### Bootstrap + Font Awesome
34
+
By default the responsive dashboard menu on a small sized screen sticks to the left side of the screen. If you wish the menu to have 'native app' menu functionality, where the sidebar overlaps the content from the left and side, simply add the `hamburg` class to the body:
45
35
46
-
The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also Font Awesome icons are ready to use.
36
+
```HTML
37
+
<bodyclass="hamburg">
38
+
```
47
39
48
-
##### Widgets
40
+
### Bootstrap & Font Awesome
41
+
42
+
The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also [Font Awesome](http://fontawesome.io/) icons are ready to use.
43
+
44
+
#### Widgets
49
45
50
46
A widget is essentially a white container box with some styling, that will expand 100% of it's parent container. To separate these out, I suggest putting them inside a bootstrap grid item, e.g:
51
47
@@ -60,7 +56,7 @@ Any content can be inside a `widget-body`, which will be padded by default. Thre
60
56
61
57
> If no size is set, the content will expand vertically based on content size.
62
58
63
-
######Widget Body
59
+
##### Widget Body
64
60
65
61
**Padding**
66
62
@@ -106,14 +102,29 @@ Usage of the directive: `<rd-loading></rd-loading>` or `<div rd-loading></div>`
106
102
107
103
If you want to change it, simply replace the template and CSS!
108
104
109
-
#### Widget component
105
+
#####Widget component
110
106
111
-
Usage:
107
+
Instead of hardcoding the widget HTML directly, AngularJS widget component functionality is ready to use:
The dashboard uses CSS3 for animations along with other style enhancements meaning browsers supporting this (Chrome, Firefox, IE11+) are compatible.
122
+
As for smaller screen sizes, the dashboard works best on screen sizes greater than ~335px.
123
+
124
+
#### Any screenshots?
125
+
126
+
Checkout [am-i-responsive](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard), this doesn't have the Hamburg menu enabled though.
127
+
128
+
#### I don't want to use AngularJS or NPM/Bower/Gulp!
129
+
130
+
No worries, theres a barebones branch available with the basic HTML and CSS!
0 commit comments