Yo moi c'est Johan, 19 ans, fondateur du studio de développement (amateur) "InGames Studio" et fondateur de ce nouveau projet que je nomme

Genèse

Lors de la conception de notre premier jeu, nous avons voulu pour l'occasion créer un site pour le studio ainsi que pour le jeu en lui même. Le soucis étant que un site web bien fignolé, ben ça prend du temps. Je voulais donc utiliser un framework pour nous simplifier la vie et réduire un peu le boulot. Devinez quoi ? Aucun framework ne m'as convenu, j'ai donc décider de créer le miens et de le partager !

Les particularités

Bah oui il faut bien se démarquer des grands ! Notre framework n'utilise aucune technologie ou dérivé du javascript. En effet, nous exploitons à 100% les fonctions, surprenantes quelques fois, de css3, ce qui permet donc une meilleure flexibilité connaissances/beauté. Sans JS, SoJo permet un affichage plus rapide des pages web.

Je tiens à préciser que des éléments dynamiques (autant que avec JS) sont disponibles !

Où en est-on ?

La nous en sommes à une première version qui ne propose pas encore énormément de fonctions mais ça va arriver sous peut, les bases étant posées.

Déjà dispo :

- Boutons colorés

- Modal box

- Menu (avec ou sans dropdown)

- Tooltips

- Intégration en plugins de font-awesome

- positionnement extrémement simple des div (plus simple que bootstrap)

pour le moment c'est tout je pense, mais de noubreuses choses vont encore faire leur apparition, mais il y a déja de quoi faire, la preuve :

Téléchargement

Pour le moment la doc est en cours de rédaction mais vous pouvez tout de même télécharger la dernière version, je pense que dans l'archive j'ai laissé trainer un fichier avec des exemples

http://sojoframework.com/

Ton site il est fait avec ton framework j'imagine ?

Personnellement, le lien de téléchargement ne fonctionne pas, mauvaise redirection à mon avis.

Salut !

L'idée est cool ! J'ai envie de tester ça !

Mais comme dit chrisfra, le lien de téléchargement ne fonctionne pas :/

le domaine est en cours de migration c'est pour ça :/

Pour ce qui est du site oui il est bien entendu conçu avec SoJo

Je ne l'ai pas mentionner mais je compte faire aussi un système comme wix pour creer son site sans ecrire une seule ligne de code et qui intégreras donc le framework

-
Edité par InGamesStudio 20 septembre 2017 à 20:13:23

Désolé, mais un framework qui me vend une lib CSS, construit avec, et qui se comporte comme ça quand l'écran est réduit sur pc:

et comme ça sur mobile:

...pour moi c'est un grand non. Je dis pas que ce serait pas utilisable, mais la concurrence est tellement rude sur ce terrain que c'est pas possible ça.

-
Edité par Genroa 21 septembre 2017 à 15:22:17

Salut,

je suis bien d´accord avec toi mais nous n’en sommes qu’a la première version

les versions mobiles seront disponibles vers la version 3.0.0 donc environ dans deux mois si mes prévisions sont bonnes.

pour le reste ce n’est que du bug fixing

L'idée est sympa. Mais quand tu dis que tu es entrain de coder un framework css mais que tu centres ton logo avec une balise center, j'ai des doutes sur tes capacités à aller au bout du projet... Franchement, on à l'impression que le site a été réalisé rapidement en une soirée... Ta mise en page est faites avec des
et des centers... T'as pas de classes qui gère les margins dans ton framework ? Pas de classe pour center non plus ? Pourtant, ça me semble être un minimum...

Pardon de critiquer comme cela mais ton idée est bonne mais trouves toi quelqu'un qui a fait du graphisme (d'interface si possible). Je dis pas que c'est moche, c'est subjectif mais ça manque d'harmonie. Regarde Bootstrap, materialize ou topcoat, tu les reconnais au premier coup d’œil !

Je t'encourage à continuer de bosser dessus. De toutes manières ça peut qu'être formateur et ça ne peut aller qu'en s'améliorant.

