csswizardry/CSS-Guidelines Base The Foundation All modules in Pure build on top of Normalize.css. It's our foundational layer to maintain some degree of cross-browser consistency. We use Normalize v1.x because it supports older versions of Internet Explorer. We like Normalize so much that we put it on our CDN. A bit about Normalize.css Normalize.css is an open-source project by Nicolas Gallagher and Jonathan Neal. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. Normalize.css comes with great documentation and a thorough guide explaining how it differs from a traditional reset. Extras In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites. Hiding Elements Add the hidden attribute to an HTML element to hide it from the screen via display: none ! Responsive Images Add the .pure-img class name to an <img> element to make it scale with the viewport. Moving beyond Normalize
Utilisation de Normalize.css pour un développement homogène - hideout-lastation.com La compatibilité du navigateur est une grande partie de l'accessibilité sur le Web. Les développeurs doivent tenir compte de la variance de leur audience et des versions de navigateur qui nécessitent un support . Bien que les réinitialisations CSS sont une option, la plupart des développeurs préfèrent Normalize.css pour sa simplicité et la compatibilité croisée dans tous les navigateurs Web modernes. Dans ce post, je vais couvrir les bases de Normalize et comment il se compare aux réinitialisations CSS générales . Ce n'est pas une bibliothèque compliquée et cela ne devrait pas prendre plus de quelques heures à comprendre. Réinitialisations du navigateur vs. Pendant des années, j'ai utilisé une version personnalisée des réinitialisations CSS d'Eric Meyer. Pensez à Normalize comme un vêtement appliqué systématiquement à tous les navigateurs, et pensez à une réinitialisation CSS comme une détonation thermonucléaire dans tous les navigateurs. Normaliser la configuration Autres ressources
Pragmatic, practical font sizing in CSS One thing I’ve been thinking a lot about lately is how to build sites properly. Not what we have been told is proper, but what actually makes sense for us as developers. I recently spoke at The Digital Barn on exactly this; my talk—Breaking Good Habits—dealt with how we as developers need to solve problems not only for our users and clients, but for ourselves as well. Nicole Sullivan has laid a lot of new foundations for us in her work on OOCSS and her ‘unconventional’ but absolutely spot-on approach to building websites. Double-stranded heading hierarchy Another absolutely stellar nugget of wisdom she’s given us is what I call double-stranded heading hierarchy. For example, if—for whatever reason—we want our h2s in our sidebar to be the same size as a h1, and the h4s in our footer to be the same size as a h3, we might have had some code like this: But now we’d have: Which now gives us: Neat, huh? Extending this? Repetition of font-size, line-height etc declarations. Preset font sizes Addendum
Ce qu'il faut et ne pas faire en CSS : Les balises Si vous voulez vraiment entrer dans les standards Web, vous découvrirez bientôt que la chose la plus importante est le codage. Un code correct, solide et bien structuré. Le HTML, XHTML, les balises, les attributs, la structure...C'est tout ce dont il s'agit réellement. Nous sommes attachés aux termes des standards Web et CSS. La clé des documents conformes aux standards Web est leur structure. La plupart des documents ont différentes sections (navigation, contenu principal, contenu latéral, le droit d'auteur, zone de contact, etc.). La section la plus importante doit être aussi élevée que possible dans le flux, mais l'importance de certaines sections est également définie par la position des balises d'en-tête (h1, h2, h3, h4, h5, h6). Dans le monde des standards Web, on entend souvent parler d'un syntagme "séparant la présentation du contenu". Il existe une multitude de possiblité dans le choix des balises. La validation a son importance dans l'analyse de votre code. À faire
designyourway I used to ignore CSS generators because I thought that there isn’t any use for them. This happened before CSS3 when I didn’t need a generator to create something, however with the gaining popularity that CSS3 had, I had to move towards it and start learning it to adapt to the new standards as most web designers did. These are very interesting tools which can help you a lot when wanting to learn CSS3 faster. Although most people don’t use them like that, instead they use it just to… well, generate CSS code. It’s not a crime to generate CSS code, a lot of people are also using CSS generators because time is really important and these tools save a lot of time. Imagine that there’s a CSS generator for almost everything: border generator, background generator, box generator, gradient generator, shadow generator and the most popular buttons or menu generators. CSS3 generator CSS3 Click Chart css3.me css3maker.com spritebox.net css3pie.com css3menu.com Ultimate CSS Gradient Generator Button Maker
Découvrez d'autres techniques de mise en page - Apprenez à créer votre site web avec HTML5 et CSS3 Aujourd'hui, Flexbox est l'outil de mise en page que je recommande... mais vous devriez toujours connaître les autres techniques de mise en page que je vais vous présenter dans ce chapitre. Plus anciennes, elles ont l'avantage d'être reconnues par les vieilles versions des navigateurs. Enfin, si vous êtes amené à gérer un "vieux" code, vous aurez besoin de connaître ces techniques de positionnement ! Le positionnement flottant Vous vous souvenez de la propriété float ? Il se trouve que cette propriété est aujourd'hui utilisée par la majorité des sites web pour… faire la mise en page ! Reprenons le code HTML structuré que nous avons réalisé il y a quelques chapitres : <! Je rappelle que, sans CSS, la mise en page ressemble à la figure suivante. Nous allons essayer de placer le menu à gauche et le reste du texte à droite. Nous voulons que le menu occupe 150 pixels de large. Voici le résultat à la figure suivante. Il y a deux défauts (mis à part le fait que c'est encore bien moche) : Argh !
CSS3 technology in action: Design examples Ryan Boudreaux highlights some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities. While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3. CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Figure A Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. Figure B Figure C Figure D Figure E Polaroid's with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.
Maîtriser le passage à la ligne des éléments flexibles - CSS : Feuilles de style en cascade Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si flex-direction vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid). Créer des passages à la ligne La valeur initiale de la propriété flex-wrap est nowrap. Les éléments passeront alors à la ligne dans le conteneur. On peut avoir le même effet en colonnes. Le retour à la ligne et flex-direction Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. On notera que l'inversion a uniquement lieu dans le sens de la ligne.