initializr

Trouver ses repères avec HTML5 et choisir son framework

Vous l'avez sans doute remarqué mais ces temps-ci, HTML5 est à la Une et devient désormais l'un des sujets récurrents d'une majorité de blogs dédiés au web design. C'est en parcourant l'un d'entre eux que je suis tombé aujourd'hui sur cet article dans lequel l'auteur recense un certain nombre de ressources utiles sur ce sujet de “presque” avant-garde. Que penser d'un tel afflux d'informations, au passage, très représentatif des nombreux sujets juteux que le net ne cesse de véhiculer depuis quelques années ? Eh bien moi je vous le dis, tout ceci est propice à la confusion ! Ce qui m'a conduit à la petite mise en garde publiée sur Twitter ce matin… 

Attention ne combinez pas #html5shiv http://titifr.im/1b et #Modernizr http://titifr.im/s ils font la même chose (en partie) ! #html5

… pour la simple et bonne raison que j'ai bien failli me faire avoir* ! La mode est aux frameworks, aux packages tous faits avec leur lot d'avantages et d'inconvénients. Il en existe pour les CSS, pour les librairies Javascripts, il en fallait donc un pour HTML dans sa version la plus fraîche :). Pour ma part je me suis arrêté sur l'excellent HTML5RESET* qui se veut lui-même un alternative au jeune mais non moins célèbre Boileplate dont tous deux tirent profit du script magique Modernizr permettant de travailler dès aujourd'hui avec les nouveaux langages du web. 
L'article de speckyboy m'a néanmoins fait découvrir Initializr qui se veut une sorte de Boileplate en kit (on y choisit justement d'exploiter modernizr ou html5shiv) via un outil de composition “online” qui ne laisse aucune place à l'erreur. Plutôt pas mal !

*Dans la version “commentée l'auteur précise que son choix s'est porté sur Modernizr mais présente HTML5 Shiv comme une alternative possible.

Either Modernizr OR the HTML5 Shiv script is required if you want IE compatability, AND you want to use the new, more-semantic HTML5 elements (header, article, footer, etc) 
we’ve only included Modernizr; HTML5 Shiv can be found here: http://html5shiv.googlecode.com

The Beginnings of a Website

I thought I’d post the first steps I use whenever creating a new website.

  1. Create the following folder/file structure, including the libraries I will be using (the ‘public’ directory is usually named 'htdocs’ or 'public_html’ in most webhosts) so this structure may not always be possible if you don’t have full control, this is just what I do:
    • private/
    • public/
      • assets/
        • css/
          • less/
            • main.less
          • main.css
        • fonts/
        • images/
        • js/
          • libs/
          • main.js
      • index.html
  2. Head over to the jQuery website and grab the latest production version of jQuery and put it in the ’/public/assets/js/libs’ directory.
  3. Head to LESS and download the latest 'less.js’ and put it in the ’/public/assets/js/libs’ directory.
  4. Go to Initializr and grab their amazingly written .htaccess file and index.html file, put both of these in the ’/public’ (root) directory.
  5. Insert the following into the <head> section of index.html:
    • <link rel=“stylesheet/less” type=“text/css” href=“assets/css/less/main.less” />
    • <script src=“assets/js/libs/less.js”></script>
  6. Download the latest version of CodeIgniter from their website and place the 'application’ and 'system’ directories inside 'private/’.
  7. Place the index.php from CodeIgniter inside 'public/’, open the file and change the $system_path and $application_folder to read $system_path = ’../private/system’; and $application_folder = ’../private/application’; respectively.  This adds a little bit more security.
  8. Once all is set up, begin creating a design or working on the backend!
Initializr

Existen varias formas de agilizar un proyecto de desarrollo front end. Una de ellas es el uso de un framework, que nos provee varios componentes listos para usar. Otra es modificar una plantilla prediseñada con la mayoría de los elementos que necesitamos, adaptando ligeramente algunos de ellos. Y una tercera alternativa es trabajar sobre una plantilla despojada, que contenga apenas una…

View On WordPress

I love Twitter Bootstrap, and the goodies I use with it.

Twitter Bootstrap could possibly be one of my favorite open source projects out on the web.

What is Twitter Bootstrap? Twitter Bootstrap is a front-end framework for web developers. It includes a 12 column responsive grid, dozens of components, JavaScript components, typography, form controls, a LESS CSS compiler, and great looking glyph icons. Check out Twitter Bootstrap.

Why do I love Twitter Bootstrap? Bootstrap allows me to rapidly prototype a good looking UX with minimal coding. It supports all major browsers back to IE7. It helps me structure my front-end code appropriately. And most of all, it helps me stay on the cutting edge with minimal effort.

-

What goodies do I use?

Initializr. Initializr automatically creates a template for your website using HTML5 Boilerplate, Twitter Bootstrap, and includes nifty things such as Modernizr, Chrome Frame, IE Classes, async jQuery, and 404 pages. Check out Initializr.

Modernizr. Modernizr automatically detects the features of your user’s browser and uses best practices and progressive enhancement to make sure all of your HTML5 and CSS3 markup looks great in every browser. Check out Modernizr.

Font-Awesome. Font-Awesome is a webfont of resizeable icons. There is an icon for just about any occasion or action your user could ever want. Check out Font-Awesome.

Google Web Fonts. Occasionally I will include these on a per project basis. Google Web Fonts allow you to use fancy fonts cross browser and operating systems by just dropping in one line of CSS into your project. Check out Google Web Fonts.

-

Adding RequireJS to the goodie list.

RequireJS, RequireJS allows developers to manage when and what order all of their JavaScript files are loaded in. Completely asynchronous. This is a neat little package I plan on learning in the next couple of months when I get a chance. Not super high on the priority list, but it’s definitely there. Check out RequireJS.