La partie css de bootstrap

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • La partie css de bootstrap

    Quelques trucs que j ai compris sur bootstrap. Pour ceux qui ne sont pas informaticien, ou qui ont peu de compétences en matière de css.

    La plupart des utilisateurs rajouteront, modifieront ou supprimerons des propriétés css (existantes ou non), ce qui autorise deja un fort degré de personnalisation.

    Bootstrap est de plus en plus utilisé, mais il est très peu personnalisé, ce qui fait que les templates ont un peu tendance a se ressembler.

    Peu de template intègre complètement bootstrap au niveau css. Je l ais remarqué en cherchant à exploiter certains points de la doc officielle. Donc j ai du rajouter ce dont j'avais besoin au fur et a mesure.

    Ce ne sont que des observations, ce post n as pas pour vocation a devenir une copie de la doc officielle de bootstrap.D'ou les aspects tels que la typographie, que je n ais pas abordé.

    Si une erreur s est glissée, merci de me la signaler afin que j'edites ce post.

    sous Joomla 3.0, les fichiers système css de bootstrap se trouvent dans le dossier /media/jui/css.

    EDIT:Le fichier contenant les propriétés bootstrap, dans le template protostar est le fichier css/template.css

    Il yas les fichiers.min.css et les fichiers css.
    Les fichiers.min.css sont des fichiers dont le contenu est identique au fichiers css "standard", mais dont l'affichage est sur une seule ligne et ou touts les caractères inutiles ont été supprimés, ce qui les rends très dur à lire. Si vous devez effectuer des modifications, modifiez le fichier css correspondant et ensuite minifiez le avec un site tel que celui ci: http://www.minifycss.com/css-compressor/, et ensuite remplacez le fichier .min.css.

    Pour la typographie, suivez ce lien :http://twitter.github.com/bootstrap/base-css.html C'est la doc officielle. Memes les non anglophones peuvent la comprendre, car pour chaque propriété, il y ass un exemple.
    Pour ma part, c est mon document de référence. Ces typographies peuvent directement être utilisées dans vos articles , a condition d'utiliser l'editeur codemirror ou non wysiwyg.

    Au niveau du positionnement:
    si on met une balise <jdoc:include> dans un conteneur <div="row"> , il est possible de positionner plusieurs modules de manière horizontale. Pour cela, il faut ajouter " spann" (n étant le nombre de "colonnes" que le module doit occuper) comme suffixe de module et bootstrap s'occupe tout seul du positionnement. Le premier module dans l'ordre d'affichage est à gauche. Et cela permet d'ajuster la largeur de chaque module indépendament.

    Cela simplifies la creation des template, car on as besoin d'une seule position par rangée, alors qu'avant, si on voulais 3 colonnes, il fallait 3 positions differentes.

    La classe offset:
    Cette classe permet de décaler le module en laissant un espace vide.
    Si on souhaite un module de 4 colonnes de large a gauche et un autre module de 4 colonnes completement à droite, il suffit d ajouter les suffixes de classe de module suivant:
    1er module:" span4", et pour le second " span4 offset4".


    Les classes .visible-desktop , .visible-tablet, .visible_phone, .hidden-desktop, .hidden-tablet, .hidden-phone:

    Ces classes correspondent à des intervalles de résolution. Ce sont aussi des suffixes de classe de module.
    Elles servent à afficher ou cacher des modules en fonction de la résolution de l'écran du visiteur.
    Elles sont utiles pour simplifier la mise en page pour les ecrans de faible résolution (smartphone).

    desktop signifies une résolution > à 1024px
    tablet signifies une résolution entre 768px et 1024
    mobile signifies une résolution inférieure a 768px

    .visible-desktop signfies que le module serat visible uniquement si la resolution de l'ecran du visiteur as une résolution > à 1024px. Le module n'apparaitras pas si la resolution est inférieure à 1024px
    .hidden-desktop signifies que le module serat invisible si la résolution est > à 1024px et visible pour les mobiles et tablets.

    Les boutons s'appliquent principalement aux liens, les labels et badges aux balises <span>.

    Les sélécteurs css standard sont des balises sémantiques qui correspondent à des actions. Il n y as aucun sélécteur qui est la pour la présentation.
    J'ai eu besoin de creer une classe social, pour indiquer que les liens pointent vers des réseaux sociaux.
    Dans le fichier bootstrap.min.css, j ai ajouté les lignes ci dessous dans le fichier bootstrap.css pour les boutons:
    .btn-social:hover,
    .btn-social:active,
    .btn-social.active,
    .btn-social.disabled,
    .btn-social[disabled] {
    color: #C461BB;
    background-color: #C461BB;
    *background-color: #C461BB;
    }
    .btn-social:active,
    .btn-social.active {
    background-color: #EF15DB \9;
    }
    Dans mon article ou ma surcharge, je m'en sert comme ceci <a class="btn btn-social" href="#">mon texte</a>

    Pour agrandir, ou rétrecir la taille d'un bouton, il faut utiliser les classes suivante: btn-mini, btn-small ou btn-large.
    Pour empiler les boutons les uns sur les autres, il faut utiliser la classe btn-block.
    pour mettre une balise ou un sélécteur completement à droite, il faut utiliser la classe pull-right.

    Pour les labels , les bages, le principe est le meme. Vous pouvez creer vos propres schemas de couleurs.
    un autre exemple de personnalisation:
    Vous pouvez creer uniquement un label, ou un badge.
    La classe ci dessous correspond aux labels suivi d'un lien
    .label-blue[href],
    .badge-blue[href] {
    background-color: #7ABCC4;
    }
    .label-blue,
    .badge-blue {
    background-color: #15D7EF;
    }
    Pur utiliser cette classe ,j'entre ceci dans mon article ou ma surcharge <span class="label label-blue"> mon texte </span> .

    Dans les fichiers css vous pouvez voir des lignes comme celles ci:
    Traduction en francais du selecteur css:
    .nav .active a > [class^="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe qui ne contient pas icon-.

    .nav .active a > [class*="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe dont le nom contient icon- suivi de nimporte quelle suite de caractéres, autrement dit toutes les icones.

    Je ferais un autre sujet sur la personnalisation des icones .

    en esperant que cela soit utile.
    Dernière édition par lefabdu51 à 09/10/2012, 14h23 Raison: ajout de précisions

  • #2
    Re : La partie css de bootstrap

    Pas mal ton sujet sur les CSS de Bootstrap.

    sous Joomla 3.0, les fichiers css de bootstrap se trouvent dans le dossier /media/jui/css
    Les fichiers que l'on utilise sont ceux qui sont dans le dossier du template, isis pour l'admin ou protostar pour le client

    desktop signifies une résolution > à 1024px
    tablet signifies une résolution entre 768px et 1024
    mobile signifies une résolution inférieure a 768px
    Bootstrap a un 4ème niveau pour les écrans larges > 1200px

    On ne peut pas comprendre Bootstrap si on ne le regarde pas au travers de LESS
    Le principe de personnalisation est le suivant, je me base sur protostar mais c'est quasi-universel :

    1 / on modifie le fichier less/variables.less qui contient la définition des couleurs, polices, etc utilisées par le template.
    Les noms sont suffisamment explicites pour identifier leur utilisation. A ce niveau, la seule chose à savoir en LESS est qu'un nom de variable commence par @. exemple .monTexte {@rouge:#FFFF00; color:@rouge} veut dire que l'on affecte la valeur #FFFF00 à la variable @rouge puis que l'on utilise cette variable pour la propriété color.

    2/ on modifie ou on ajoute des règles CSS au fichier less/template.less.
    Vous remarquerez que ce fichier commence par des imports des fichiers less de bootstrap. Lesquels fichiers sont situés dans ce fameux dossier media/ui
    @import "../../../media/jui/less/reset.less";

    3/ on utilise un programme comme Crunch pour compiler le fichier less/template.less afin d'obtenir le fichier css/template.css
    Je mets ci-dessous une copie d'écran que j'avais faite pour un topic publié sur Joomla-support.fr où l'on taquine pas mal le bootstrap actuellement
    Cliquez sur l'image pour l'afficher en taille normale

Nom : crunch.jpg 
Affichages : 1 
Taille : 66,8 Ko 
ID : 1802146

    Voilà c'était juste quelques petites précisions, et encore bravo pour ton initiative
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Re : La partie css de bootstrap

      merci pour les precisions... mais la doc officielle n indiques que les 3 que j ai indiqué.

      Secundo, les non informaticiens se contenteront d ajouter ou de modifier les css existante, ils n utiliseront pas less.

      Pour ma part, je ne me sert de less que quand j ai des calculs a faire, du genre @marge-b = 2 * @marge-a ...
      Il est à résérver à ceux qui ont de fortes compétences en html et css. il est très facile de se perdre dans les imbrications de régles css.. il faut faire attention quand on l'utilise.

      la documentation officielle de less: http://lesscss.org/
      Dernière édition par lefabdu51 à 09/10/2012, 14h31

      Commentaire


      • #4
        Re : La partie css de bootstrap

        mais la doc officielle n indiques que les 3 que j ai indiqué.
        Mais le fichier CSS gère les 4 !
        C'était juste pour expliquer pourquoi la largeur est plus grande sur un grand écran

        Il est à réserver à ceux qui ont de fortes compétences en html et css. il est très facile de se perdre dans les imbrications de régles css.
        Pas du tout, si on se contente de modifier les couleurs en utilisant les variables définies dans le fichier variables.less.
        Un exemple: c'est quand même plus facile de changer la couleur des liens en changeant la valeur de la variable @linkColor que de trouver les 15 règles où elle est utilisée. Je ne parle même pas d'un changement de taille, hauteur de la navbar par exemple, où il faudra non seulement modifier sa hauteur, mais recalculer à la main toutes les hauteurs dérivées
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Re : La partie css de bootstrap

          Vu sous cet angle....c est vrai que cela peut être plus simple.

          Commentaire


          • #6
            Re : La partie css de bootstrap

            Envoyé par lomart Voir le message
            Pas mal ton sujet sur les CSS de Bootstrap.


            Les fichiers que l'on utilise sont ceux qui sont dans le dossier du template, isis pour l'admin ou protostar pour le client


            Bootstrap a un 4ème niveau pour les écrans larges > 1200px

            On ne peut pas comprendre Bootstrap si on ne le regarde pas au travers de LESS
            Le principe de personnalisation est le suivant, je me base sur protostar mais c'est quasi-universel :

            1 / on modifie le fichier less/variables.less qui contient la définition des couleurs, polices, etc utilisées par le template.
            Les noms sont suffisamment explicites pour identifier leur utilisation. A ce niveau, la seule chose à savoir en LESS est qu'un nom de variable commence par @. exemple .monTexte {@rouge:#FFFF00; color:@rouge} veut dire que l'on affecte la valeur #FFFF00 à la variable @rouge puis que l'on utilise cette variable pour la propriété color.

            2/ on modifie ou on ajoute des règles CSS au fichier less/template.less.
            Vous remarquerez que ce fichier commence par des imports des fichiers less de bootstrap. Lesquels fichiers sont situés dans ce fameux dossier media/ui
            @import "../../../media/jui/less/reset.less";

            3/ on utilise un programme comme Crunch pour compiler le fichier less/template.less afin d'obtenir le fichier css/template.css
            Je mets ci-dessous une copie d'écran que j'avais faite pour un topic publié sur Joomla-support.fr où l'on taquine pas mal le bootstrap actuellement
            [ATTACH=CONFIG]22710[/ATTACH]

            Voilà c'était juste quelques petites précisions, et encore bravo pour ton initiative
            Bonjour,

            je suis en train de découvrir le templating joomla 3 via le template protostar. Du coup étant déjà utilisateur de less (avec joomla 2.5), j'utilise lessphp, qui permet de compiler le less au chargement de la page. Je trouve cela plus pratique en dev, qu'une compilation extérieure. Il suffit ensuite de la désactiver en prod.

            Lessphp : http://leafo.net/lessphp/ pour l'intégrer à l'arbo de votre template.

            Et du coup il suffit d'intégrer ceci en haut du index.php :
            Code:
            // Compilation du less
            $path_dir = $_SERVER['DOCUMENT_ROOT'].$this->baseurl.'/templates/'.$this->template;
            require $path_dir.'/lessphp/lessc.inc.php';
            
            try {
            	lessc::ccompile($path_dir.'/less/template.less', $path_dir.'/css/template.css');
            } catch (exception $ex) {
            	exit('lessc fatal error:
                 '.$ex->getMessage());
            }
            // Fin compilation du less
            Voilà c'est une position purement personnelle, mais je me dis que si d'autre comme moi sont en train de se mettre en route sur le sujet, ça leur fera une alternative...

            En tout cas merci, cette discussion m'a débloqué (pour moi less était forcement compilé qqpart automatiquement dans joomla 3).
            ProximCré@tion

            Commentaire


            • #7
              Re : La partie css de bootstrap

              j'utilise lessphp, qui permet de compiler le less au chargement de la page. Je trouve cela plus pratique en dev, qu'une compilation extérieure. Il suffit ensuite de la désactiver en prod.
              Entièrement d'accord avec toi.
              Par contre attention à la précision des calculs qui ne sont pas suffisant avec lessphp. Il est donc préférable de compiler la base (template.css) avec crunch et la personnalisation (perso.css par exemple) avec lessphp.

              Plutôt que de modifier l'index.php, on peut utiliser ce plugin avec les mêmes réserves concernant lessphp:
              UP, le plugin universel à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                Re : La partie css de bootstrap

                Bonjour,

                Merci pour les précisions, je travail sur joomla 2.5, et je viens de travailler une template et je vais travailler avec bootstrap pour la partie intégration, mais, chui encore débutante et j'ai pas beaucoup de temps que je l'ai découvert (bootstrap) , et j'ai pas bien compris comment ca fonctionne, et les documentations sont en anglais, et ou je vais les configurer les fichiers css, maintenant quand je démarre l'intégration vers le html, et puis dans la partie de l'intégration vers un template joomla??

                Merci d'avance

                Commentaire


                • #9
                  Re : La partie css de bootstrap

                  la plupart des modifs vont être a faire sur le fichier index.php de ton template. Et pour certaines fonctionnalités, une surcharge de module est nécéssaire.
                  Ceci pour integrer le html5 a ton template.

                  bootsrap sert a gerer l'aspect responsif (adaptation ala resolution du client) d'un template.
                  chaque zone est une ligne que tu decoupes en 12.
                  LA balise span sert a definir la largeur d un module. ( 4 span3 , 1 span12)
                  et c est grace a ce marquage que ton template s adapteras aux smartphones.

                  Pour activer bootstrap, il faut inserer une instruction ds l entete de ton template.
                  (j edites et je continues demain)

                  Commentaire


                  • #10
                    Re : La partie css de bootstrap

                    Bonjour lefabdu51,

                    merci pour ta répense,

                    Comment démarrer avec bootstrap, j'ai lu un peu de documentations, mais j'ai pas compris ou je fais le code, et il ne travail que sur le serveur local, Quel est son principe!!!!

                    Merci une autre fois

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X