background preloader

Bootstrap pas à pas

Bootstrap pas à pas
7/10/2013 Update: billet mis à jour pour la version 3.0 de Bootstrap Avec la généralisation des technologies JS, CSS3 et HTML5, il est aujourd'hui possible de faire des sites Web qui n'ont rien à envier aux interfaces des logiciels que l'on peut trouver sur nos machines. Le revers de la médaille est une complexité croissante qui nécessite de faire appel à des professionnels . Quand vous devez faire un site personnel ou pour une association, il est difficile, à moins de s'appeler Cresus, de passer par un Web designer. Heureusement des frameworks libres permettent avec un minimum d'investissement et de connaissances de bâtir des sites Web dans les règles de l'art. Nous allons dans ce billet parler du plus médiatique d'entre eux: Bootstrap. Nous allons commencer par créer l'arborescence générale de notre site qui sera stocké, pour illustrer ce billet, dans le répertoire ~/projet de notre disque dur. cd ~/projet git clone <! On obtient: Related:  Logiciels création pages HTML

Twitter Bootstrap et jQuery UI Bootstrap : article sur "Démarrer avec Twitter Bootstrap et jQuery UI Bootstrap" dans la section "jQuery UI, Twitter bootstrap" L’archive de jQuery UI Bootstrap fourni les fichiers javascript et CSS pour démarrer un projet rapidement, mais vous pouvez modifier les composants suivant les besoins. Pour une compatibilité optimale,jQuery UI et Bootstrap ne peuvent pas cohabiter dans leur forme d’origine résultant des conflits au niveau du javascript, et ce, à cause des noms de plugins. Quel solution adopter pour la cohabitation Exclure les éléments qui provoquent des problèmes Lorsque je dis exclusion, je préfère parler de « sélection de composants ou choix des composants », car plusieurs options s’offrent à nous. Identifions les composants javascript Une fois les composants identifiés, on choisit ce que l’on souhaite utiliser. Les composants de jQuery UI Les composants Twitter Bootstrap Avec ce schéma on utilise pleinement les possibilités de jQuery UI mais on aurait très bien pu exclure jQuery UI tooltip afin d’utiliser tooltip + popover de Bootstrap. Installation de jQuery UI Bootstrap <! Contribuer au projet

Les cannabinoïdes et leurs propriétés medicales La plante de cannabis et les phytocannabinoïdes Plante de cannabis Serious 6 Le THC, le CBD, le CBN, le CBC, le CBG et environ 80 autres molécules composent la famille des phyto-cannabinoïdes, que l’on retrouve en quantité variable selon les conditions environnementales, dans la plante de cannabis. Quelques cannabinoïdes sont responsables des principaux effets du cannabis, et certains d’entre eux possèdent d’importantes propriétés médicales, que la communauté scientifique continue de découvrir chaque jour. Certains cannabinoïdes ont notamment des effets antidépresseurs, anti-inflammatoires, anxiolytiques, anti-nausées, alors que d’autres peuvent même aider à protéger le système nerveux. Dans cet article, nous parlerons uniquement des cannabinoïdes naturellement présents dans la plante de cannabis, les phyto-cannabinoïdes. Néanmoins, la recherche médicale nous apprend régulièrement de nouvelles choses surprenantes sur ces cannabinoïdes présents sous forme de traces. Chemotypes du cannabis

Bootstrap 3 Tutorial BlueGriffon, The next-generation Web Editor based on the rendering engine of Firefox Tutoriel : Bootstrap de Twitter : un kit CSS et plus ! Version en ligne Table des matières Bootstrap de Twitter : un kit CSS et plus ! Vous créez des pages web et vous passez beaucoup de temps avec le CSS ? Alors Bootstrap est fait pour vous et ce cours va vous guider dans la découverte de cette puissante boîte à outil. Mais Bootstrap va bien plus loin qu'offrir du code CSS déjà bien organisé et structuré. Vous êtes prêt ? La base indispensable est de bonnes notions en HTML et CSS. Allez on y va ! Mise en route Pour utiliser efficacement Bootstrap vous devez déjà être convaincu de son utilité, vous devez aussi savoir l'installer. Un framework ? Un framework ? Un framework, c'est quoi ? C'est un ensemble de composants structurés qui sert à créer les fondations et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance. Les frameworks CSS sont spécialisés, comme leur nom l'indique, dans les CSS ! Découverte de Bootstrap Découverte de Bootstrap Installation

