Bonjour à toutes et à tous,

Description

Kjio CSS est un framework css que je viens tout juste de commencer à développer.
Il n'a clairement rien d'exceptionnel comparé à tous les autres framework de ce genre. Je me suis simplement mis en tête de développer mon propre framework dans le but de ne pas avoir à en ré-apprendre un autre, bien que ce soit tout de même pratique !

Kjio CSS est un framework mobile-first (à bien prendre en compte lors de son utilisation).

A vous de savoir que, ceux qui souhaitent participer au développement sont les bienvenus. Le lien github du projet est https://github.com/elliotcln/kjio-css.

Bases et composants

Bien que Kjio n'en soit qu'a ses débuts, il existe déjà pas mal d'éléments qui lui permettent d'être fonctionnel.
Voici une liste des bases et composants déjà existants :

Bases

• Les breakpoints
• Les sections
• Les containers
• La grille
• Les titres
• Les formulaires

Les composants

• Navbar
• Boutons
• Modals
• Alertes

Documentation et téléchargement

La documentation (partielle pour le moment) est disponible à l'adresse suivante : https://elliotcln.github.io/kjio-css/.
Pour ce qui est du téléchargement, vous pouvez retrouver tous les fichiers sur le Github du projet.

Encore merci d'avoir pris le temps de me lire.
En espérant avoir des retours constructifs de votre part, bonne journée !

-
Edité par Roak 30 septembre 2017 à 17:35:08

Bonjour,

Je suis assez étonné de ne voir aucun commentaire sur ce projet.

J'ai jeté un œil au code puis j'ai ouvert les deux yeux pour regarder la documentation, et je trouve ça très propre, c'est jolie, c'est simple et ça m'a l'air vraiment pas mal.

Plusieurs choses me plaisent :

• du vanilla JS pour les composants
• l'utilisation de rem
• l'utilisation de flexbox

• mettre un effet de survol sur les boutons
• du CSS pour les tableaux
• améliorer les champs déroulants (pour l'inspiration, voici un plugin très connu que j'utilise souvent pour inclure un champs de recherche sur ma liste déroulante : https://silviomoreto.github.io/bootstrap-select/examples/ )

.

Concernant l'accessibilité, il y a un gros point noir (en regardant le fichier CSS compilé) je trouve :

html {
  font-size: 10px; }

body {
  /* ... */
  font-size: 1.6rem; }

Le soucis est qu'on ne prend pas en compte ici les préférences de l'utilisateur (il peut être malvoyant).

https://www.nicolas-hoffmann.net/source/1692-Les-em-rem-avec-les-preferences-utilisateurs.html

Préférer plutôt ce genre de code où l'on se base sur les préférences de l'utilisateur. Et pour les utilisateurs qui ne changent pas les paramètres par défaut, ça nous donnera quand même du 10px de base 

html { 
  font-size: 62.5%;
  font-size: calc(1em * 0.625); /* IE fix */
}

De manière globale, good job et continue comme ça 

-
Edité par Xanatos 19 octobre 2017 à 13:54:10

Salut Xanatos,

Merci pour tes remarques et tes conseils, je vais les prendre en compte lors des prochaines mises à jour qui rajouteront encore quelques fonctionnalités comme les tabs, les tableaux et bien d'autres j'espère
De plus il va en effet falloir que je me penche sur tout ce qui touche à l'accessibilité (ce n'est pas mon fort ...).

Encore merci !

Hello,

Projet très sympas, je pose un bémol sur le design des différents boutons et alertes. Trop simpliste à mon goût et c'est la raison pour laquelle je ne pense pas l'utiliser. Du moins pas encore.

Sinon il y a un professionnalisme visible et une documentation très correcte.

Points d'amélioration :

- (je n'ai pas vérifié) Si il fonctionne sur tous les navigateurs ce serait bien de le mettre en valeur, et si il ne l'est pas ce serait bien de le faire

- Développer les fonctions en javascript (exemple: afficher le nom du fichier dans input de type file, aperçcu de l'image ou du fichier, etc ...)

Bon courage pour la suite,

Moi