Après, je critique beaucoup mais comme j'ai dit, l'idée est bonne. Il y a peu de framework full css. Enfin, il y en a, (knacss par exemple) mais ils se contentent souvent que de proposer une grille + margin et pas un style déjà tout près.

Les nav sont parmi les composants les plus demandés, ils doivent être parfaits. Il y a encore du travail sur ce point

Il ne devrait pas y avoir de "version mobile". Tu travailles sur un écran dont la taille n'est pas connue, ne sépare les supports comme ça, fais responsive dès la conception, ça t'aidera je pense. 

Oui bien le merci pour ta critique tout à fait constructive !

Car comme je l’ai dit j’ai sorti une première version pour donner un petit aperçu Et déjà récolter quelques critiques et améliorations, mais un petit <center> n’est-il pas intéressant lorsque l’on veux juste centrer une image ? Moi je pense quand même que oui sinon pour ce qui est des margin j’y travaille 

mon framework n’utilise même pas le principe de grille j’ai vraiment simplifié le positionnement (qui n’est pas encore terminé mais qui franchement a son intérêt). J’avais vraiment envie de m’en démarquer au niveau de la facilité car les framework proposés sont sous certains angles pas hyper simple.

donc voilà tout ça pour encore dire que les choses avancent et que tout n’est pas encore mis en place. 

EDIT: @Genroa : oui j’imagine bien je prends note de ce que tu me dit et prochaine release majeure, j’integre Ca !

EDIT 2 :

Voila j'ai créé un nouveau design avec la version 1.1.0 qui apporte pleins de nouvelles choses ! Les width, padding et margin sont pris en charge dans le framework plusieurs autres choses ont été ajoutées mais je vous en dit plus lundi soir

voici donc quelques extraits de ce que j'ai fait (je sors de 3 heures de css intensif )

Voici un

-
Edité par InGamesStudio 21 septembre 2017 à 20:51:39

Bonjour,

La balise <center>, bien que toujours fonctionnelle est obsolète depuis des années, et ne sera pas validée si tu veux mettre ton framework aux normes W3C.

Aussi, pour les autres détails à corriger sur le site :
- Les appels aux feuilles de styles sont dans ton <head>, elles sont donc chargées avant le contenu de la page, google speed insight te le fera remarquer d'ailleurs. Déplace-les avant la balise </body>.
- Ton <head> d'ailleurs est très pauvre, il manque pas mal de choses pour optimiser ton framework d'un point de vue SEO (balises meta essentiellement).
Il manque un petit favicon également (à rendre compatible avec les appareil apple/retina).
- Des balises <p>*espaces, saut à la lignes et/ou tabulations*</p> se baladent un peu partout.
- Tu appelles une feuille de style mais tu utilises l'attribut style sur tes éléments, à proscrire également.
- Les <br> à répétition, ce n'est pas une bonne pratique, utilise plutôt du css pour espacer les éléments.
- Les liens du nav ne fonctionnent pas tous.
- Le responsive est clairement à travailler.

Çà c'est uniquement pour le site, je conçoit qu'il s'agisse d'une version pré-pré-pré-alpha, mais il reste encore énormément de travail avant de pouvoir communiquer sur le projet.

Dans le framework, il y a plusieurs fois ceci :

@media (max-width:$screen-xs-max){}
@media (min-width:$screen-sm){}
@media (min-width:$screen-sm){}

Je n'ai pas compris ce que çà fait là, surtout les variables (c'est du sass j'imagine ?).
Il y a des propriétés qui ne sont pas préfixées, mais que l'on retrouve préfixée un peu plus bas pour d'autres éléments. (cf. transform, transition, ...).

Autrement, le framework reste plutôt pauvre dans l'ensemble, tu devrait utiliser des techniques plus récentes et travailler un peu plus ta maîtrise du CSS.
Aussi, j'ai l'impression que pas mal de choses sont copiées/collées, à en voir la ligne minimisée en plein milieu du css non minimisé par exemple, je ne dit pas que c'est une mauvaise chose, mais pour un framework css, tout doit être pensé pour une optimisation maximale, c'est pas la même chose que pour le css d'un seul site, là, plusieurs personnes vont utiliser le même css, qui doit être compatible avec n'importe quel projet.

