mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
docs(general): create documentation structure
This commit is contained in:
nixa
parent
c66de4a295
commit
7a9b7fc750
23 changed files with 1620 additions and 0 deletions
31
docs/config.json
Normal file
31
docs/config.json
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"baseUrl": "/ng2-admin/",
|
||||
"locals": {
|
||||
"url": "http://localhost:8080",
|
||||
"name": "ng2-admin blog",
|
||||
"owner": "Akveo",
|
||||
"description": ""
|
||||
},
|
||||
"plugins": [
|
||||
"./plugins/paginator.coffee"
|
||||
],
|
||||
"require": {
|
||||
"moment": "moment",
|
||||
"_": "underscore",
|
||||
"typogr": "typogr"
|
||||
},
|
||||
"jade": {
|
||||
"pretty": true
|
||||
},
|
||||
"markdown": {
|
||||
"smartLists": true,
|
||||
"smartypants": true
|
||||
},
|
||||
"paginator": {
|
||||
"perPage": 3,
|
||||
"groupSort": {
|
||||
"Quick Start": 1000,
|
||||
"Customization": 900
|
||||
}
|
||||
}
|
||||
}
|
||||
43
docs/contents/articles/001-getting-started/index.md
Normal file
43
docs/contents/articles/001-getting-started/index.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: Getting Started
|
||||
author: vl
|
||||
sort: 999
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## What is BlurAdmin?
|
||||
|
||||
Blur admin is Angular front-end Admin Dashboard template. That means all data you can see on graphs, charts tables is hardcoded in Javascript. You can use any backend you want with it without limitations.
|
||||
|
||||
## How can it help me?
|
||||
|
||||
We believe that that at the moment a lot of business applications have some kind of admin interface inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboard with panels, charts analytics.
|
||||
|
||||
BlurAdmin aims to bootstrap development of your product and provide ecosystem for building a prototype or even production-ready application.
|
||||
|
||||
Despite frameworks like Bootstrap provide a number of components, usually it's not enough of them to build real-world app. This template comes with lots of popular UI components with unified color scheme.
|
||||
|
||||
As well you can use BlurAdmin for learning purposes.
|
||||
|
||||
## List of features
|
||||
|
||||
* Responsive layout
|
||||
* High resolution
|
||||
* Bootstrap CSS Framework
|
||||
* Sass
|
||||
* Gulp build
|
||||
* AngularJS
|
||||
* Jquery
|
||||
* Jquery ui
|
||||
* Charts (amChart, Chartist, Chart.js, Morris)
|
||||
* Maps (Google, Leaflet, amMap)
|
||||
* etc
|
||||
|
||||
## I want to start developing with BlurAdmin
|
||||
|
||||
Welcome abroad!
|
||||
|
||||
You can start with [Installation Guidelines](/blur-admin/articles/002-installation-guidelines/). We describe there how can you download and run template on you local machine.
|
||||
|
||||
Good luck and have fun!
|
||||
46
docs/contents/articles/002-installation-guidelines/index.md
Normal file
46
docs/contents/articles/002-installation-guidelines/index.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: Installation Guidelines
|
||||
author: vl
|
||||
sort: 500
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Despite BlurAdmin can be run without any development experience, it would be much easier if you already know something about it. In general following instruction do allow to run local copy by complete newbie, but it doesn't answer questions that can arise in the process of installation.
|
||||
|
||||
## Install tools
|
||||
|
||||
If you don't havee any of these tools installed already, you will need to:
|
||||
* Download and install [git](https://git-scm.com/)
|
||||
* Download and install nodejs [https://nodejs.org](https://nodejs.org)
|
||||
|
||||
**Note**: It seems like there are some problems with some libraries used in this template and old node versions. That's why we suggest you to have one of the latest.
|
||||
|
||||
## Clone repository and install dependencies
|
||||
|
||||
You will need to clone source code of BlurAdmin GitHub repository. To do this open console and execute following lines:
|
||||
```bash
|
||||
git clone https://github.com/akveo/blur-admin.git
|
||||
```
|
||||
After repository is cloned, go inside of repository directory and install dependencies there:
|
||||
```bash
|
||||
cd blur-admin
|
||||
npm install
|
||||
```
|
||||
This will setup a working copy of BlurAdmin on your local machine
|
||||
|
||||
## Running local copy
|
||||
|
||||
To run local copy in development mode, execute:
|
||||
```bash
|
||||
gulp serve
|
||||
```
|
||||
This script should automatically open template in your default browser.
|
||||
|
||||
To run local copy in production mode, execute:
|
||||
```bash
|
||||
gulp serve:dist
|
||||
```
|
||||
For addition information about build, please check out [this angular generator](https://github.com/Swiip/generator-gulp-angular)
|
||||
60
docs/contents/articles/011-changing-color-scheme/index.md
Normal file
60
docs/contents/articles/011-changing-color-scheme/index.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
title: Changing Color Scheme
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
We tried to make the process of changing color scheme in BlurAdmin as easy as possible.
|
||||
|
||||
By default BlurAdmin has two color profiles: mint and blur.
|
||||
This article will help you to create your own color profile.
|
||||
Let's say you want to make BlurAdmin dark.
|
||||
|
||||
First we advice you to take some colorscheme file as a basis.
|
||||
For light themes we suggest you to take `src/sass/theme/conf/colorScheme/_mint.scss` one and for dark take `src/sass/theme/conf/colorScheme/_blur.scss` one.
|
||||
As we want dark theme, we're taking `blur`.
|
||||
|
||||
1) Copy `src/sass/theme/conf/colorScheme/_blur.scss` to `src/sass/theme/conf/colorScheme/_dark.scss`.
|
||||
|
||||
2) Include your colorscheme file in `src/sass/theme/common.scs`.
|
||||
|
||||
To do this, replace
|
||||
```scss
|
||||
@import 'theme/conf/colorScheme/mint';
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```scss
|
||||
@import 'theme/conf/colorScheme/dark';
|
||||
```
|
||||
|
||||
Now you can start changing your colors.
|
||||
For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file:
|
||||
```sass
|
||||
$default: rgba(#000000, 0.2); //Panel background color
|
||||
$body-bg: #F0F3F4; // Body background color
|
||||
$default-text: #ffffff; // Default text color
|
||||
$help-text: #eeeeee; // Default subtext color
|
||||
$label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases)
|
||||
```
|
||||
|
||||
After this is done, you need to setup javascript to use **same colors** while building charts and other javascript components.
|
||||
To do this, add following code to some configuration block, for example to `src/app/theme/theme.config.js`:
|
||||
```javascript
|
||||
baConfigProvider.changeColors({
|
||||
default: '#4e4e55',
|
||||
defaultText: '#e2e2e2',
|
||||
});
|
||||
```
|
||||
|
||||
That's basically it! Right now your admin application should look like this:
|
||||
|
||||
|
||||
|
||||
For further reference, please look in
|
||||
- Colorscheme scss file (`src/sass/theme/conf/colorScheme/_mint.scss` or `src/sass/theme/conf/colorScheme/_blur.scss`)
|
||||
- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
|
||||
- If you want to know how to change theme to blur, read [following article](/blur-admin/articles/014-switch-to-blur-theme/)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
33
docs/contents/articles/012-project-structure/index.md
Normal file
33
docs/contents/articles/012-project-structure/index.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: Project Structure
|
||||
author: vl
|
||||
sort: 800
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Project structure was originally based on [this angular generator](https://github.com/Swiip/generator-gulp-angular). We made some changes we thought would be better for our particular problem.
|
||||
|
||||
The directory structure of this template is as follows:
|
||||
```
|
||||
├── bower.json <- front-end library dependencies
|
||||
├── gulpfile.js <- main task runner file
|
||||
├── package.json <- mostly task runner dependencies
|
||||
├── docs/ <- wintersmith documentation generator
|
||||
├── gulp/ <- build tasks
|
||||
├── src/ <- main front-end assets
|
||||
│ ├── 404.html
|
||||
│ ├── auth.html
|
||||
│ ├── index.html <- main app dashboard page
|
||||
│ ├── reg.html
|
||||
│ ├── app/ <- angular application files
|
||||
│ │ ├── app.js <- angular application entry point. Used for managing dependencies
|
||||
│ │ ├── pages/ <- UI router pages. Pages created for demonstration purposes. Put your application js and html files here
|
||||
│ │ ├── theme/ <- theme components. Contains various common widgets, panels which used across application
|
||||
│ ├── assets/ <- static files (images, fonts etc.)
|
||||
│ ├── sass/ <- sass styles
|
||||
│ │ ├── app/ <- application styles. Used mostly for demonstration purposes. Put your app styles here.
|
||||
│ │ ├── theme/ <- theme styles. Used to customize bootstrap and other common components used in tempate.
|
||||
```
|
||||
|
||||
In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need. Though we understand that our structure is not ideal, but we're aiming to make it as good as possible.
|
||||
68
docs/contents/articles/013-create-new-page/index.md
Normal file
68
docs/contents/articles/013-create-new-page/index.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
title: Create New Page
|
||||
author: vl
|
||||
sort: 300
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation.
|
||||
That means to create new page you need to basically configure `ui-router` state.
|
||||
|
||||
We strongly recommend to follow pages structure in your application.
|
||||
If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
|
||||
|
||||
Also we recommend to put pages to separate modules.
|
||||
This will allow you to easily switch off some pages in the future if needed.
|
||||
|
||||
## Page creation example
|
||||
|
||||
0) Let's assume we want to create a blank page with title 'My New Page'
|
||||
|
||||
1) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `myNewPage`.
|
||||
|
||||
2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
|
||||
|
||||
```javascript
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.myNewPage', [])
|
||||
.config(routeConfig);
|
||||
|
||||
/** @ngInject */
|
||||
function routeConfig() {
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
```
|
||||
|
||||
3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`.
|
||||
|
||||
4) Lastly let's create ui router state for this page. To do this we need to modify module.js file we created on step 2:
|
||||
```javascript
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.myNewPage', [])
|
||||
.config(routeConfig);
|
||||
|
||||
/** @ngInject */
|
||||
function routeConfig($stateProvider) {
|
||||
$stateProvider
|
||||
.state('myNewPage', {
|
||||
url: '/myNewPage',
|
||||
templateUrl: 'app/pages/myNewPage/my-new-page.html',
|
||||
title: 'My New Page',
|
||||
sidebarMeta: {
|
||||
order: 800,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
```
|
||||
|
||||
That's it! Your can now open your new page either from sidebar or through hash URL.
|
||||
|
||||
54
docs/contents/articles/014-switch-to-blur-theme/index.md
Normal file
54
docs/contents/articles/014-switch-to-blur-theme/index.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Enabling blur theme
|
||||
author: kd
|
||||
sort: 850
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
If you want to switch theme to the blur, you need to follow 3 simple steps:
|
||||
|
||||
1) Blur theme needs some javascript to calculate initial background offsets for panels.
|
||||
That's why first thing you need to do is enable that code.
|
||||
This should be done in Angular **configuration block**.
|
||||
For example you can add following lines to `src/app/theme/theme.config.js`:
|
||||
```javascript
|
||||
baConfigProvider.changeTheme({blur: true});
|
||||
```
|
||||
|
||||
2) As well you need to change some colors.
|
||||
For example *Mint*'s default gray text color doesn't look good on blurred panels.
|
||||
For our blur theme we use following configuration:
|
||||
```javascript
|
||||
baConfigProvider.changeColors({
|
||||
default: 'rgba(#000000, 0.2)',
|
||||
defaultText: '#ffffff',
|
||||
dashboard: {
|
||||
white: '#ffffff',
|
||||
},
|
||||
});
|
||||
```
|
||||
3) CSS should also be recompiled.
|
||||
Before running build command, we suggest you to switch to *blur* color profile.
|
||||
To do this replace theme in file `src/sass/theme/common.scss`:
|
||||
|
||||
|
||||
```scss
|
||||
@import 'theme/conf/colorScheme/mint';
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```scss
|
||||
@import 'theme/conf/colorScheme/blur';
|
||||
```
|
||||
|
||||
3.1) If you would like to use some different background, replace following images:
|
||||
|
||||
- `src/app/assets/img/blur-bg.jpg` (main background image)
|
||||
- `src/app/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
|
||||
|
||||
We suggest using 10px Gaussian blur to blur original image.
|
||||
|
||||
_________________________________________
|
||||
That's it! You have successfully blurred your theme! Run `gulp serve` and check it out.
|
||||
132
docs/contents/articles/051-sidebar/index.md
Normal file
132
docs/contents/articles/051-sidebar/index.md
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
---
|
||||
title: Sidebar
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Components
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Sidebar is used to provide convenient way of navigation in the application.
|
||||
Application support only one sidebar per angular application.
|
||||
That means sidebar is basically a singletone object.
|
||||
Currently sidebar supports level 1 and 2 sub menus.
|
||||
|
||||
Sidebar can be created using `baSidebar` directive:
|
||||
```html
|
||||
<ba-sidebar></ba-sidebar>
|
||||
```
|
||||
|
||||
For now it support only javascript configuration. Though it can be configured manually or via `ui-router` states.
|
||||
This methods can be used either together or one at a time.
|
||||
|
||||
|
||||
## Manual configuration
|
||||
|
||||
For manual configuration you need to use `baSidebarServiceProvider` provider in angular [configuration block](https://docs.angularjs.org/guide/module#configuration-blocks).
|
||||
The provider has `addStaticItem` method, which receives menuItem object as an argument, which can have following properties:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>property</td>
|
||||
<td>type</td>
|
||||
<td>meaning</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>String</td>
|
||||
<td>Name of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>String</td>
|
||||
<td>Icon (it's a class name) to be displayed near title</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>stateRef</td>
|
||||
<td>String</td>
|
||||
<td>`ui-router` state associated with this menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>fixedHref</td>
|
||||
<td>String</td>
|
||||
<td>Url associated with this menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>blank</td>
|
||||
<td>String</td>
|
||||
<td>Specifies if following Url should be opened in new browser tab</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>subMenu</td>
|
||||
<td>Array of menu items</td>
|
||||
<td>List of menu items to be displayed as next level submenu</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Sample manual configuration:
|
||||
```javascript
|
||||
baSidebarServiceProvider.addStaticItem({
|
||||
title: 'Menu Level 1',
|
||||
icon: 'ion-ios-more'
|
||||
});
|
||||
```
|
||||
|
||||
## Route configuration
|
||||
|
||||
By default sidebar iterates through all **ui-router** states you defined in your application and searches for `sidebarMeta` object in them.
|
||||
For each state, which has this property, sidebar element is created.
|
||||
|
||||
States are being grouped hierarchically.
|
||||
That means if there's a parent abstract state for some state and they both have `sidebarMeta` property, it will be displayed as a sub item of that abstract state's menu item.
|
||||
|
||||
Name of the item is taken from `state`'s `title` property. Sample state configuration, which will add an item to sidebar:
|
||||
```javascript
|
||||
$stateProvider
|
||||
.state('dashboard', {
|
||||
url: '/dashboard',
|
||||
templateUrl: 'app/pages/dashboard/dashboard.html',
|
||||
title: 'Dashboard',
|
||||
sidebarMeta: {
|
||||
icon: 'ion-android-home',
|
||||
order: 0,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`sidebarMeta` object can have following properties:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>property</td>
|
||||
<td>type</td>
|
||||
<td>meaning</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>String</td>
|
||||
<td>Icon (it's a class name) to be displayed near title</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>order</td>
|
||||
<td>Number</td>
|
||||
<td>Element's order in current hierarchy</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
960
docs/contents/css/main.css
Normal file
960
docs/contents/css/main.css
Normal file
|
|
@ -0,0 +1,960 @@
|
|||
html {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
color: #484848;
|
||||
line-height: 1.28
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility
|
||||
}
|
||||
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
font-weight: normal;
|
||||
color: #7b7b7b
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 39px
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 31px
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 23px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 11px
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0 0 10px 25px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ol, ol ul {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c05b4d;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #a5473a;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
html {
|
||||
background: #f9f9f9
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
min-width: 960px
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px
|
||||
}
|
||||
|
||||
.skinnyWrap {
|
||||
width: 690px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin-left: 20px
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
|
||||
margin-top: -50px;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hash-link {
|
||||
color: #aaa;
|
||||
display: none
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.nav-main:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.nav-main a {
|
||||
color: #e9e9e9;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.nav-main .nav-site-internal {
|
||||
margin: 0 0 0 20px
|
||||
}
|
||||
|
||||
.nav-main .nav-site-external {
|
||||
float: right;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a {
|
||||
box-sizing: content-box;
|
||||
padding: 0 10px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
color: #ddd
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a:hover {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a.active {
|
||||
color: #fafafa;
|
||||
border-bottom: 3px solid #cc7a6f;
|
||||
background: #333
|
||||
}
|
||||
|
||||
.nav-main .nav-home {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.nav-main .nav-home .blur-label {
|
||||
color: #209e91;
|
||||
}
|
||||
|
||||
.nav-main .nav-logo {
|
||||
vertical-align: middle;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.nav-main ul {
|
||||
display: inline-block;
|
||||
vertical-align: top
|
||||
}
|
||||
|
||||
.nav-main li {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.hero .hero-content {
|
||||
color: #e9e9e9;
|
||||
font-weight: 300;
|
||||
background: #313131;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.hero .text {
|
||||
font-size: 64px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.hero .minitext {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.hero strong {
|
||||
color: #209e91;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.white-text {
|
||||
color: rgb(249, 249, 249);
|
||||
}
|
||||
|
||||
.hero .admin-screenshots {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hero .admin-screenshot {
|
||||
width: 50%;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.admin-screenshot img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.demo-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 52px;
|
||||
background-image: linear-gradient(to bottom, transparent, rgb(249,259,249));
|
||||
}
|
||||
|
||||
.demo-link .demo-link-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content: 'Demo';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: rgb(249, 249, 249);
|
||||
font-size: 32px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.demo-link:hover .demo-link-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttons-unit {
|
||||
margin-top: 60px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.buttons-unit a {
|
||||
color: #61dafb
|
||||
}
|
||||
|
||||
.buttons-unit .button {
|
||||
font-size: 24px;
|
||||
background: #cc7a6f;
|
||||
color: #fafafa
|
||||
}
|
||||
|
||||
.buttons-unit .button:active {
|
||||
background: #c5695c
|
||||
}
|
||||
|
||||
.buttons-unit.downloads {
|
||||
margin: 30px 0
|
||||
}
|
||||
|
||||
.index-block {
|
||||
padding:40px 0;
|
||||
}
|
||||
|
||||
.index-block h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index-block.black {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.why-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.why-item {
|
||||
flex: 33%;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.why-item img {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.nav-docs {
|
||||
color: #2d2d2d;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
width: 210px
|
||||
}
|
||||
|
||||
.nav-docs ul {
|
||||
list-style: none;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-docs ul ul {
|
||||
margin: 6px 0 0 20px
|
||||
}
|
||||
|
||||
.nav-docs li {
|
||||
line-height: 16px;
|
||||
margin: 0 0 6px
|
||||
}
|
||||
|
||||
.nav-docs h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.nav-docs a {
|
||||
color: #666;
|
||||
display: block
|
||||
}
|
||||
|
||||
.nav-docs a:hover {
|
||||
text-decoration: none;
|
||||
color: #cc7a6f
|
||||
}
|
||||
|
||||
.nav-docs a.active {
|
||||
color: #cc7a6f
|
||||
}
|
||||
|
||||
.nav-docs a.external:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding-left: 5px;
|
||||
background-image: url("../img/external.png");
|
||||
background-position: 100% 0;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 10px;
|
||||
line-height: 1em;
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
|
||||
.nav-docs a.external:after {
|
||||
background-image: url("../img/external_2x.png");
|
||||
background-size: 10px 10px
|
||||
}
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 12px 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.nav-blog li {
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
.nav-docs-right {
|
||||
display: block;
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.nav-docs-right a {
|
||||
color: #c05b4d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-docs-right a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.home-divider {
|
||||
border-top-color: #bbb;
|
||||
margin: 0 auto;
|
||||
width: 400px
|
||||
}
|
||||
|
||||
.skinny-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.skinny-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 305px
|
||||
}
|
||||
|
||||
.skinny-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.marketing-row {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.marketing-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.marketing-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 280px
|
||||
}
|
||||
|
||||
.marketing-col h3 {
|
||||
color: #2d2d2d;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.marketing-col p {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.marketing-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
#examples h3, .home-presentation h3 {
|
||||
color: #2d2d2d;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
#examples p {
|
||||
margin: 0 0 25px 0;
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
#examples .example {
|
||||
margin-top: 60px
|
||||
}
|
||||
|
||||
#examples #todoExample {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
#examples #todoExample ul {
|
||||
list-style-type: square;
|
||||
margin: 0 0 10px 0
|
||||
}
|
||||
|
||||
#examples #todoExample input {
|
||||
border: 1px solid #ccc;
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
padding: 3px;
|
||||
width: 150px
|
||||
}
|
||||
|
||||
#examples #todoExample button {
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
margin-left: 5px;
|
||||
padding: 4px 10px
|
||||
}
|
||||
|
||||
#examples #markdownExample textarea {
|
||||
border: 1px solid #ccc;
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.home-bottom-section {
|
||||
margin-bottom: 100px
|
||||
}
|
||||
|
||||
.docs-nextprev:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.jsxCompiler {
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
width: 1220px
|
||||
}
|
||||
|
||||
.jsxCompiler label.compiler-option {
|
||||
display: block;
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
.jsxCompiler #jsxCompiler {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview {
|
||||
padding: 0;
|
||||
width: 600px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview pre {
|
||||
font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundError {
|
||||
padding: 15px 20px
|
||||
}
|
||||
|
||||
.docs-prev {
|
||||
float: left
|
||||
}
|
||||
|
||||
.docs-next {
|
||||
float: right
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
section.black content {
|
||||
padding-bottom: 18px
|
||||
}
|
||||
|
||||
.blogContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.blogContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.blogContent blockquote {
|
||||
padding: 5px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: #f8f5ec;
|
||||
border-left: 5px solid #f7ebc6
|
||||
}
|
||||
|
||||
.blogContent h2 > code {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: #555;
|
||||
background-color: rgba(0, 0, 0, 0.04)
|
||||
}
|
||||
|
||||
.documentationContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.documentationContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.documentationContent .subHeader {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.documentationContent h2 {
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.documentationContent blockquote {
|
||||
padding: 15px 30px 15px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: rgba(204, 122, 111, 0.1);
|
||||
border-left: 5px solid rgba(191, 87, 73, 0.2)
|
||||
}
|
||||
|
||||
.documentationContent blockquote h4 {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.documentationContent blockquote p {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.documentationContent blockquote p:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 17.5px;
|
||||
line-height: 20px;
|
||||
margin-top: 0;
|
||||
text-rendering: optimizelegibility
|
||||
}
|
||||
|
||||
.docs-prevnext {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px
|
||||
}
|
||||
|
||||
.button {
|
||||
background: -webkit-linear-gradient(#9a9a9a, #646464);
|
||||
background: linear-gradient(#9a9a9a, #646464);
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 12px;
|
||||
display: inline-block;
|
||||
color: #fafafa;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.button:active {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.hero .button {
|
||||
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.button.blue {
|
||||
background: -webkit-linear-gradient(#77a3d2, #4783c2);
|
||||
background: linear-gradient(#77a3d2, #4783c2)
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-bottom: 4px
|
||||
}
|
||||
|
||||
.row .span4 {
|
||||
width: 33.33%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span8 {
|
||||
width: 66.66%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span6 {
|
||||
width: 50%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
float: right;
|
||||
width: 650px
|
||||
}
|
||||
|
||||
.nosidebar .inner-content {
|
||||
float: none;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.inner-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.inner-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.inner-content th, .inner-content td {
|
||||
padding: 0.25rem;
|
||||
text-align: left;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.inner-content tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.edit-page-link {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
margin-top: 17px
|
||||
}
|
||||
|
||||
.post-list-item + .post-list-item {
|
||||
margin-top: 60px
|
||||
}
|
||||
|
||||
/* code styling */
|
||||
|
||||
code {
|
||||
font-family: 'Anonymous Pro', sans-serif;
|
||||
font-size: 0.85em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
color: #333333;
|
||||
background: #f8f5ec;
|
||||
padding: 30px 14px 14px;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #c2c0bc;
|
||||
background-color: #f1ede4;
|
||||
content: "Code";
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 0.1em 0.3em 0.2em;
|
||||
border-radius: 0.3em;
|
||||
position: relative;
|
||||
background: #fffff3;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* syntax hl stuff */
|
||||
|
||||
code.lang-markdown {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code.lang-markdown .emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.lang-markdown .horizontal_rule,
|
||||
code.lang-markdown .link_label,
|
||||
code.lang-markdown .code,
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .link_url {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
code.lang-markdown .blockquote,
|
||||
code.lang-markdown .bullet {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Tomorrow Theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
.tomorrow-comment, pre .comment, pre .title {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
|
||||
color: #eab700;
|
||||
}
|
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.nav-main {
|
||||
position: static
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 0
|
||||
}
|
||||
}
|
||||
BIN
docs/contents/images/blur-admin-logo.png
Normal file
BIN
docs/contents/images/blur-admin-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
docs/contents/images/blur-preview-mint.jpg
Normal file
BIN
docs/contents/images/blur-preview-mint.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
docs/contents/images/blur-preview.jpg
Normal file
BIN
docs/contents/images/blur-preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
docs/contents/images/favicon.png
Normal file
BIN
docs/contents/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
1
docs/contents/images/why-design.svg
Normal file
1
docs/contents/images/why-design.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#209e91;"/><g><g><path d="M81.937,24.303C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v56c0,2.209,1.791,4,4,4h48 c2.209,0,4-1.791,4-4V27C83,25.957,82.591,25.015,81.937,24.303z" style="fill:#F0F1F1;"/></g><g><path d="M31,29c0-1.104,0.895-2,2-2h12c1.105,0,2,0.896,2,2v30.239l4.436-4.436 C51.179,54.623,51,54.338,51,54V44c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l4.632-4.632 C67.179,38.623,67,38.338,67,38V28c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l3.133-3.133 C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v52.239l4-4V29z M51,28c0-0.552,0.448-1,1-1h10c0.552,0,1,0.448,1,1v10 c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V28z" style="fill:#FFFFFF;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239V81c0,1.104,0.895,2,2,2h12c1.105,0,2-0.896,2-2V59.239V29 C47,27.896,46.105,27,45,27z" style="fill:#F4D0A1;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239l16-16V29C47,27.896,46.105,27,45,27z" style="fill:#F8E1C2;"/></g><g><path d="M52,39h10c0.552,0,1-0.448,1-1V28c0-0.552-0.448-1-1-1H52c-0.552,0-1,0.448-1,1v10 C51,38.552,51.448,39,52,39z" style="fill:#F79392;"/></g><g><path d="M78.803,27.436C78.622,27.179,78.338,27,78,27H68c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C67.598,38.918,67.786,39,68,39h10c0.552,0,1-0.448,1-1V28 C79,27.786,78.918,27.599,78.803,27.436z" style="fill:#FACB1B;"/></g><g><path d="M78,27H68c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C78.622,27.179,78.338,27,78,27z" style="fill:#FBE158;"/></g><g><path d="M62.803,43.436C62.622,43.179,62.338,43,62,43H52c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C51.598,54.918,51.786,55,52,55h10c0.552,0,1-0.448,1-1V44 C63,43.786,62.918,43.599,62.803,43.436z" style="fill:#12B2A0;"/></g><g><path d="M62,43H52c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C62.622,43.179,62.338,43,62,43z" style="fill:#47C4B7;"/></g><g><path d="M39,43h-4v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39h0.02 c1.113,0,2.034-0.865,2.104-1.976L43,47v-4H39z" style="fill:#84462D;"/></g><g><path d="M35,43v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39V43H35z" style="fill:#9C6144;"/></g><g><path d="M79,54c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V44c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V54z" style="fill:#47C4B7;"/></g><g><path d="M63,70c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,70c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,82c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h26 c0.552,0,1,0.448,1,1V82z" style="fill:#F4D0A1;"/></g><g><path d="M39,30L39,30c0,0-5,5.687-5,9c0,1.851,0.713,3.175,1.811,4H39h3.189 C43.287,42.175,44,40.851,44,39C44,35.687,39.001,30.001,39,30z" style="fill:#3E3E3F;"/></g><g><path d="M34,39c0,1.851,0.713,3.175,1.811,4H39V30h0C39,30,34,35.687,34,39z" style="fill:#5B5C5F;"/></g><g><polygon points="39,43 35,43 35,47 39,47 43,47 43,43 " style="fill:#F3B607;"/></g><g><polygon points="35.811,43 35,43 35,47 39,47 39,43 " style="fill:#FACB1B;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
1
docs/contents/images/why-practices.svg
Normal file
1
docs/contents/images/why-practices.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
1
docs/contents/images/why-structure.svg
Normal file
1
docs/contents/images/why-structure.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#209e91;"/><g><g><path d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84 C24.719,87,23,85.281,23,83.16V26.84z" style="fill:#FFFFFF;"/><path d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z" style="fill:#F0F1F1;"/></g><path d="M52,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H52c-0.551,0-1,0.448-1,1v5 C51,69.552,51.449,70,52,70z" style="fill:#E2E4E5;"/><path d="M62,72H52c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C65,70.654,63.654,72,62,72z M52,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H52z" style="fill:#B6BCBD;"/><path d="M30,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H30c-0.551,0-1,0.448-1,1v5 C29,69.552,29.449,70,30,70z" style="fill:#E2E4E5;"/><path d="M40,72H30c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C43,70.654,41.654,72,40,72z M30,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H30z" style="fill:#B6BCBD;"/><path d="M41,50h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H41c-0.551,0-1,0.448-1,1v5 C40,49.552,40.449,50,41,50z" style="fill:#9CE5F4;"/><g><polygon points="50.272,52 48.014,52 52.728,61 54.986,61 " style="fill:#CFD3D4;"/></g><g><polygon points="41.728,52 37.014,61 39.272,61 43.986,52 " style="fill:#CFD3D4;"/></g><path d="M51,52H41c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C54,50.654,52.654,52,51,52z M41,43c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H41z" style="fill:#40C9E7;"/><g><path d="M84.144,57.498L62.941,81.466l-5.877,1.21c-0.17-0.818-0.593-1.593-1.267-2.189 c-0.674-0.596-1.495-0.922-2.328-0.991l0.484-5.981l21.203-23.967L84.144,57.498z" style="fill:#F4D0A1;"/></g><g><path d="M84.115,57.473c0.016,0.014,0.017,0.038,0.003,0.054L63.397,80.95 c-0.033,0.038-0.086-0.002-0.062-0.047c0.651-1.2,0.414-2.728-0.653-3.672c-1.126-0.996-2.785-0.995-3.905-0.062 c-0.032,0.027-0.075-0.011-0.052-0.046c0.79-1.225,0.589-2.871-0.537-3.868c-1.079-0.955-2.648-0.993-3.762-0.173 c-0.036,0.027-0.077-0.015-0.047-0.049l20.752-23.458c0.014-0.016,0.038-0.017,0.054-0.003L84.115,57.473z" style="fill:#059BBF;"/></g><g><rect height="2" style="fill:#FACB1B;" transform="matrix(0.749 0.6626 -0.6626 0.749 55.1274 -39.9673)" width="12" x="74.313" y="51.774"/></g><g><path d="M84.996,47.571l-0.09-0.08c-2.457-2.174-6.211-1.944-8.385,0.513l-0.04,0.045L85.469,56 l0.04-0.045C87.683,53.498,87.453,49.744,84.996,47.571z" style="fill:#F79392;"/></g><g><path d="M84.119,57.527L63.371,80.979c-0.03,0.034-0.077-0.002-0.055-0.042 c0.674-1.205,0.444-2.753-0.634-3.707c-1.124-0.994-2.777-0.995-3.897-0.068c-0.019,0.015-0.041-0.008-0.025-0.026l20.865-23.586 c0.014-0.016,0.038-0.017,0.053-0.003l4.437,3.925C84.131,57.487,84.133,57.511,84.119,57.527z" style="fill:#0484AB;"/></g><g><path d="M57.064,82.675l-3.918,0.807l0.323-3.987c0.833,0.069,1.654,0.395,2.328,0.991 C56.471,81.082,56.894,81.857,57.064,82.675z" style="fill:#3E3E3F;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
4
docs/contents/index.json
Normal file
4
docs/contents/index.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"template": "index.jade",
|
||||
"activeHome": true
|
||||
}
|
||||
9
docs/package.json
Normal file
9
docs/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"wintersmith": "2.3.1",
|
||||
"moment": "2.3.x",
|
||||
"underscore": "1.4.x",
|
||||
"typogr": "0.5.x"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
44
docs/plugins/paginator.coffee
Normal file
44
docs/plugins/paginator.coffee
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
module.exports = (env, callback) ->
|
||||
### Paginator plugin. Defaults can be overridden in config.json
|
||||
e.g. "paginator": {"perPage": 10} ###
|
||||
|
||||
defaults =
|
||||
template: 'index.jade' # template that renders pages
|
||||
articles: 'articles' # directory containing contents to paginate
|
||||
first: 'index.html' # filename/url for first page
|
||||
filename: 'page/%d/index.html' # filename for rest of pages
|
||||
perPage: 2 # number of articles per page
|
||||
groupSort: {}
|
||||
|
||||
# assign defaults any option not set in the config file
|
||||
options = env.config.paginator or {}
|
||||
for key, value of defaults
|
||||
options[key] ?= defaults[key]
|
||||
|
||||
getArticles = (contents) ->
|
||||
# helper that returns a list of articles found in *contents*
|
||||
# note that each article is assumed to have its own directory in the articles directory
|
||||
articles = contents[options.articles]._.directories.map (item) -> item.index
|
||||
# skip articles that does not have a template associated
|
||||
articles = articles.filter (item) -> item.template isnt 'none'
|
||||
# sort article by date
|
||||
articles.sort (a, b) -> b.metadata.sort - a.metadata.sort
|
||||
groupedArticlesObj = articles.reduce (acc, curr) ->
|
||||
groupName = curr.metadata.group
|
||||
if not acc[groupName]
|
||||
acc[groupName] =
|
||||
groupName: groupName
|
||||
items: []
|
||||
acc[groupName].items.push curr
|
||||
return acc
|
||||
, {}
|
||||
groupedArticles = (val for key, val of groupedArticlesObj)
|
||||
groupedArticles.sort (a, b) -> (options.groupSort[b.groupName] || 0) - (options.groupSort[a.groupName] || 0)
|
||||
return groupedArticles
|
||||
|
||||
# add the article helper to the environment so we can use it later
|
||||
env.helpers.getGroupedArticles = getArticles
|
||||
|
||||
# tell the plugin manager we are done
|
||||
callback()
|
||||
21
docs/templates/article.jade
vendored
Normal file
21
docs/templates/article.jade
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
extends layout
|
||||
|
||||
block title
|
||||
| BlurAdmin documentation - #{page.title]
|
||||
|
||||
block content
|
||||
section.content.wrap.documentationContent
|
||||
div.nav-docs
|
||||
each group in groupedArticles
|
||||
div.nav-docs.section
|
||||
h3=group.groupName
|
||||
ul
|
||||
each article in group.items
|
||||
li
|
||||
a(href=article.url)(class= locals.page === article ? 'active': '')= article.title
|
||||
div.inner-content
|
||||
h1=locals.page.title
|
||||
div.subHeader
|
||||
!= typogr(page.html).typogrify()
|
||||
|
||||
69
docs/templates/index.jade
vendored
Normal file
69
docs/templates/index.jade
vendored
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
|
||||
extends layout
|
||||
|
||||
block title
|
||||
| BlurAdmin angular admin dashboard template
|
||||
|
||||
block content
|
||||
div.hero
|
||||
div.hero-content
|
||||
div.wrap
|
||||
div.text
|
||||
strong Blur#[span.white-text Admin]
|
||||
div.minitext Angular admin panel front-end framework
|
||||
div.buttons-unit
|
||||
a.button(href=installationArticleUrl) Installation guidelines
|
||||
a.button(href=firstArticleUrl) Documentation
|
||||
div.admin-screenshots
|
||||
div.admin-screenshot
|
||||
h3 Mint version
|
||||
a.demo-link(href='http://akveo.com/blur-admin-mint/',target='_blank')
|
||||
img(src=contents.images['blur-preview-mint.jpg'].url)
|
||||
span.demo-link-label Demo
|
||||
div.admin-screenshot
|
||||
h3 Blur version (experimental)
|
||||
a.demo-link(href='http://akveo.com/blur-admin/',target='_blank')
|
||||
img(src=contents.images['blur-preview.jpg'].url)
|
||||
span.demo-link-label Demo
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1 Why BlurAdmin?
|
||||
div.why-items
|
||||
div.why-item
|
||||
img(src=contents.images['why-structure.svg'].url)
|
||||
h4 Awesome structure
|
||||
p Feature-based structure has proven itself as a good choice for large angular applications.
|
||||
div.why-item
|
||||
img(src=contents.images['why-design.svg'].url)
|
||||
h4 Neat design
|
||||
p We have put a lot of efforts and carefully selected each color and character for this template!
|
||||
div.why-item
|
||||
img(src=contents.images['why-practices.svg'].url)
|
||||
h4 Ease of customization
|
||||
p Check out #[a(href='/blur-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes!
|
||||
div.index-block.black
|
||||
div.wrap
|
||||
h1 Is it free?
|
||||
p Blur admin is completely free and MIT licensed. That means you can do whatever you want with it.
|
||||
p
|
||||
| Initially we planned to sell it on template markets.
|
||||
| But they #[a(href='http://akveo.com/blog/why-i-hate-template-markets/',target='_blank') rejected us several times].
|
||||
| That's why we decided to make it open-source. And honestly, we have completely no regrets about it!
|
||||
| And we suggest you to not waste your money and use our template instead of paid ones!
|
||||
| Trust us, it's better than large number of them.
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1 How can I support you guys?
|
||||
p Here's what you can do:
|
||||
ul
|
||||
li Star #[a(href='https://github.com/akveo/blur-admin',target='_blank') our GitHub repo]
|
||||
li Create pull requests, submit bugs, suggest new features
|
||||
li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter]
|
||||
li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook]
|
||||
div.index-block.black
|
||||
div.wrap
|
||||
h1 Can I hire you?
|
||||
p Yes! We are available for hire. Visit #[a(href='http://akveo.com',target='_blank') our homepage]
|
||||
| or simply leave us a note to #[a(href='mailto:contact@akveo.com') contact@akveo.com].
|
||||
| We will be happy to work with you!
|
||||
|
||||
43
docs/templates/layout.jade
vendored
Normal file
43
docs/templates/layout.jade
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
doctype html
|
||||
block vars
|
||||
- var bodyclass = null;
|
||||
- var groupedArticles = env.helpers.getGroupedArticles(contents);
|
||||
- var firstArticleUrl = groupedArticles[0].items[0].url
|
||||
- var installationArticleUrl = groupedArticles[0].items[1].url
|
||||
html(lang='en')
|
||||
head
|
||||
block head
|
||||
meta(charset='utf-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
|
||||
meta(name='viewport', content='width=device-width')
|
||||
meta(name='keywords', content='admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript')
|
||||
title
|
||||
block title
|
||||
= locals.name
|
||||
link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description)
|
||||
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic')
|
||||
link(rel='stylesheet', href=contents.css['main.css'].url)
|
||||
link(rel='shortcut icon', href=contents.images['favicon.png'].url)
|
||||
body(class=bodyclass)
|
||||
div.container
|
||||
div.nav-main
|
||||
div.wrap
|
||||
a.nav-home(href=contents['index'].url)
|
||||
img.nav-logo(src=contents.images['blur-admin-logo.png'].url, width=36,height=36)
|
||||
| #[span.blur-label Blur]Admin
|
||||
ul.nav-site.nav-site-internal
|
||||
li
|
||||
a(class= locals.page.metadata.activeHome ? 'active': '')(href=contents['index'].url) Home
|
||||
li
|
||||
a(class= !locals.page.metadata.activeHome ? 'active': '')(href=firstArticleUrl) Docs
|
||||
span.nav-docs-right
|
||||
| Need some help? Let us know! #[a(href='mailto:contact@akveo.com') contact@akveo.com]
|
||||
block content
|
||||
h2 Welcome to blur admin!
|
||||
footer.wrap
|
||||
div.left Powered by Angular, Bootsrap, Gulp and more...
|
||||
div.right
|
||||
| © 2015–2016 Akveo LLC<br />
|
||||
| Documentation licensed under #[a(href='https://creativecommons.org/licenses/by/4.0/') CC BY 4.0].
|
||||
a(href='https://github.com/akveo/blur-admin')
|
||||
img(style='position: fixed; top: 0; right: 0; border: 0; z-index: 1000;',src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67',alt='Fork me on GitHub',data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png')
|
||||
Loading…
Add table
Add a link
Reference in a new issue