Square is a template you can find on themeforest for 19$ for a single site and for a non profit website. It contains angular, twitter bootstrap and other package already configured to make your project quickly operational.
This post is detailing some way to use it. You won’t find everything but the points I had to search longer before finding a solution. Hope it will help
Start a project with square
- Copy the sqare directory to your project
# mkdir ~/Sites # cp -R ~/Download/square-v1.4/square .
- Install dependencies
# npm install # npm install grunt # npm install bower # bower install
- fire
# grunt server
At this point you should get Square working
Modify square to add a new page
The first thing you can do to add a new page is to create a new entry in the main menu, this can be done by opening client/views/nav.html and add a new entry like this :
<li><a href="#/store"> <i class="fa fa-dashboard"></i> <span data-i18n="store"></span> </a></li> <li><a href="#/dashboard"> ...
This create a store entry on the left column identified by the /store url
Now, we have to route this url to a new html file ; this is done by editing the client/scripts/app.coffee file to add the route
.config([ '$routeProvider' ($routeProvider) -> $routeProvider # store .when( '/store' templateUrl: 'views/store.html' ) # dashboard .when(...
Don’t forget to create a new file corresponding : client/views/store.html
<div class="page">
<section class="panel panel-default">
<div class="panel-heading">
<strong><span class="glyphicon glyphicon-th"></span> Store Page</strong>
</div>
<div class="panel-body">
<p>Content goes here</p>
</div>
</section>
</div>
The server have to be relaunched after a such modification
# grunt server
Now you can test and see your new blank page.
Make this new page a full screen page (like the signin page exemple)
To create a full screen page, you have to do some customizations in the scripts:
In client/scripts/shared/directives.coffee file you have some url where ‘body-special’ class is injected by script in the main <body> tag. You must add your url in the list to make is full screen
# add certain class based on path
switch path
when '/' then $element.addClass('body-home')
when '/404', [...], '/stores' then $element.addClass('body-special')
when '/pages/lock-screen' then $element.addClass('body-special body-lock')
when '/tasks' then $element.addClass('body-tasks')
Start the server
There is two way to start the server, in a development mode you just run
# grunt server
Eventually you have to add –force if you have no X client
The second way to start it is in a production mode. In this mode all the files are minified. the livereload.js script is also removed.
#grunt server:dist
As a side remark, I had some difficulties due to livereload : as this service is using a specific port like 35728, it was not working over my corporate firewall & proxy. This make my page to load really slowly waiting for timeout. I did not find how to remove livereload in a clean way but server:dist start saved me.