File size: 8.09Kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>gridmanager.js : Themeing with LESS</title>
<meta name="description" content="Structural editor for rows and columns in popular CSS frameworks">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet" href="/jQuery-gridmanager/docs/css/syntax.css">
<link rel="stylesheet" href="/jQuery-gridmanager/docs/css/main.css">
</head>
<body>
<div class="container">
<div class=row-fluid>
<div id=header class=span12>
<h4><a class=brand href="/jQuery-gridmanager/docs/">gridmanager.js</a>
<small>Structural editor for rows and columns in popular CSS frameworks</small>
</h4>
</div>
</div>
<div class=row-fluid>
<div id=navigation class=span2>
<ul class="nav nav-list">
<li><a href="/jQuery-gridmanager/docs/">Home</a></li>
<li class=nav-header>Documentation</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/doc/installation.html">Installation</a></li>
<li class=nav-header>Examples</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/using-foundation.html">Using Foundation</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/fluid-widths.html">Fluid Widths</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/tut/basic-usage.html">Basic Usage</a></li>
<li class=nav-header>Developers</li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/themeing-with-less.html">Themeing with LESS</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/options-reference.html">Options Reference</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/function-reference.html">Function Reference</a></li>
<li data-order=""><a href="/jQuery-gridmanager/docs/dev/extending-gridmanager.html">Extending Gridmanager</a></li>
<!-- List additional links. It is recommended to add a divider
e.g. <li class=divider></li> first to break up the content. -->
</ul>
</div>
<div id=content class=span10>
<div class=page-header>
<h2>Themeing with LESS
</h2>
</div>
<p>Gridmanager.js comes with three provided themes, a default theme and a light and dark variant. The default theme is the normal <code>js/jquery.gridmanger.css</code> file. To use the dark theme, simply change this link to <code>js/jquery.gridmanager-dark.css</code>. Each theme includes the full CSS core of gridmanager, so you only need to link to a single file.</p>
<h3 id="creating-your-own-theme">Creating your own theme</h3>
<p>There are a few options to styling the look of gridmanager. If you have no experience with LESS css preprocessing (and if you don't, I highly recommend you go and have a play), then you can just override any of the gridmanager css classes in your own style sheet. Whilst this isn't ideal, it will work. However, it makes future updates of the theme more troublesome.</p>
<p>Ideally, you want to leverage the existing LESS files in <code>src/less</code> : </p>
<ul>
<li>start by creating your own .less file: let's call it <code>custom.less</code> and place it in the <code>src/themes/</code> folder</li>
<li>copy and paste the contents of <code>default.less</code> into your <code>custom.less</code> file</li>
<li>override any variables, such as <code>@canvas-color</code> inbetween the <code>@import</code> calls to <code>variables.less</code> and <code>core.less</code>. </li>
<li>look at <code>core/variables.less</code> for a list of all the variables you can set.</li>
</ul>
<p>This is the technique used to create the main gridmanger themes. Just look at <code>src/dark.less</code> as an example.</p>
<p>Once you've created your <code>custom.less</code> file, we need to compile it.</p>
<p>There are a couple of options here too - if your project is already compiling LESS (i.e your own custom version of bootstrap) then you can just <code>@import</code> the less file into your bootstrap.less file. </p>
<p>Alternatively, use any LESS css processor of your choice to output the resultant .css file.</p>
<h3 id="less-variables:">LESS variables:</h3>
<div class="highlight"><pre><code class="language-text" data-lang="text">/* Variables */
@primary: #2fa4e7;
@danger : #CC0000;
@gray : #999;
/* Structure */
@minimum-element-height: 30px;
@row-margin-bottom: 5px;
/* Canvas */
@canvas-color: #fff;
/* Rows */
@row-border-color: @gray;
@row-background-color: none;
@row-tools-background-color: none;
@row-icon-color: darken(@gray, 20%);
@row-icon-color-bg: none;
@row-icon-color-hover: #fff;
@row-icon-color-bg-hover: @primary;
/* Cols */
@col-border-color: @primary;
@col-background-color: none;
@col-tools-background-color: none;
@col-icon-color: darken(@primary, 5%);
@col-icon-color-bg: none;
@col-icon-color-hover: #fff;
@col-icon-color-bg-hover: @primary;
@col-selected-color: @primary;
/* Editable Regions */
@editable-border-color: @danger;
@editable-icon-color: #fff;
/* Icons */
@control-bar-font-size: 14px;
@row-icon-font-size: 15px;
@col-icon-font-size: 14px;
@element-font-size: 10px;
</code></pre></div>
</div>
</div>
<div class=row-fluid>
<div id=footer class=span12>
Documentation for <a href="https://github.com/bruth/jekyll-docs-template">gridmanager.js</a>
</div>
</div>
</div>
<script>
function orderNav() {
var list,
section,
header,
sections = [],
lists = {},
headers = {};
var navUl = document.querySelectorAll('#navigation ul')[0],
navLis = document.querySelectorAll('#navigation ul li');
if (!navUl) return;
for (var i = 0; i < navLis.length; i++) {
var order, li = navLis[i];
if (li.classList.contains('nav-header')) {
section = li.textContent || li.innerText;
sections.push(section);
headers[section] = li;
continue;
}
if (!lists[section]) {
lists[section] = [];
}
order = parseFloat(li.getAttribute('data-order'))
lists[section].push([order, li]);
}
for (var i = 0; i < sections.length; i++) {
section = sections[i];
list = lists[section].sort(function(a, b) {
return a[0] - b[0];
});
if (header = headers[section]) {
navUl.appendChild(header);
}
for (var j = 0; j < list.length; j++) {
navUl.appendChild(list[j][1]);
}
}
}
if (document.querySelectorAll) orderNav();
</script>
</body>
</html>