It will help you improve your skills and understand how to start this journey!
This is the layout of the home page made in HTML.
The template is made on the basis of Roots with a modded version by me that is Roots-Haml-Compass-CoffeeScript. This fork have different features and as you can see from the readme that reply also here for the lazy:
- grunt-haml-php – Modded for the last version of MTHAML and fix for the compile #7 and #8 (not in the dependence of packages.json!)
- assetes/sass – SASS folders
- assets/sass/bootstrap – Bootstrap the SASS way (remember to update with the last version (and rename bootstrap.scss in _bootstrap.scss))
- assets/coffee – _main.js file converted in coffeescript
- assets/haml – templates folder files written in HAML
- compass – grunt use compass for compile the SASS files
- Gruntfile.js – modded for the new settings
- lib/scripts.php – added a rule for WP_DEBUG enabled for insert livereload.js in the template
HAML
So let us try disassemble the theme starting with HAML.
I liked Grunt in the making of this template that allowed me to discover how Grunt for Firefox that adds the ability to manage grunt directly from Firefox’s native tools (I spoke little ago).
In the making of this boilerplate I discovered that grunt-haml-php had bugs and compilation issues so I also fixed these problems as #7 and #8, but have not yet been integrated in the basic package then there is the package of grunt already patched.
So for the boilerplate I converted all the files in /templates in HAML.
The main problem is the integration of various tools such as HAML in Netbeans or Kate is hurt then I suffered a little. At the end (in the sense that I had already finished the template), I decided to download and fill out the Atom that supports it (Brackets did not support).
Advantages of HAML
Is an alternative markup to HTML that can avoids the problems of missing close tags and write a well-idented code. In the end there is nothing great but the compiled code is always well-indented and it is easier to read.
SASS
i took the boilerplate, replaced Bootstrap LESS with the SASS official version and adding Compass as compiler.
The library used for the animations is Hover.scss that i’ve slightly modified for the transitions time.
I’ve realized a mixin because the transitions did not have the prefix for the various browser (strange thing but resolved).
The color scheme is based on Makerstrap with a blur touch that i really like (to find the background i had search a lot).
The animation of modal windows is based is based on AvGround that gives a 3D touch.
Advantages of SASS
Coming from the Bootstrap world i like LESS but it was time to move on to something more advanced because LESS.JS don’t allow the expansion of the functions. Mainly the thing i wanted most was Compass that allows to combine the sprites automatically generating the code alone.
A small but great news along with the libraries available.
CoffeeScript
Converted the basic file (which I did not use to this site) I tried and I liked programming with CoffeeScript.
Advantages of CoffeeScript
CoffeeScript is different respect to HAML because, in addition to avoiding the brackets (like in Python), writing a code much less verbose and the code generated is optimized in accordance with the JavaScript best practices (some code example).
An example are the loop that instead of being for are while or == is converted in ===.
For those who want see a comparison between Javascript, jQuery, Coffeescript e Dart there is also in internet.
At the end of this template there is not much JavaScript code so it was not strictly necessary to use CoffeeScript but it was the right time to learn it.
JavaScript
Let’s talk about the libraries used starting from Bootstrap which i have used Affix (for the video in the sidebar) and for the modal window (on the social).
I’ve used Bootbox.js to create the modal windows on the fly, Backstretch.js for the responsive background and FlowType.js to have the text responsive automatically without use rem/em or media queries.
I’ve implemented a carousel from scratch very quickly because the native of Bootstrap scroll only in horyzontal while i needed a vertical system (you can see in home page).
For the easter egg which was found immediately 0.o is different.
In addition to not understand how you found it immediately is made with the canvas and based on this snippet, that I’ve modified for generate on the fly and written in CoffeeScript.
i didn’t think that everyone would have thought to click on various parts of the site instead of opening Firebug on other tools and then trying to debug events on the page. The next time it will be a gesture so i kid you all 😀
If you didn’t find click on the footer.
Plugin
The plugins used for long since are Crayon Syntax Highlighter (for the code in the post), AddThis (with a fix), Disqus, Download Monitor, SZ-Google, WordPress SEO and W3 Total Cache.
The site is thought for the multi language with Ceceppa Multilingua but convert all the old stuff in english is a long job (sorry for my english).
I’ve installed FontAwesome 4 Menu that add the icons of Font Awesome in the menu.
Github Embed is used for add the OEmbed support on the github link.
Promote MDN (the github version is updated) for add the box in the sidebar to promote MDN and insert the links automatically on some web terms.
WP-Xagithub-activity add a widget with the last news on github, that waiting my pull request for some fixes.
For the portfolio I’ve used Aeolus – Creative Portfolio with small modified that I’ve reported here, here and here e here.
Here is the template repo 🙂
https://github.com/Mte90/Mte90-2014
Why the new theme
The site required a better presentation of my works with a better portfolio, multi language support and a presentation of myself.
In addition to the renewal of course 🙂
