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.