Automatisez: sélecteurs nth-child avec Family.scss Mixins - hideout-lastation.com
 hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs

Automatisez: sélecteurs nth-child avec Family.scss Mixins

Sass est le meilleur moyen de gérer les bibliothèques CSS modernes et mixin peut économiser encore plus de temps au cours du cycle de développement.

Ces mixins fonctionnent comme des codes automatisés ou des fonctions que vous appelez dans vos fichiers Sass principaux. Certains mixins sont plus généraux tandis que d'autres sont très spécifiques comme la bibliothèque Family.scss .

Cette librairie gratuite propose 26 mixins pour exécuter des sélecteurs complexes :nth-child sans mémoriser tout ce code.

La plupart des développeurs connaissent le sélecteur :nth-child et par défaut, ce n'est certainement pas compliqué. Vous passez simplement un sélecteur numérique, par exemple :nth-child(2) où les règles de style d'appartenance s'appliquent à chaque deuxième enfant de l'élément parent.

Cependant, cela peut devenir beaucoup plus complexe lorsque vous voulez sélectionner des éléments dynamiques (tels que le premier et le dernier) ou lorsque vous voulez sélectionner une petite poignée d'éléments (tels que les trois premiers enfants).

C'est là que Family.scss peut vous aider. C'est une très petite bibliothèque et elle contient 26 solutions pour les sélecteurs d'enfants allant de base à super complexe . Chaque mixin a une démo sur la page d'accueil, que vous pouvez parcourir et filtrer au besoin.

Voici quelques exemples intéressants pour montrer ce que cette bibliothèque peut faire:

  • after-first(5) - sélectionner tous les éléments après les 5 premiers enfants
  • from-end(3) - sélectionne le 3ème au dernier élément enfant
  • all-but(3) - sélectionner tous les enfants sauf le 3ème
  • even-between(3, 12) - sélectionner tous les enfants pairs entre les 3e et 12e éléments

Il y a des douzaines d'autres que vous pouvez parcourir et ils ont chacun des démos pour vous aider à visualiser comment ils fonctionnent.

Quelques mixins avancés reposent sur des requêtes de quantité qui sélectionnent des éléments "au moins" ou "au plus" fixés sur une certaine plage. Par exemple, vous pouvez sélectionner tous les enfants pour les éléments parents qui ont au moins 5 enfants (ou plus).

Ces idées peuvent être déroutantes en lisant à leur sujet, mais les démos en direct rendent vraiment tout à fait clair.

Pour creuser, vous pouvez télécharger une copie de cette bibliothèque mixin du dépôt GitHub, avec toutes ces démos. Et, vous pouvez partager vos pensées ou vos questions avec le créateur du projet sur Twitter @LukyVJ.

Collaboration en temps réel sur votre site Web avec TogetherJS

Collaboration en temps réel sur votre site Web avec TogetherJS

On ne peut nier que la collaboration en temps réel est devenue une partie importante du web moderne. Google Drive est un excellent exemple de la façon dont la collaboration simultanée en temps réel est un moyen essentiel de travailler en ligne ces jours-ci. En appliquant le même concept, Mozilla Labs a présenté son propre outil appelé TogetherJS, une bibliothèque JavaScript basée sur HTML5 pour faciliter la collaboration en temps réel entre les utilisateurs.TogetherJS

(Conseils techniques et de conception)

36 Modèles et tutoriels de haute qualité pour concevoir un site Web d'entreprise

36 Modèles et tutoriels de haute qualité pour concevoir un site Web d'entreprise

C'est un fait que les entreprises du monde réel ont essayé très dur d'infuser leur marque sur le web, en raison de la popularité de l'Internet. Apple le sait, Coca-Cola le sait, même un magasin local de produits frais près de chez moi le sait.Pour une société géante comme Nike, ils peuvent probablement investir une petite partie de leur fonds pour embaucher un concepteur web de premier ordre pour construire un site épique, mais pour les petites entreprises sans fonds et expérience de conception, ce sera un défi crucial pour eux d'obtenir leur site Web existait en ligne avec un b

(Conseils techniques et de conception)