ZdS en largeur fixe

Avec juste un peu de CSS utilisateur !

a marqué ce sujet comme résolu.
Auteur du sujet

Comme le titre le suggère je me suis amusé à créer un style utilisateur pour forcer une largeur fixe sur mon écran, comme ça je peux utiliser le site confortablement sans tourner ma tête pour voir la sidebar perdue loin à gauche, ou faire de grands mouvements de souris pour atteindre les notifications :D

J’ai utilisé Stylus (que je découvre pour l’occasion) sur Firefox pour les appliquer, mais comme il s’agit d’un simple fichier CSS vous devriez pouvoir faire pareil avec votre solution favorite, y compris sur d’autres navigateurs !

Le code est ici et sera mis à jour si besoin : https://gist.github.com/viki53/aae4daaa1db246470516fa016ae1df64

C’est très basique pour le moment, mais ça gère le header (y compris les dropdowns), les pages fluides et les pages classiques avec sidebar.

Vous pouvez facilement éditer la largeur en changeant la variable --site-width en haut du fichier pour définir votre largeur maximale si vous voulez quelque chose de plus large… ou plus étroit. ;)

Ou si vous avez un navigateur ou une extension compatible pour pouvez installer le UserCSS directement !

Édité par viki53

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+3 -0
Auteur du sujet

Oui j’ai découvert entre temps que Stylus supporte aussi ce format, mais je sais pas trop comment ça fonctionne, alors j’ai juste mis des entêtes dans le code… à voir comment ça se passe ^^

Et j’aimerais bien que ça fonctionne pour d’autres navigateurs aussi, tant qu’à faire…

Édité par viki53

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+0 -0

Yep, grâce à une media-query adaptée qui permet de n’appliquer le CSS que sur certains domaines :

@-moz-document domain(zestedesavoir.com) {
  /* Le CSS */
}

Oui j’ai découvert entre temps que Stylus supporte aussi ce format, mais je sais pas trop comment ça fonctionne, alors j’ai juste mis des entêtes dans le code… à voir comment ça se passe ^^

Et j’aimerais bien que ça fonctionne pour d’autres navigateurs aussi, tant qu’à faire…

Bien sûr ! C’était surtout pour ceux qui ne voulaient pas d’une extension en plus mais c’est bien d’avoir une version qui marche partout :) .

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+1 -0
Auteur du sujet

Je vais essayer de me pencher un peu plus sur la doc pour avoir un fichier commun qui ferait tout directement via le Gist… je sais pas si c’est jouable.

Quelqu’un a déjà tenté ça ?

[EDIT] : C’est bon !

Édité par viki53

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte