Archives de
Étiquette : CSS

Ten tips for organizing your css code

Ten tips for organizing your css code

Commentaires 0 Commentaire

1. Insert the CSS reset One of the biggest challenges when developing a website is cross-browser compatibility. The CSS reset is a style sheet that greatly reduces these incompatibility errors by providing a general style that is defined but easily customisable. Normalize.css is a modern and quite precise reset based on HTML 5. https://necolas.github.io/normalize.css/ You should insert the style sheet for this CSS reset in the <head> section, before your style definitions. 2. Organise the elements To be able to…

Lire la suite Lire la suite

Less, CSS pre-processor

Less, CSS pre-processor

Commentaires 0 Commentaire

We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way. Luckily, the web development community has solved this problem. We now have…

Lire la suite Lire la suite

METHODOLOGIE BEM-CSS

METHODOLOGIE BEM-CSS

Commentaires 0 Commentaire

BEM is a highly useful, powerful, and easy naming convention for CSS class names that makes your front-end code less complicated to examine and understand, less complicated to work with, less complicated to scale, extra strong, explicit, and extra strict. A BEM class name includes up to three parts: [BLOCKS]__[ELEMENTS]–[MODIFIERS] [BLOCKS]= .block{} The first element of the component is defined as the block and  represents the highest level of an abstraction or component. The most common blocks are : <header>, <aside>,…

Lire la suite Lire la suite

Selectors in CSS

Selectors in CSS

Commentaires 0 Commentaire

What are CSS selectors? A CSS selector is used as a way to target elements in our DOM (Document Object Model) and apply a certain style to it. Basically, what we are doing is defining the style we want to use and then applying a « filter » that target specified items. In order to do that, we are going to use this structure: There are many selectors in CSS, we’ll talk about them later on. The style we apply can target…

Lire la suite Lire la suite

The initial of Cascading CSS ( @layer CSS )

The initial of Cascading CSS ( @layer CSS )

Commentaires 0 Commentaire

Introduction Cascade Layers One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved. That the main reason why we have to carefully think about how we organize the CSS code. Currently, CSS layering has to be achieved with careful management of selector-specificity, or over-use of !important flags – both…

Lire la suite Lire la suite

CSS Grid

CSS Grid

Commentaires 0 Commentaire

What’s CSS Grid? The CSS Grid Layout is a two-dimensional grid-based layout system based on both columns and rows. Thanks to this feature, Grid is the most powerful layout system currently available in CSS, even more than the CSS Flexbox layout which a one-dimensional system. How to use it? Grid / Inline To get started, you have to create an html file where you define all your containers. I’ll let you do it without any clues because I know you…

Lire la suite Lire la suite

Sass (ou le css compilé)

Sass (ou le css compilé)

Commentaires 0 Commentaire

Lors de gros projets web, nous avons beaucoup de fichiers css. Le SASS est une alternative, un moyen pour « simplifier » notre css, pour n’avoir a coder qu’une seule fois. Techniquement, a quoi ça sert ? le sass est un langage de programmation basé sur le css. Avec sass, vous pouvez créer autant de feuilles de style que vous le voudrez. Toutes ces pages seront ensuite compilée par la suite pour générer un seul et unique fichier CSS (gain de temps)….

Lire la suite Lire la suite

La propriété position en CSS (Cascading Style Sheets)

La propriété position en CSS (Cascading Style Sheets)

Commentaires 0 Commentaire

La propriété position en CSS permet de positionner les éléments différemment du cours normal du document. Il existe 5 principaux types de positionnement différents :1/ Static2/ Relative3/ Absolute4/ Fixed5/ Sticky 1/ StaticIl s’agit de la valeur par défaut. L’élément suivra le cours normal du document. Ici le second carré est positionné en « static ». 2/ RelativeIl s’agit d’un positionnement assez proche du « static« . L’élément est positionné tout d’abord dans le cours normal du document. Par la suite, il est possible de…

Lire la suite Lire la suite

Logo Bootstrap
BOOTSTRAP

BOOTSTRAP

Commentaires 0 Commentaire

« Build fast, responsive sites with Bootstrap » Voila la proposition de Bootstrap  » Créer rapidement des sites responsives ! » Si je veux faire cette exemple : Je vais devoir coder beaucoup beaucoup de CSS, pour que le titre soit centré avec un fond qui prend toute la page. Avoir trois containers alignés avec leur texte et surtout que ces trois containers passent l’un en dessous de l’autre à partir d’une taille d’écran plus petite… Boostrap va me permettre de faire cela…

Lire la suite Lire la suite