It will help you to improve your skills or how to understand how to start this journey!
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
So let us try disassemble the theme starting with HAML.
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.
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.
Converted the basic file (which I did not use to this site) I tried and I liked programming with CoffeeScript.
Advantages of CoffeeScript
An example are the loop that instead of being for are while or == is converted in ===.
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.
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.
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.
Here is the template repo 🙂
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 🙂