TinyMCE skin Twitter Bootstrap : article sur "TinyMCE skin Twitter Bootstrap" dans la section "Magix cms, tinyMCE" L’expérience acquise avec Twitter Bootstrap ma permis de créer un skin pour tinyMCE. La difficulté était de prendre en main les CSS du thème par défaut de tinyMCE et d’intégrer Bootstrap sans déstructurer la mise en forme. Installation Télécharger le skinDécompresser l’archiveDéposer le dossier bootstrap dans tinyMCE (tiny_mce/themes/advanced/skin/) Configuration de tinyMCE Aperçu du skin Bootstrap tinyMCE Prochaine version La prochaine étape pour améliorer le skin est la modification des icônes par défaut en me basant sur glyphicons. Les projets qui intègre le skin Bootstrap Le skin est intégré à partir de magix cms 2.4.0 pour un confort optimal et une parfaite intégration avec la nouvelle interface. Voir le projet sur github

Let's get started - with circles Introduction: Creating your own art work is a necessity for most independent developers. Due to the budget restraints or in a lot of cases the complete lack of a budget a lot of young indie game developer can't afford to hire an artist or buy art assets. With the help of free software like gimp, inkscape, truespace, daz studio and vue pioneer (just to mention a few) combined with a basic understanding of art creation pretty much anyone can create impressive and professional looking results. I will try to start with some basic ideas and exercises to improve this kind of understanding. Let me start by clarifying some common believes when it comes to creating game at. "I need expensive software tools to create truly professional game art." "Buying an expensive tool will automatically create better art." "My game is good as it is. Common hurdles High Expectations: One of the main problems facing independent developers are the expectations they have themselves. This concludes the first post.

Tutoriel - Creer un site avec Bootstrap de Twitter Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille. Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non. Afin de profiter pleinement de toutes le joies que peut proposer Bootstrap, il est préférable d'avoir déjà de bonnes connaissances en CSS et une approche plus ou moins familière de JQuery et LESS. Voir la réalisation effectuée avec ce tuto <! <! <!

Firefox 10 : Examiner le code avec les outils pour développeurs Depuis de nombreuses années déjà Firefox est doté d’un extraordinaire module complémentaire qui ne manque pas de quotidiennement simplifier la vie aux nombreux développeurs que le navigateur internet compte dans ses fidèles utilisateurs : Firebug. Initialement créée par Joe Hewitt, cette extension vivait un moment délicat cet été à l’annonce du départ de son contributeur principal John J. Barton qui partait se pencher sur la prochaine génération d’outils pour développeurs de Google Chrome. La fondation Mozilla travaille quant à elle sur un projet visant à offrir ses propres outils à destination des développeurs. Disponible depuis le menu (Examiner), dans le menu contextuel (Examiner l’élément) via un simple clic droit de souris sur la page web ou au travers d’un raccourci clavier, l’inspecteur permet de parcourir les éléments et de facilement accéder au code source associé. Le style CSS est quant à lui affiché dans le volet latéral droit. Baptiste Simon aka TiChou

Débuter avec Bootstrap How to Make Your Site Look Half-Decent in Half an Hour Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional. I am a programmer. I am not a designer. I have a degree in computer science, and I don’t mind Comic Sans. (It looks cheerful. But although I am a programmer, I want to make my sites look attractive. For a very long time after I became a programmer, I was scared of design. But a little while ago, I decided to do my best to hack what it took to make my own projects look vaguely attractive. If I hadn’t figured out some basic design shortcuts, it’s unlikely that a weekend hack of mine would have ended up on page three of the Daily Mail. So, if you are a developer, my Christmas present to you is this: my own collection of hacks that, used rightly, can make your personal programming projects look professional, quickly. One thing to note about these tips, though. With that, on to the tools… 1. 2. 3. 4. Bang:

Jardins félins, association caritative

Related: