jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Update 2016-05-10T22:14:32.135Z

pull/217/head
Vladimir Lugovsky 2016-05-11 01:14:57 +03:00
parent 5fe7b93ce2
commit 146da6b4d1
7 changed files with 320 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
articles/001-getting-started/index.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<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>BlurAdmin documentation - Getting Started</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
<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&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="/blur-admin/css/main.css">
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/">Home</a></li>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h3>Quick Start</h3>
<ul>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Getting Started</a></li>
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Customization</h3>
<ul>
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Getting Started</h1>
<div class="subHeader"></div><h2 id="what-is-bluradmin-">What is&nbsp;BlurAdmin?</h2>
<p>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&nbsp;limitations.</p>
<h2 id="how-can-it-help-me-">How can it help&nbsp;me?</h2>
<p>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&nbsp;analytics.</p>
<p>BlurAdmin aims to bootstrap development of your product and provide ecosystem for building a prototype or even production-ready&nbsp;application.</p>
<p>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 <span class="caps">UI</span> components with unified color&nbsp;scheme.</p>
<p>As well you can use BlurAdmin for learning&nbsp;purposes.</p>
<h2 id="list-of-features">List of&nbsp;features</h2>
<ul>
<li>Responsive&nbsp;layout</li>
<li>High&nbsp;resolution</li>
<li>Bootstrap <span class="caps">CSS</span>&nbsp;Framework</li>
<li>Sass</li>
<li>Gulp&nbsp;build</li>
<li>AngularJS</li>
<li>Jquery</li>
<li>Jquery&nbsp;ui</li>
<li>Charts (amChart, Chartist, Chart.js,&nbsp;Morris)</li>
<li>Maps (Google, Leaflet,&nbsp;amMap)</li>
<li>etc</li>
</ul>
<h2 id="i-want-to-start-developing-with-bluradmin">I want to start developing with&nbsp;BlurAdmin</h2>
<p>Welcome&nbsp;abroad!</p>
<p>You can start with <a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a>. We describe there how can you download and run template on you local&nbsp;machine.</p>
<p>Good luck and have&nbsp;fun!</p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootsrap, Gulp and more...</div>
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div>
</body>
</html>

79
articles/002-installation-guidelines/index.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<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>BlurAdmin documentation - Installation Guidelines</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
<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&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="/blur-admin/css/main.css">
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/">Home</a></li>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h3>Quick Start</h3>
<ul>
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/blur-admin/articles/002-installation-guidelines/" class="active">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Customization</h3>
<ul>
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Installation Guidelines</h1>
<div class="subHeader"></div><h2 id="prerequisites">Prerequisites</h2>
<p>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&nbsp;installation.</p>
<h2 id="install-tools">Install&nbsp;tools</h2>
<p>If you don’t havee any of these tools installed already, you will need&nbsp;to:</p>
<ul>
<li>Download and install <a href="https://git-scm.com/">git</a></li>
<li>Download and install nodejs <a href="https://nodejs.org">https://nodejs.org</a></li>
</ul>
<p><strong>Note</strong>: 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&nbsp;latest.</p>
<h2 id="clone-repository-and-install-dependencies">Clone repository and install&nbsp;dependencies</h2>
<p>You will need to clone source code of BlurAdmin GitHub repository. To do this open console and execute following&nbsp;lines:</p>
<pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/blur-admin.git
</code></pre>
<p>After repository is cloned, go inside of repository directory and install dependencies&nbsp;there:</p>
<pre><code class="lang-bash"><span class="built_in">cd</span> blur-admin
npm install
</code></pre>
<p>This will setup a working copy of BlurAdmin on your local&nbsp;machine</p>
<h2 id="running-local-copy">Running local&nbsp;copy</h2>
<p>To run local copy in development mode,&nbsp;execute:</p>
<pre><code class="lang-bash">gulp serve
</code></pre>
<p>This script should automatically open template in your default&nbsp;browser.</p>
<p>To run local copy in production mode,&nbsp;execute:</p>
<pre><code class="lang-bash">gulp serve:dist
</code></pre>
<p>For addition information about build, please check out <a href="https://github.com/Swiip/generator-gulp-angular">this angular&nbsp;generator</a></p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootsrap, Gulp and more...</div>
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div>
</body>
</html>

