[Framework] G.R.I.D

Venez nous parler de vos sites et projets!
7 message(s)Page 1 sur 1

[Framework] G.R.I.D

Messagepar tutorialcenters » Sam Sep 19, 2015 5:28 pm

Bonjour à tous ! (et à toutes... )

Cela fait maintenant 3 ans que je prend la programmation web pour un passe temps, d'où je programme en PHP, SQL, HTML, CSS et Javascript ! Il y a quelques années j'ai aussi appris le Java pour créer mes propres applis Android mais là je sort du contexte...

J'ai déjà créé deux sites : GamesCenters (fermé pour cause de maintenance) et TutorialCenters. Mais après avoir teminé ce dernier, j'ai voulu créer quelques chose de plus grand (bon... presque...), et qui pourrait servir à tout le monde ! D'où j'ai eu l'idée de créer un framework permettant de facilement et rapidement créer des sites web pouvant s'adapter à tous les appareils !
Image

G.R.I.D (qui veut dire en français grille) est donc le nom que j'ai trouvé à ce framework !


Genèse

L'idée de créer G.R.I.D m'ai venu en relisant deux des cours que j'ai écrit sur mon site : Rendez votre site responsive avec CSS3 et Concevez votre propre plugin jQuery. Mais avant que G.R.I.D ne soit ce qu'il est aujourd'hui, il n'était qu'un simple fichier CSS ! Mais après j'ai ajouté au projet un fichier JS ayant un plugin jQuery permettant de créer automatiquement un menu alternatif pour smartphones. Ensuite j'ai eu d'autres nombreuses idées d'amélioration que j'ai appliqué à G.R.I.D pour faire ce qu'il est aujourd'hui. Le but de G.R.I.D est d'aider tous ceux qui désirent créer un site web et le rendre accéssible sur tous les appareils.


Généralité et avancement

G.R.I.D vient avec deux fichiers, un fichier CSS et un fichier JS. Vous pouvez voir les démos de l'utilisation de ces fichiers aux adresses suivantes: G.R.I.D CSS et G.R.I.D JS. G.R.I.D CSS est le fichier initial de G.R.I.D, à lui seul il peut rendre votre site responsive. G.R.I.D JS quant à lui est un ensemble de plugins jQuery pour améliorer l'interactivité de votre site ! Il est intégré avec PrefixFree 1.0.7. Les plugins intégrés à G.R.I.D JS sont :
  • G.R.I.D Menu: permettant de créer un menu alternatif pour smartphones et tablettes, et aussi de créer desdropdowns.
  • G.R.I.D Progress bar: permettant de créer une barre de chargement pour un évènement.
  • G.R.I.D ScrollController: permettant d'appeller une fonction lorsque l'utilisateur entre ou sort d'un élément de la page.
  • G.R.I.D Carousel: permettant de créer un carousel d'articles.
  • G.R.I.D Slider: permettant de créer une gallerie d'images avec un choix de 11 animations de transition.
  • G.R.I.D Panels: permettant de créer des panneaux de navigation (un peu comme les onglets d'un navigateur ;) ).
  • G.R.I.D Alerts: permettant d'afficher des notifications (4 types par défaut, mais vous pouvez ajouter les votres !).
  • G.R.I.D ShakeIt: permettant de secouer un élément de la page, ou même la page !
  • G.R.I.D ScrollTo: permettant faire défiler la page d'un élément à un autre.
G.R.I.D CSS utilise les media queries pour rendre le site responsive. Il vient aussi en intégrant les icônes FontAwesome vous facilitant l'insertion des icones dans votre site. Désolé mais il n'existe encore aucune documentation de G.R.I.D pour le moment, mais je suis entrain de la rédiger (un tuto complet sera bientôt disponible sur mon site)!


Objectifs

Cette version de G.R.I.D est la première. D'où il n'est pas encore très connu. Mon but est que G.R.I.D puisse aider le plus de personnes dans le monde et peut être même qu'il puisse concurrencer des géants comme Bootstrap :D. La version étant première, il peut y avoir des bugs et dysfonctionnements, d'où si vous en trouvez, ouvrez une nouvelle issue sur GitHub ! Comme tout projet, G.R.I.D doit grandir ! Alors je pense y ajouter de nouvelles fonctionnalités telles que l'insertion des moteurs de templates comme Smarty ou Talus, ou encore créer une version de G.R.I.D orientée PHP !


Le projet et son originalité

G.R.I.D est concu pour tous ceux qui souhaitent créer un site web sans se tracasser du CSS, des plugins jQuery à insérer, et de l'aspect sur les appareils autre que les PCs. Avec G.R.I.D il vous suffira juste d'insérer quelques classes et ids dans votre page, puis le laisser faire le reste !

Biensur G.R.I.D n'est (encore) qu'un enfant qui essaye de jouer dans la cours des grand ! Mais il peut se démarquer par sa facilité d'utilisation et son indépendance. G.R.I.D n'a pas besoin de d'installation compliquée, de l'utilisation d'un serveur, etc.. tout ce que G.R.I.D demande est d'avoir au moins jQuery dans votre site.

Vous pouvez voir les trois démos de sites créés avec G.R.I.D à ces adresses :
  • Blog: Un thème de blog complet ! Créé entièrement avec G.R.I.D
  • Cover page: Une page unique servant de couverture pour un site. Le thème de base est de HTML5 Up, je l'ai juste retouché pour montrer que c'est pas si compliqué de migre son site vers G.R.I.D ! ;)
  • The CMS Installer: Un thème complet simulant l'installation d'un CMS (utilisez n'importes quelles informations dans les formulaires !)
Pour voir la puissance de G.R.I.D, je vous invites à consulter ces pages sur tous vos appareils (PC, tablette, smartphone) ! Et pour ceux qui ont manqué le lien en haut de page, le site de G.R.I.D.



Merci d'avance pour vos avis !

A+
tutorialcenters offline
Message(s) : 11
Inscription : Dim Mai 31, 2015 4:57 pm
Localisation : Yaoundé - Cameroun

Re: [Framework] G.R.I.D

Messagepar Dev2D » Sam Sep 19, 2015 7:42 pm

Bonjour,

Connaissez-vous bootstrap de twitter ?

Cordialement.
Dev2D offline
Message(s) : 19
Inscription : Ven Déc 19, 2014 4:10 pm
Localisation : Oujda, Oriental, Maroc

Re: [Framework] G.R.I.D

Messagepar Alex » Dim Sep 20, 2015 2:08 am

@Dev2D :
Tu devrais lire ce qui est dit avant de poser une question dont la réponse est dans le post... ;)

