Commit 59a7fda2 authored by Ate Douma's avatar Ate Douma

TRIVIAL cleanup master

parent 7f543098
/dist
/docs
/node_modules
/target
/tmp
npm-debug.log
\ No newline at end of file
{
"bitwise": true,
"boss": true,
"browser": true,
"curly": true,
"devel": true,
"eqnull": true,
"expr": true,
"globals": {
"angular": true,
"inject": true,
"browser": true,
"by": true,
"element": true,
"xit": true,
"xdescribe": true
},
"immed": true,
"indent": 2,
"jasmine": true,
"jquery": true,
"laxbreak": true,
"loopfunc": true,
"maxlen": false,
"newcap": true,
"noarg": true,
"node": true,
"noempty": true,
"nonew": true,
"strict": true,
"sub": false,
"trailing": true,
"undef": true
}
engine-strict=true
registry=https://registry.npmjs.org
This diff is collapsed.
This diff is collapsed.
Hippo Theme
Copyright 2014-2018 Hippo B.V. (http://www.onehippo.com)
This product includes software developed by:
Hippo B.V., Amsterdam, The Netherlands (http://www.onehippo.com/);
The Apache Software Foundation (http://www.apache.org/).
NOTICE: Only our own original work is licensed under the terms of the
Apache License Version 2.0. The licenses of some libraries might impose
different redistribution or general licensing terms than those stated in the
Apache License. Users and redistributors are hereby requested to verify these
conditions and agree upon them.
Hippo Theme
===========
# This is not the branch you're looking for...
The Hippo theme is a centralised library containing reusable components for Hippo-related projects.
You can use it to create clickable mockups or end-projects that need to be in line with the Hippo styling.
BloomReach only provides the git trees for the release tags of Hippo CMS, as explained on https://www.onehippo.org/about/open-source-release-policy.html
## Development environment setup
#### Prerequisites
To checkout the code for a specific release tag, after cloning this repository, use the following:
* [NodeJS](https://nodejs.org/)
* [Git](http://git-scm.com/)
## to show the available tags
#### Installation
Run the commands below in the project root directory.
git tag
$ npm install
## to checkout a specific tag
## Useful commands
git checkout <tag name>
#### Generate build
The build version is located in the `dist` directory.
## to modify a project
If you want to make modifications to a project, for example to create a patch, create a new fork branch from the specific tag like this:
$ npm run build
git checkout -b forked-<tag name> <tag name>
#### Run tests
The tests need to pass in order to build the demo.
$ npm test
#### Setup server
The browser will show the demo website which shows all available components for the theme.
$ npm start
#### Watch task for the Hippo theme during development
When working on end projects that use Hippo theme, sometimes changes need to be made to Hippo theme
and you want to see the results right away. For this we can use `npm link`.
First create a global link to the Hippo theme
$ npm link
On OSX, you may need super-user privileges to create this link.
Assuming you have a watch task with livereload enabled running in your end project, you can use the
npmlink_watch task to watch the Hippo theme files (running two live-reload watch tasks in parallel is not possible)
$ npm run npmlink_watch
Then in your end project run
$ npm link hippo-theme
When the link is no longer necessary, simply remove it on the project side with
$ npm uninstall hippo-theme
and in your global NPM library with
$ npm unlink
This, too, may require super-user privileges on OSX.
## Deployment to NPM
$ npm publish
# Development
#### Adding icons
To add an icon to the theme and use it in the CMS Java code, perform the following steps:
* Add the .svg file to the src/images/icons folder
* Ensure that there is a copyright header
* Ensure that the icons does have color by setting 'fill="currentColor"' or 'stroke="currentColor"' where applicable
* Add the icon to the demo page
* Add the icon constant to the CMS project's Icon.java (api/src/main/java/org/hippoecm/frontend/skin/Icon.java)
For the latter, also see the **Build from Source** documentation at https://www.onehippo.org/library/development/build-hippo-cms-from-scratch.html
\ No newline at end of file
/*
* Copyright 2015-2018 Hippo B.V. (http://www.onehippo.com)
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
var pkg = require('./package.json');
/*
* This module contains all configuration for the build process.
*/
var buildConfig = {
/*
* The `tmp_dir` folder is where we can store temporary files during compilation
* by for example grunt-usemin. The `dist_dir` is where our src files are output
* as concatenated, minified and otherwise optimized files.
*/
dist_dir: 'dist',
src_dir: 'src',
tmp_dir: 'tmp',
image_dir: 'src/images',
demo_dir: 'demo',
docs_dir: 'docs',
components_dir: 'node_modules',
/*
* This is a collection of patterns.
* These paths are used in the configuration of
* build tasks.
*/
images: 'src/images/**/*.{png,jpg,gif}',
svg: 'src/images/**/*.svg',
js: [
'src/angularjs/**/*.js',
'!src/angularjs/**/*.spec.js'
],
mainjs: 'src/angularjs/main.js',
unit: 'src/angularjs/**/*.spec.js',
tpl: 'src/angularjs/**/*.tpl.html',
sass: [
'src/styles/**/*.scss',
'src/angularjs/**/*.scss'
],
mainstyles: 'src/styles/main.scss',
vendorstyles: 'src/styles/vendor.scss',
jstplModule: 'hippo-theme.templates',
jstplModuleBase: 'src/angularjs/',
jstpl: 'tmp/angularjs/hippo-theme-templates.js'
};
module.exports = buildConfig;
<!--
Copyright 2015-2016 Hippo B.V. (http://www.onehippo.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>AngularJS components
<small>Angular Bootstrap and HippoCMS Angular directives</small>
</h1>
<p>
There is an <a href="docs/">API reference</a> available for the AngularJS components and services that are
part of the Hippo theme.
</p>
<div id="tree" class="panel panel-danger" ng-include="'includes/tree.html'"></div>
<div id="select-box" class="panel panel-danger" ng-include="'includes/select-box.html'"></div>
<div id="blur-on-click" class="panel panel-danger" ng-include="'includes/blur-on-click.html'"></div>
<div id="scroll" class="panel panel-danger" ng-include="'includes/scroll.html'"></div>
<div class="panel panel-danger">
<div class="panel-heading">Angular UI Bootstrap</div>
<div class="panel-body">
<p>To support other Bootstrap JS components use components out of the
<a href="http://angular-ui.github.io/bootstrap/">Angular UI Bootstrap</a> components library.
</p>
</div>
</div>
</div>
</div>
</div>
This diff is collapsed.
This diff is collapsed.
<!--
Copyright 2014-2015 Hippo B.V. (http://www.onehippo.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Grid systems</h1>
<p>Hippo Theme is based on Bootstrap and thus supports the default Bootstrap grid and its breakpoints.</p>
<h3>Short summary of Bootstrap grid options:</h3>
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th class="text-nowrap"># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th class="text-nowrap">Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12">
<h3><em>Flex grid</em> based on the CSS flexbox module</h3>
<p>For a full explanation on flexbox look
<a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">here</a>.
</p>
<p>A pane grid can be used as a 12 column grid with full height columns.
It is also <em>flexible</em>, as it uses a percentage of the viewport to scale the panes.
</p>
<p>
Define the width by the number of columns, just like the bootstrap grid.
For example: <code>.flex-xs-6</code> will span 6 columns (half of the 12 column grid).
</p>
<p>
Offset the columns, just like the bootstrap grid.
For example: <code>.flex-offset-xs-6</code> will offset the element 6 columns to the right.
</p>
<p>Just like the bootstrap theme the grid has breakpoint variations allowing for different layouts per breakpoint.
<code>.flex-xs-*</code>, <code>.flex-sm-*</code>, <code>.flex-md-*</code> and <code>.flex-lg-*</code>
To hide a column from a specific breakpoint, use the class <code>.flex-{breakpoint}-hidden.</code></p>
<p>
The following classes are also available:
<ul>
<li>
To make a flex row with stretched columns:
<code>.flex-row</code>
</li>
<li>
To make a flex column with stretched rows:
<code>.flex-column</code>
</li>
<li>
To make a flex child that does not change dimensions when other childs change or get added:
<code>.solid-child</code>
</li>
<li>
To make a flex child that changes dimensions as other childs change or get added:
<code>.flex-child</code>
</li>
<li>
To fully stretch out a flex child disregarding any other childs:
<code>.flex-full</code>
</li>
<li>
To vertically and horizontally center any content in the flex child:
<code>.flex-center</code>
</li>
</ul>
</p>
<p>Try it out! Resize your viewport and see the below grids change and switch.</p>
</div>
<div class="col-xs-12">
<div class="panel panel-warning">
<div class="panel-heading">Flex grid</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<div class="flex-row" style="height: 300px;">
<div class="flex-xs-4 flex-sm-6 flex-md-2 flex-lg-6 bg-info flex-row">
<div class="flex-xs-6 flex-xs-offset-3 bg-warning"></div>
</div>
<div class="flex-xs-4 flex-sm-hidden flex-md-8 flex-lg-3 bg-success">
<div>These</div>
<div>Are</div>
<div>Normal</div>
<div>Blocks</div>
</div>
<div class="flex-xs-4 flex-sm-6 flex-md-2 flex-lg-3 bg-danger">
</div>
</div>
</div>
<div class="col-sm-6">
<pre>
&lt;div class="flex-row" style="height: 300px;"&gt;
&lt;div class="flex-xs-4 flex-sm-6 flex-md-2 flex-lg-6 bg-info flex-row"&gt;
&lt;div class="flex-xs-8 flex-xs-offset-2 bg-warning"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="flex-xs-4 flex-sm-hidden flex-md-8 flex-lg-3 bg-success"&gt;
&lt;div&gt;These&lt;/div&gt;
&lt;div&gt;Are&lt;/div&gt;
&lt;div&gt;Normal&lt;/div&gt;
&lt;div&gt;Blocks&lt;/div&gt;
&lt;/div&gt;
&lt;div class="flex-xs-4 flex-sm-6 flex-md-2 flex-lg-3 bg-danger"&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Note: Resize the viewport to see the grid change on different viewport widths</p>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Center unknown child</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<div class="flex-center bg-info" style="height: 100px;">
<div class="bg-danger">
<p>This is inside the .center-content div</p>
</div>
</div>
</div>
<div class="col-sm-6">
<pre>
&lt;div class="flex-center bg-info" style="height: 100px;"&gt;
&lt;div class="bg-danger"&gt;
&lt;p&gt;This is inside the .center-content div&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This diff is collapsed.
<!--
Copyright 2015 Hippo B.V. (http://www.onehippo.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="panel-heading">Blur on Click</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<div>
<p>
Firefox and IE keep focusing clicked navbar links that trigger routing. We use the 'a' and 'button' tags directives to
forcibly remove the focus once a link is clicked.
</p>
</div>
</div>
</div>
</div>
<!--
- Copyright 2015 Hippo B.V. (http://www.onehippo.com)
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,