By now I assume that everybody has had a little play with the SDL Tridion Reference Implementation, which meansÂ the questions are rising for sure. So let me start with spilling some of the guts of the HTML design and how that is build when you publish.
To start off, the HTML design is a responsive HTML5 design builtÂ Bootstrap, this means that you can adjust it to your own likings following the Bootstrap methodology. This includes building the HTML design with Node.js and Grunt, but let’s start off simple.
Whitelabel HTML design
The whitelabel HTML design delivered with the reference implementation can be found in the package you downloaded from SDL Tridion World. Inside the zip file, you can find it in the folderÂ
\html\whitelabel, if you rather want to view it directly in your web browser, you can see it atÂ http://bkoopman.github.io/tri/.
The sources for this website are also available inside the zip file you downloaded from SDL Tridion World, just take a look in the folderÂ
\html\design, I’ll come back to these later.
Skinning the HTML design
To quickly skin the HTML design, you can use the Component HTML Design Configuration inÂ
100 Master\Building Blocks\Settings\Core\Site Manager\. In here you can set the favicon you want your site to have, and modify the design by supplying a few simple CSS values in the Bootstrap Configuration Component (if you want to go a bit further, and you have an understanding of Less, you can directly add that also).
After changingÂ anything in theÂ HTML Design Configuration or the Bootstrap Configuration Component, you should update the version number in theÂ HTML Design ConfigurationÂ Component (just increment it by 0.01) and publish the Publish HTML Design Page (which can be found inÂ
/admin/refresh, or recycle the application pool.
Modifying the HTML design
If the simple skinning isn’t enough for you and you have an understanding of Bootstrap, you have everything you need to completely modify the HTML design to your likings. You can start from the HTML Design Component inÂ
100 Master\Building Blocks\Modules\Core\Admin\, this contains all the sources, including a
Gruntfile.js. Mind you, these files are configured specifically for the Publisher service to build the HTML design, focussing only on the assets.
Note: if by now you have completely lost what I am talking about, you can stop reading here. I’m assuming you will have an understanding of Bootstrap, Node.js and Grunt from here onwards.
As mentioned the HTML design sources are also availableÂ inside the zip file you downloaded from SDL Tridion World, just take a look in the folderÂ
Gruntfile.js added here are configured for a regular build, including the posibility to serve the build HTML files directly to your browser. The sources included are the same, it is only the build configuration which differs slightly.
Details about how to build the HTML design can be found here http://bkoopman.github.io/tri/build.html.
If you have made changes to the sources from the SDL Tridion World package, you can upload these to the CMS by simply zipping up the
src directory (including the
bower_components folder) and then add the
Gruntfile.jsÂ from the original
html-design.zip in the CMS (to assure the build from the Publisher is as minimal as possible). You canÂ make the zipfile a bit smaller if you use theÂ
node_modulesÂ directory from the original
html-design.zip, this would be preferred. Then simply replace the existingÂ
html-design.zipÂ with your new one, increase the version number as explained above and republish.
This should give you enough information to start creating cool looking designs for your reference implementation based websites, and of course as always, feel free to leave a comment or ask detailed questions about the reference implementation and its HTMLÂ design on http://tridion.stackexchange.com.