87
articles/011-changing-color-scheme/index.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<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>BlurAdmin documentation - Changing Color Scheme</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
<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&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="/blur-admin/css/main.css">
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/">Home</a></li>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h3>Quick Start</h3>
<ul>
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Customization</h3>
<ul>
<li><a href="/blur-admin/articles/011-changing-color-scheme/" class="active">Changing Color Scheme</a></li>
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Changing Color Scheme</h1>
<div class="subHeader"></div><p>If you want to change template color scheme, you just need to do 4 simple&nbsp;steps:</p>
<p>1) Change color scheme in javascript (<code>src/app/theme/theme.constants.js</code>):</p>
<pre><code class="lang-javascript"> <span class="comment">// main color scheme</span>
<span class="keyword">var</span> colorScheme = {
primary: <span class="string">'#209e91'</span>,
info: <span class="string">'#2dacd1'</span>,
success: <span class="string">'#90b900'</span>,
warning: <span class="string">'#dfb81c'</span>,
danger: <span class="string">'#e85656'</span>,
};
<span class="comment">// background color palette</span>
<span class="keyword">var</span> bgColorPalette = {
blueStone: <span class="string">'#005562'</span>,
surfieGreen: <span class="string">'#0e8174'</span>,
silverTree: <span class="string">'#6eba8c'</span>,
gossip: <span class="string">'#b9f2a1'</span>,
white: <span class="string">'#ffffff'</span>,
};
</code></pre>
<ul>
<li>css colors and javascript colors in colorScheme object should be the&nbsp;same</li>
<li>background color palette is used for the pie traffic chart and calendar on the dashboard&nbsp;page</li>
</ul>
<p>2) Change colors in css (<code>src/sass/theme/conf/_colorScheme.scss</code>):</p>
<pre><code class="lang-scss"><span class="variable">$primary</span>: <span class="number">#209e91</span> !default;
<span class="variable">$info</span>: <span class="number">#2dacd1</span> !default;
<span class="variable">$success</span>: <span class="number">#90b900</span> !default;
<span class="variable">$warning</span>: <span class="number">#dfb81c</span> !default;
<span class="variable">$danger</span>: <span class="number">#e85656</span> !default;
</code></pre>
<p>3) Replace background images: <code>src/app/assets/img/blur-bg.jpg</code> and <code>src/app/assets/img/blur-bg-blurred.jpg</code></p>
<p>4) build source files and run application: <code>gulp</code> and <code>gulp serve</code></p>
<p>Below is an example of template with another color&nbsp;scheme:</p>
<p><img src="/blur-admin/articles/011-changing-color-scheme/new-color-scheme.jpg" alt=""></p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootsrap, Gulp and more...</div>
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div>
</body>
</html>

BIN
articles/011-changing-color-scheme/new-color-scheme.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

73
articles/012-project-structure/index.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<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>BlurAdmin documentation - Project Structure</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
<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&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="/blur-admin/css/main.css">
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/">Home</a></li>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h3>Quick Start</h3>
<ul>
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Customization</h3>
<ul>
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
<li><a href="/blur-admin/articles/012-project-structure/" class="active">Project Structure</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Project Structure</h1>
<div class="subHeader"></div><p>Project structure was originally based on <a href="https://github.com/Swiip/generator-gulp-angular">this angular generator</a>. We made some changes we thought would be better for our particular&nbsp;problem.</p>
<p>The directory structure of this template is as&nbsp;follows:</p>
<pre><code>├── bower.json &lt;- front-end library dependencies
├── gulpfile.js &lt;- main task runner file
├── package.json &lt;- mostly task runner dependencies
├── docs/ &lt;- wintersmith documentation generator
├── gulp/ &lt;- build tasks
├── src/ &lt;- main front-end assets
│ ├── 404.html
│ ├── auth.html
│ ├── index.html &lt;- main app dashboard page
│ ├── reg.html
│ ├── app/ &lt;- angular application files
│ │ ├── app.js &lt;- angular application entry point. Used for managing dependencies
│ │ ├── pages/ &lt;- UI router pages. Pages created for demonstration purposes. Put your application js and html files here
│ │ ├── theme/ &lt;- theme components. Contains various common widgets, panels which used across application
│ ├── assets/ &lt;- static files (images, fonts etc.)
│ ├── sass/ &lt;- sass styles
│ │ ├── app/ &lt;- application styles. Used mostly for demonstration purposes. Put your app styles here.
│ │ ├── theme/ &lt;- theme styles. Used to customize bootstrap and other common components used in tempate.
</code></pre><p>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&nbsp;possible.</p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootsrap, Gulp and more...</div>
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div>
</body>
</html>

3
css/main.css
View File

@ -833,7 +833,7 @@ h1:after {
/* code styling */
code {
font-family: 'Anonymous Pro', monospace;
font-family: 'Anonymous Pro', sans-serif;
font-size: 0.85em;
color: #000;
}
@ -845,6 +845,7 @@ pre code {
background: #f8f5ec;
padding: 30px 14px 14px;
position: relative;
overflow-x: auto;
}
pre code:before {

4
index.html
View File

@ -17,7 +17,7 @@
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/" class="active">Home</a></li>
<li><a href="/blur-admin/articles/red-herring/">Docs</a></li>
<li><a href="/blur-admin/articles/001-getting-started/">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
@ -26,7 +26,7 @@
<div class="wrap">
<div class="text"><strong>Blur<span class="white-text">Admin</span></strong></div>
<div class="minitext">Angular admin dashboard front-end framework</div>
<div class="buttons-unit"><a href="/blur-admin/articles/bamboo-cutter/" class="button">Installation guidelines</a><a href="/blur-admin/articles/red-herring/" class="button">Documentation</a></div>
<div class="buttons-unit"><a href="/blur-admin/articles/002-installation-guidelines/" class="button">Installation guidelines</a><a href="/blur-admin/articles/001-getting-started/" class="button">Documentation</a></div>
<div class="admin-screenshots">
<div class="admin-screenshot">
<h3>Mint version</h3><a href="http://akveo.com/blur-admin-mint/" target="_blank" class="demo-link"><img src="/blur-admin/images/blur-preview-mint.jpg"><span class="demo-link-label">Demo</span></a>