Bonjour tout le monde,
Vous lisant depuis quelques temps en sous-marin, ça y est aujourd'hui je me lance
Je vais essayer d'expliquer de façon claire ce qui me questionne!
Voici le contexte:
Je suis étudiante en LP pro et c'est un premier stage en start-up avec l'intégration d'un thème wordpress en se basant sur les fichiers du thèmes "Twenty Fourteen" et moi je modifie le style.CSS de "Twenty Fourteen" pour qu'il s'adapte bien aux contenus insérés.
Voici ma demande:
Je voudrais savoir si mon raisonnement est juste dans un premier temps. Dans un second temps j'aimerai savoir si vous connaissez des ressources, des liens qui me permettrai d'approfondir le sujet.
Le problème:
Intégrer le graphisme et les proportions d'une maquette en gardant le comportement du thème de base pour le Responsive justement.
Mon raisonnement:
Alors le souci c'est que n'ayant pas de méthodologie adéquate, j'ai "cassé" le style d'abord. -->
Je m'explique par exemple un footer avec 4 <li> positionnés en absolute, et bien j'obligeais avec le css un display: inline-block, des width en %, des padding et hop un footer nickel correspondant à la maquette graphique.
Et en plus le tout avec mes propres sélecteurs maisons. C'est-à-dire que je ne reprenais pas la syntaxe du style, pas les classes déjà existantes. (tellement plus facile de mettre des id notamment)
Sauf que non, car en réduisant la taille de l'écran catastrophe, alors que ma collègue m'avait justement dis que le responsive était géré par le thème donc pas de problème.
Voici le raisonnement qui me semble juste:
- utiliser les classes du style parent
- Voire modifier directement quand c'est possible dans les sélecteurs préexistants du fichier style
- Il est possible de créer son style à soi dans de rares cas (des enfants d'enfant d'enfant)
Concrètement:
Html:
Mauvais exemple:
Bon exemple :
Suis-je dans le droit chemin ?
Je vous remercie, ma collègue se désespère de me voir coder rapidemment et correctement (sans vraiment m'aider ...). Apparement c'est relativement facile, et j'ai pourtant deux semaines de retard ...
M'enfin je vais m'en sortir!
Vous lisant depuis quelques temps en sous-marin, ça y est aujourd'hui je me lance
Je vais essayer d'expliquer de façon claire ce qui me questionne!
Voici le contexte:
Je suis étudiante en LP pro et c'est un premier stage en start-up avec l'intégration d'un thème wordpress en se basant sur les fichiers du thèmes "Twenty Fourteen" et moi je modifie le style.CSS de "Twenty Fourteen" pour qu'il s'adapte bien aux contenus insérés.
Voici ma demande:
Je voudrais savoir si mon raisonnement est juste dans un premier temps. Dans un second temps j'aimerai savoir si vous connaissez des ressources, des liens qui me permettrai d'approfondir le sujet.
Le problème:
Intégrer le graphisme et les proportions d'une maquette en gardant le comportement du thème de base pour le Responsive justement.
Mon raisonnement:
Alors le souci c'est que n'ayant pas de méthodologie adéquate, j'ai "cassé" le style d'abord. -->
Je m'explique par exemple un footer avec 4 <li> positionnés en absolute, et bien j'obligeais avec le css un display: inline-block, des width en %, des padding et hop un footer nickel correspondant à la maquette graphique.
Et en plus le tout avec mes propres sélecteurs maisons. C'est-à-dire que je ne reprenais pas la syntaxe du style, pas les classes déjà existantes. (tellement plus facile de mettre des id notamment)
Sauf que non, car en réduisant la taille de l'écran catastrophe, alors que ma collègue m'avait justement dis que le responsive était géré par le thème donc pas de problème.
Voici le raisonnement qui me semble juste:
- utiliser les classes du style parent
- Voire modifier directement quand c'est possible dans les sélecteurs préexistants du fichier style
- Il est possible de créer son style à soi dans de rares cas (des enfants d'enfant d'enfant)
Concrètement:
Html:
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<aside id="text-12" class="widget widget_text">
<h1 class="widget-title">Je, tu, il, nous témoignons</h1>
<div class="textwidget">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
<div>
<p>“Lorem ipsum dolor sit amet,</p>
<p>consectetur adipiscing elit. Ut dictum</p>
<p>quam risus fermentum pellentesque.“</p>
</div>
<div>— Sam Johns</div>
<div><a href="#">Témoignez</a>
</div>
</div>
</aside>
</div>Mauvais exemple:
#text-12 h1 { color: white; }Bon exemple :
#primary-sidebar aside:nth-child(8) .widget-title {color: white; }Suis-je dans le droit chemin ?
Je vous remercie, ma collègue se désespère de me voir coder rapidemment et correctement (sans vraiment m'aider ...). Apparement c'est relativement facile, et j'ai pourtant deux semaines de retard ...
M'enfin je vais m'en sortir!