I'm using to grunt-compile-handlebars part of an email build.
I need to create different color variants of the same template, giving each compiled HTML file an appropriate name and inside a named directory.
For example the text will be a different color in each.
So an example result may be:
|-red
|-red-template.html
|-green
|-green-template.html
|-blue
|-blue-template.html
I can do this manually, but automation would be better. It doesn't look like grunt-compile-handlebars has the capability.
Are there any Grunt plugins that are able to do the job?
Maybe you can have a look to https://www.npmjs.com/package/grunt-file-creator ?
Try using a static site generator like Assemble.io. It breaks parts of your templates into partials, and you can use different colored partials for different templates.
Related
I work on a project where I only have access to the text editor in CMS, so I create HTML files on local and copy the piece of HTML(content area), CSS and scripts to the CMS editor, is there a way I can use maybe node.js and set up something that can build a file with merged CSS and HTML(content are only) every time I make a change to CSS or HTML.
grunt-processhtml was the answer, I was able to combine CSS, chunk of HTML and JS into one file using this.
Within our application we're trying to achieve (html)templating based on themes. For example, if the specified theme is default, we should use the basic templates, but if the theme is 'coolTheme', all templates postfixed with '-coolTheme.html' should be used instead.
We have considered different solutions, but figured there must be a simple/default way to do this. These are the options we came up with:
Gulp task that puts all html files per theme in a {myTheme}-templates.js. When changing the theme angular resets the $templateCache, loads in the theme file and puts the templates in the $templateCache.
Gulp task that copies over all *-.myTheme.html to where the default templates should be (based on given theme parameter). Disadvantages are that you cannot change the theme on the fly.
Intercepting/decorating the $templateRequest, to check in a list/configuration file if the requested file is marked as 'themed', and then change the request to 'theFile-{myTheme}.html' instead
Which is the best way to handle this? And why? Does anyone have the 'perfect' solution for this?
I'm designing few pages in HTML using Jade. I've problem while compiling common areas of the pages. Header, Footer, Navs etc. How do I create a template files and include it the files or how do I create a layout to use in all files?
I'm very new to Jade and couldn't find something related to creating a layout or templates to use.
In PHP for example you create header.php, footer.php and nav.php and include those in the files. One change affects all the other files. How to accomplish something like that in Jade?
P.S. I'm not using Node.js or Express.
You should have a look at the extends function in jade, that will allow you to extend the different files. Like include in php.
http://jade-lang.com/reference/extends/
So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.
I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)
We would like to incorporate multiple themes for the project so we decided upon the following structure:
In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.
So it looks something to the effect of this:
-CSS
- ORANGE [directory]
-> classic.less
-> controls.less
-> classic.less
-> controls.less
Inside the classic.less file in the ORANGE directory we simply insert the directive #import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.
So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.
Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?
There is a more flexible way, but you'll need WinLess (maybe it's doable with something else, I just found this to serve my needs) which requires Windows. There should be something similar for other OS'es if you search.
What I've done is, in the CSS or Stylesheet folder of my project, I've created another one named LessBase. Here I keep the core stylesheets. Example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->etc
Then, in the Stylesheets folder, you'll need additional folders with your individual themes. Building on the previous example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->...
->all.less
-Orange
->color-theme.less
->main.css
-Black
->color-theme.less
->main.css
Please note the all.less file. This one is used to import all the files within the LessBase:
#import "buttons.less";
#import "forms.less";
etc
The color-theme.less will basically hold all of your colors. Inside LessBase, all of your .less files will have variables which will be defined in each of the color-theme.less file residing in the theme folder.
Your color-theme.less file might look like this:
#main_color: #edf123;
#secondary_color: #daa123;
#border_color: #e7e7e7;
.
.
.
#import "../LessBase/all.less"
The import of all.less has to be at the end, in order to have the variables defined.
Then, inside WinLess you will make the color-theme.less compile into the main.css placed in the corresponding theme folder.
Here is a screenshot with an example (I blurred out the sctructure. Also, default_1, default_2 are the theme names, replace them with orange, black or whatever theme name you have):
I got a realtive big project for what I have many plain HTML pages. All the pages have the same template, but when I change one value in the template I have to change all the other pages manually.
Is there a way to do it like less for CSS or CoffeeScript for JS?
Lg Knerd
If all you have are plain HTML pages you could use SSI although it is a bit dated and youll need to be running this on a web server like Apache.
http://en.wikipedia.org/wiki/Server_Side_Includes
Personally I would use php so I could just include the files with the php include function