@TC :
Voilà un projet ambitieux qui me plait.
Je regarderai ça dès que j'ai 5 minutes (ou même plus)

Il ne te reste plus qu'à trouver LE truc qui te démarquera des autres frameworks. ;)
Amicalement votre.
Alex.


chez oim, forum libre !
Alex offline
Avatar de l’utilisateur
Message(s) : 1086
Inscription : Lun Août 12, 2013 7:59 pm
Localisation : MARSEILLE --- FRANCE

Re: [Framework] G.R.I.D

Messagepar Dev2D » Dim Sep 20, 2015 2:32 pm

Bonjour,

@Alex : J'ai lu le post, et votre dernière phrase "Il ne te reste plus qu'à trouver LE truc qui te démarquera des autres frameworks." n'est qu'une reformulation de ma question.

Voilà tout ;)

Cordialement.
Dev2D offline
Message(s) : 19
Inscription : Ven Déc 19, 2014 4:10 pm
Localisation : Oujda, Oriental, Maroc

Re: [Framework] G.R.I.D

Messagepar jbdo99 » Mer Sep 23, 2015 7:33 am

Hate de voir la doc et de pouvoir le tester !
jbdo99 offline
Message(s) : 7
Inscription : Sam Mai 30, 2015 5:37 am

Re: [Framework] G.R.I.D

Messagepar Andre » Mer Sep 23, 2015 5:13 pm

C'est un projet très intéressant, je vous souhaite bonne chance et bonne continuation !
Cordialement,
André
Andre offline
Avatar de l’utilisateur
Message(s) : 32
Inscription : Ven Fév 13, 2015 10:28 pm
Localisation : Sherbrooke

Re: [Framework] G.R.I.D

Messagepar tutorialcenters » Dim Sep 27, 2015 4:05 am

Merci à tous pour vos réponses !
Juste pour annoncer que la première partie de la documentation est déjà disponible : How to use G.R.I.D CSS
tutorialcenters offline
Message(s) : 11
Inscription : Dim Mai 31, 2015 4:57 pm
Localisation : Yaoundé - Cameroun

7 message(s)Page 1 sur 1

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité

cron