Enfin, petites astuces perso :
- Pour centrer un élément à la perfection (horizontalement et verticalement) :
position: absolute;
top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
Sans oublier les différents préfixes -o- -ms- -moz- -webkit- et le parent doit être en position: relative.
- Méthode avec les flexbox (à appliquer au parent) :
display: block;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* çà c'est pour le responsive, les éléments enfants passerons à la ligne si pas assez de place */

En résumé, tu as encore beaucoup à apprendre, mais je ne peux que te conseiller de pratiquer, te documenter, tester, tester et retester

Quelques liens :
- codepen.io / jsfiddle.com : ce sont des sandbox html/js/css, très pratique pour faire des tests rapides.
- la-cascade.io : à voir absolument !
- w3schools.com/css : Pour la doc.
- caniuse.com : Pour la compatibilité.

-
Edité par Webévasion 21 septembre 2017 à 21:12:35

Salut à toi !

Pour ce qui est est du site officiel comme dit je l´ai totalement repensé je suis reparti de 0 et j’ai également repensé ma feuille de style pour un meilleur rendement :) 

donc les </br> et autre balises abusives sont également supprimées et les attributs style sont reduit au max 

J’ai bien entendu copié un ou deux bout de css dynamique totalement libre (Les transition je gère moins) (bah oui on le fait tous pour s’aider un peu )

pour le reste niveau css je pense m’en sortir assez bien j’ai bien entendu encore a apprendre ce qui est normal mais c’est quand même un sacre défi l’air de rien 

Ah et aussi, évite le style inline, c'est pas propre et je crois que le w3c n'aime pas trop

Comment ça le style inline ?

<nav style="background: #222222; border-bottom: 3px solid #FF5900;"></nav>

Les trucs comme ça

Oui je sais j’ai évité de le faire sur la nouvelle version du site

un petit repo github ?

A la sortie de la 1.1 lundi

Au menu de ce soir :

Version 1.1.0:

- support des padding

- support des margin 

- support des tailles de police

- support des couleurs de police

- ajout du bouton «btn-default »

- support des alignements de texte

- correction de bugs 

voila qui fait une belle mise à jour par contre pas encore de support pour le responsive, j’y travaille ! Elle sera dispo ce soir , pour ceux qui utilisent le cdn rien a faire , les autres vous n’aurez plus qu’a Télécharger la nouvelle archive

pour ce qui est du site officiel :

- refonte graphique 

- Debut redaction manuel

- Ajout du github 

- ...

EDIT : Chose dite , Chose faite ! plus qu'a finir la doc

-
Edité par InGamesStudio 25 septembre 2017 à 22:43:42

Donc y'a pas de système de grid, tu centres avec des balises non reconnues, tu n'utilises pas flex pour le positionnement,... Je pensais que l'idée c'était d'être moderne? Abandonner la grid, pourquoi pas disons, mais le reste c'est pas possible mec ^^'

Pourquoi ne serais ce pas possible ? As tu testé pour savoir ?

InGamesStudio a écrit:

Pourquoi ne serais ce pas possible ? As tu testé pour savoir ?

C'est pas possible dans l'optique d'etre moderne

Ah ok d'accord alors la c'est bien possible mais je n'ai pas revendiqué mon positionnement de bloc par sa modernité mais plutôt par sa facilité car le positionnement est finalement extrêmement simple.

La doc n'est pas bonne...

Et quand tu dis que les classes font telle chose, montre un exemple ^^ 

Ok je Vais y travailler

Genroa a écrit:

Donc y'a pas de système de grid, tu centres avec des balises non reconnues, tu n'utilises pas flex pour le positionnement,... Je pensais que l'idée c'était d'être moderne? Abandonner la grid, pourquoi pas disons, mais le reste c'est pas possible mec ^^'

je Viens de me rendre compte que j’avais pas tout lu car depuis la v1.0.0 j’utilise flex^^ puis depuis la v1.1.0 je ne centre plus rien avec des balises non reconnues

il me reste juste deux trois petites choses à régler niveau bug mais le framework est totalement fonctionnel 

-
Edité par InGamesStudio 29 septembre 2017 à 15:27:11