bootstrap

"Le Moteur De Recherche", a website to promote a documentary of the french television program canal plus called Made in France, has just been released.

It is a fun search engine which allows you to enter a query and get its french "equivalent". For example "Quentin Tarantino" gives "Michel Audiard" - with multimédia assets and a page of results.

I was in charge of the development with Anthony Pigeot, and the project was driven by Bigger Than Fiction.

Technically, we used node js with express and mongo db on the server, bootstrap, less, jade, javascript on the client side, and made some scrapping to grab images and descriptions.

Try it, it's fun ! http://www.canalplus.fr/moteurderecherche

The other day, I stumbled upon this question on stackoverflow on how to cleanly customize Bootstrap :

http://stackoverflow.com/questions/8596794/customizing-bootstrap-css-tem...

That pushed me to put this workflow on github :

https://github.com/jide/bootstrap-boilerplate

Clone the repository, and you're good to go and customize the variables, mixins and classes of bootstrap while keeping it intact in its own subdirectory. This will allow easy update and keep everything clean.

Under the hood, I created a Grunt task that automatically copy the variables.less file from bootstrap into your less folder while modifying the font path to be correct. This will be done on your first launch of Grunt.

But there is also a default variables.less file in case you don't want to use grunt.

On webkit browsers on mac, font smoothing is kind of too bold. The known hack for this is to use :

html {
-webkit-font-smoothing: antialiased;
}

But this won't work on form elements such as inputs and also on elements having "-webkit-appearance" set to a similar value. So :

html, input, textarea, select, button {
-webkit-font-smoothing: antialiased;
}

And voilà !

Syndicate content