28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

j'en avais déjà entendu parler, mais je viens d'examiner le bootstrap de twitter (framework css) et je trouve ça très puissant et novateur.
L'idée était logique puisqu'on répète toujours plus ou moins les mêmes structures lorsque l'on code des sites web, donc autant le normaliser un peu.

Je cherche des tutoriels, ou des exemples de sites complets (autres que des bouts de codes) pour voir dans quelle mesure ce système peut il être personnalisé.

merci
Modifié par lionel_css3 (31 Aug 2012 - 21:48)
Administrateur
Bonsoir,

Twitter boostrap est sans doute le plus évolué et le plus moderne des frameworks CSS : il est puissant et modulable.

L'inconvénient que je lui trouve (ainsi qu'à ses confrères), est d'être une grosse usine à gaz : tout est prévu pour s'adapter à tous les projets du mondes. En clair, on va utiliser 10% de l'outil et les 90% restants seront chargés pour rien.

A l'heure où les performances web deviennent de plus en plus prises en compte, le moindre octet chargé inutilement est important...
Modérateur
Bonsoir !

On peut tout de même personnaliser les fonctions CSS et js à intégrer ! Je pense également qu'il est trop lourd d'avoir les fichiers au grand complet mais un simple petit tour par la case customize et ensuite une petite revue du css permet de l'utiliser au mieux je pense !

Je l'utilise de plus en plus pour les boutons, formulaires, slider etc Smiley smile
on peu aussi juste piocher les bout de codes qui nous intéressent (genre juste le style du bouton)
Modifié par _laurent (01 Sep 2012 - 01:58)
bon apparemment, ça démarre mal pour moi avec le bootstrap Smiley smile

j'ai fais un petit essai avec le html suivant


<body>

<div class="navbar navbar-fixed-top navbar-inverse">  
  <div class="navbar-inner">  
    <div class="container">  
    <ul class="nav">  
      <li class="active">  
      <a class="brand" href="#">Accueil</a>  
      </li>  
      <li><a href="#">Log-out</a></li>  
      <li><a href="#">Concerts</a></li>  
      <li><a href="#">Saisir Concerts</a></li>  
      <li><a href="#">Slider</a></li>  
      <li><a href="#">Saisir Slider</a></li>  
    </ul> 
    </div>  
  </div>  
</div>
 

<div class="container">
<div class="hero-unit">
<h1>Liste des concerts</h1>
<p>vous êtes connecté en tant que :  xxxx</p>
</div>

<div class="row">
<div class="span4"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptd ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p></div> 

<div class="span8"><p>sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas.</p></div> 
</div>

<div class="row">
<ul class="thumbnails">
    <li class="span4">
    <div class="thumbnail">
    <img src="img/rocksane-generique1.jpg" width="300" height="200">
    <p>Thumbnail caption...</p>
    </div>
    </li>
    <li class="span8">
    <div class="thumbnail">
    <img src="img/rocksane-generique2.jpg" width="605" height="300">
    <p>Thumbnail caption...</p>
    </div>
    </li>
</ul>
</div>

<div class="row">
<div class="span12">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<div class="span12">
<p>em quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo volupta</p>
</div>
</div>
<!-- fin container --></div>

</body>



et je me retrouve avec alignement un peu roots.. du texte par rapport aux images...
(j'ai mis un outline en pointillé autour du .container pour le matérialiser)

j'ai oublié un truc???

upload/40948-boootstrap.jpg
Modifié par lionel_css3 (01 Sep 2012 - 20:33)
le problème venait que j'utilisais un <ul class="thumbnails"> pour les images, en utilisant un <div class="span4">, ça s'aligne un peu mieux...

par contre je me pose des questions sur l'adhésion aux standards du web.

Par exemple ça (avec Bootstrap):


<div class="input">
   <input type="text" />
</div>


ça fait une div pour rien puisqu'elle ne contient que le input...non?
Tout à fait, du coup autant la supprimer non ? :
<input class="input" type="text" />

Je n'ai utilisé bootstrap qu'une fois il y a des mois, mais il me semble bien que ça fonctionne.
Yo,

Twitter Bootstrap semble en effet être le framework le plus aboutis actuellement comme le dit Raphael Goetter. Mais je le rejoins aussi sur le fait qu'il s'agit là d'un outil à utiliser en connaissance de cause, à la fois pour des raisons de maintenance mais aussi pour les perfs front-office.

Je pense que ça peut pas mal dépanner dans le cas d'une équipe sans intégrateur web ou quand l'intégrateur est trop occupé pour un projet. On peut aussi y voir un intérêt pour un back-office ou éventuellement dans l'élaboration d'un CMS permettant aux utilisateurs de générer et déplacer des blocs où ils le souhaitent, le système de grid étant pas mal adapté.

En revanche, quand il s'agit de concevoir proprement et de manière optimisée une interface web, j'aurais tendance à le déconseiller très vivement. Il sera en ce cas préférable de faire appel à un intégrateur senior possédant une méthode de travail propre avec comme philosophie la bonne maintenabilité du code et l'optim front-office.

Toutes les ressources sont ici, la doc est plutôt pas mal fichue :
http://twitter.github.com/bootstrap
Modifié par Nigel (09 Nov 2012 - 17:24)