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 !

15 réponses


Pas mal du tout. Les couleurs sont un peu trop flash à mon gout mais c'est pas mal.

Un bon travail, bravo à toi. Je rejoindrais netwarp sur les couleurs.

salut Roak,
j'ai été voir ton projet et j'ai remarque un truc le design est quasi similaire a celui de bootstrap ... on dirais que tu as juste surcharger les couleurs .... (mise a part les checkbox qui sont bien stylés )

J'ai aussi une idée pour toi :
Il y'a déjà pleins de Framework css (Materializecss , Bootstrap , Foundation ,.... ) . Mais ce qui à mon avis manque vraiment, c est un FW qui regroupe une même syntaxe et que juste en changeant le css ca deviendrait un design de type Material design ou Bootstrap /.. => ca serait vachement cool d'avoir un FW avec des templates facilement créable et utilisable ... => ça peut être une idée si tu veux faire qq chose qui se démarque des autres.

Sinon beau projet

JC

PS: ca pourrait être cool que ce FW ne sois pas jquery dépendant...

Roak
Auteur

Merci à vous d'avoir pris le temps de jeter un oeil !
Je prends en note vos remarques et je pense retravailler les couleurs pour donner un identité complètement différentes des autre framework. Je pense également à changer le système de grille en passant de flexbox à CSS Grid Layout (qu'en pensez-vous ?).

@jchr Je vois ce que tu veux dire sur un framework qui permettrait de passer d'un style bootstrap à un d'autre style en changeant simplement un classe sur le body (par exemple) mais tout en gardant la syntaxe des classes. C'est une idée à prendre en compte et à laquelle il faut que je réfléchisse. Mais je pense partir (au début) sur un simple framework avec un seul style. Mais rien n'empêche dans le futur de mettre en place ce système.
Je fais en sorte de ne pas utiliser jQuery ... C'est le cas pour le moment =)

salut , @Roak
tu as raison d'utiliser Flexbox, car la quasi totalité des navigateurs le supporte : https://caniuse.com/#feat=flexbox . pour l idée du design changeable : evidemment que tu dois d abors y réflechir et bien faire les bases :-)

Par contre, quand tu créeras le reste de ton app , pose toi toujours la question : "pourquoi les gens vont ils utiliser mon FW et pas celui qui a plus d années au compteur ?" car c'est ca qui dépendrera de son utilisation : par exemple des points positifs : - car elle est faites avec du React et qu'elle a un tas de fonction en js que les autres n'ont pas -car elle facilement utilisable dans RoR / laravel / php tout court/ etc , -car elle a une syntaxe plus courtes ,etc

Si j'étais toi , dès que tu as fini une version beta, je mettrais un peu partout un google form afin de voir ce que les gens trouvent qu'il manque dans les FW habituel . Et tant que tu y es , je te conceillerais d'aller voir de tant à autres les pens les plus utilise sur codepen, afin de voir ce que les gens on besoin :-)

Bonne chance avec ton projet
jc

Salut,

Très très sympa, j'aime beaucoup. Cela manque toutefois d'animation, notamment sur les button au hover, ou sur le submenu (.nav-item-children) de la navbar.
Sinon bon boulot ;)

Un système de grille en grid et pas en flexbox serait très intéressant. Le système de grid demande un peu moins de code que les flexbox, ce qui rendrait ton framework plus léger. Il y a très peu de framework ( voire pas du tout ) qui utilisent les grid.

Une autre point qui pourrait rendre ton framework vraiment attractive serait l'utilisation de variables en css. Pour personnaliser les couleurs dans les autres frameworks ( à part materialize ), il faut installer d'autres outils ( nodejs, less, sass, gulp, webpack selon les cas). Sur des sites ou on a pas un accès à la machine c'est pas très pratique.
Les variables directement en css c'est un peu experimental mais ça marche très bien.

Un exemple basique:

:root {
    --blue: #4d42f1;
}

.button.blue {
    background: var(--blue)
}

https://developer.mozilla.org/fr/docs/Web/CSS/Les_variables_CSS

Roak
Auteur

Bonjour à tous,

Un peu de nouvelles concernant Kjio.
J'ai revu un peu le framework. Le système de grille passe de Flexbox à CSS Grid (grille responsive, offset, répartition en blocs égaux si souhaité, etc ...). Les couleurs ont également changées. Je revois également le design des éléments pour un style moins bootstrapé.

En revanche, je me suis penché sur les variables CSS. Ca aurait pu être sympa de les utiliser, cependant elle ne sont pas encore utilisables via la métohde RGB ou Darken/Lighten de SASS ce qui complique un peu les choses.

Je remet donc tout en place avec les nouvelles fonctionnalités et je vous tient au courant.
Bonne journée !

Ce n'est pas un peu prématuré d'utiliser CSS grid, il y a encore plusieurs navigateurs importants qui ne le supportent pas du tout, ou partiellement ?

Roak
Auteur

@Kenor Que penses-tu d'un système de grille modulable en fonction d'une classe. Grille Flexbox de base, mais en ajoutant la classe .css-grid, on passe sur une grille en CSS Grid ?

Oui à la limite pourquoi pas, ça peut être une bonne idée.
Maintenant, tu es passé par CSS grid parce que tu étais bloqué quelque part ?
Il faut juste que dans le code généré, tu n'as pas tout en double (pour éviter un surpoids du fichier min).

Roak
Auteur

Non non je n'étais bloqué nul part. Je voulais juste tenter de faire une grille responsive avec CSS Grid. Dans la première version, la grille était générée via flexbox.

De même, je vois que tu utilises "calc" non supporté par Opera mini. (t'es pas le seul ceci étant à l'utiliser)

Salut

Dans l'ensemble ton FW est très sympa mais il y a un point qui est souvent oublié qui est l'accessibilité. Le minimum serait d'avoir une navigation au clavier qui fonctionne sur tous les composants.
Les premiers éléments que j'ai vu qui ne sont pas accessibles au clavier sont :

  • input radio, checkbox et file (non accessible à cause du display: none), tu peux remplacer le css par :
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
  • l'affichage des sous-menus en hover pour les navbar : tu peux utiliser le pseudo-element focus
  • la croix pour retirer les alertes
  • les modals

Bonne continuation !

Roak
Auteur

Salut,
Merci pour tes remarques. Je suis sur une refonte et ce que tu vois sur Github n'est plus d'actualité.
Les fonctionnalités resteront les mêmes, mais je revois légèrement le code pour rendre le tout accessible et plus au goût du jour.