Savez-vous ce que sont des framework ? Présents sous la plus part des langages de programmation, ils permettent d'utiliser des outils pré-crées pour accélérer le développement de sites internet. Ils sont nombreux, et en particulier dans les langages que nous allons traiter dans ce topic : à savoir HTML et CSS.
L'intéret d'utiliser des framework pour le front-end est de pouvoir réaliser un site, pour la plupart des framework responsive-design, qui soit aussi bien compatibles sur PC que sur mobile ou tablette. C'est donc un vrai plus car aujourd'hui, les petits écrans prennent de l'ampleur....
Je vais, dans ce topic vous présenter divers framework qui me paraissent les plus intéressants , ainsi que leur utilisation.
Pour information, Maxence à fait il y a 1 an et demi la présentation complète du framework Bootstrap, qui est épinglé depuis le début, je vous laisser cliquer ici pour le découvrir
Présentation de ces framework:
- Bootstrap
- FontAwesome (c'est pas vraiment un framework mais je le considère comme)
- SemanticUI
- Foundation
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework Bootstrap
Je ne vais pas trop nous attarder sur le sujet car @Maxence ES a déjà présenté ce framwork il y a maintenant 1 an et demi : cette présentation est complète et est disponible ici.
Dans cette catégorie je vais tout simplement résumer l'essentiel sur Bootstrap.
C'est un framework plutôt connu qui regroupe diverses fonctionnalités, qui veut se montrer souple mais complet. Il s'adapte , et s'en est sa force à tout type de plateforme, qu'il soit grand écran ou petit écran. Il permet un design simple et épuré jusqu'à la conception de grands thèmes. Il peut être, pour les utilisateurs avancés en combinaison avec ses propres codes CSS.
Il incarne un système de grille, qui permet de faire "floater" les éléments que l'on place dans chacune des 12 grilles. Il incarne aussi divers class pré-crées, tableaux, formulaires, navbar, des icons, des alertes... Il est très puissant et très facile d'utilisation, notamment grâce à son site internet qui répertorie toutes ses fonctionnalités (HTML/CSS/JS)
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework FontAwesome
Vous connaissez surement ce framework extrêmement populaire que aussi RealityGaming utilise: FontAwesome. Disons que ce n'est pas un framework pour la conception d'un site internet ou d'une page mais plutôt à sa finition. Il permet au fait d'ajouter des centaines de petits icons , divers et variées , sous différentes tailles.
Pour l'utiliser, il suffit d'inclure le framework à votre page et "d'appeler" votre icon.
Sur RG, vous l'utilisez peut être sous cette forme:[FA ]fa-car[/ FA]
En HTML, il faudra faire par exemple de cette forme:<i class="car"></i>
Qui donnera, au final, ceci:
Super simple d'utilisation, d'installation (juste inclure un .min.css dans <link>) et extrêmement performant, ce framework est indispensable dans la conception d'un site internet
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework Semantic UI
Passons maintenant à Semantic UI, un autre framework qui se rapproche lui à Bootstrap avec d'autres fonctionnalités.
En effet, il propose des objets CSS avec un code HTML simplifié. Il est récent et donc adapté aux sites d'aujourd'hui, c'est à dire qu'il propose un design flat et épuré.
Comparé à Bootstrap, Semantic UI propose une large personnalisation de son code. Par exemple, chaque couleur qui est utilisée dans les codes CSS n'est pas fixe, c'est une variable que l'on configure qui est utilisée. Par exemple, un bouton type "primary" sera noté @Blue, mais on peut très bien faire @Blue = red. Et bien d'autres.
Vraiment, il sera impossible de résumer toutes ses fonctionnalités en 4 paragraphes, il faut savoir que sa documentation le fait très bien. C'est un framework difficile à maîtriser au début, mais qui mâche considérablement le travail ! Son installation est très simple, c'est juste donc des fichiers CSS , JS à télécharger, et directement les inclure dans votre page.
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework Foundation
Maintenant nous allons parler de Fondation un framwork de chez Zurb.com, il s'agit d'une framwork super-complet mais qui reste assez basique dans le théme de Bootstrap. Ils ont plusieurs similitudes comme ( système de grilles pour les positionnements, système de layout responsive, éléments d'interfaces (des tableaux...) ect... )
Fondation propose aussi une reconnaissance de navigation que sa soit ( Ordinateur, tablette, téléphone ) comme ceci :
Pour l'utiliser, il suffit d'inclure le framework à votre page et "d'appeler" votre icon.
Sur RG, vous l'utilisez peut être sous cette forme:[FA ]fa-car[/ FA]
En HTML, il faudra faire par exemple de cette forme:<i class="car"></i>
Qui donnera, au final, ceci:
Super simple d'utilisation, d'installation (juste inclure un .min.css dans <link>) et extrêmement performant, ce framework est indispensable dans la conception d'un site internet
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework Semantic UI
Passons maintenant à Semantic UI, un autre framework qui se rapproche lui à Bootstrap avec d'autres fonctionnalités.
En effet, il propose des objets CSS avec un code HTML simplifié. Il est récent et donc adapté aux sites d'aujourd'hui, c'est à dire qu'il propose un design flat et épuré.
Comparé à Bootstrap, Semantic UI propose une large personnalisation de son code. Par exemple, chaque couleur qui est utilisée dans les codes CSS n'est pas fixe, c'est une variable que l'on configure qui est utilisée. Par exemple, un bouton type "primary" sera noté @Blue, mais on peut très bien faire @Blue = red. Et bien d'autres.
Vraiment, il sera impossible de résumer toutes ses fonctionnalités en 4 paragraphes, il faut savoir que sa documentation le fait très bien. C'est un framework difficile à maîtriser au début, mais qui mâche considérablement le travail ! Son installation est très simple, c'est juste donc des fichiers CSS , JS à télécharger, et directement les inclure dans votre page.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Présentation du framework Foundation
Maintenant nous allons parler de Fondation un framwork de chez Zurb.com, il s'agit d'une framwork super-complet mais qui reste assez basique dans le théme de Bootstrap. Ils ont plusieurs similitudes comme ( système de grilles pour les positionnements, système de layout responsive, éléments d'interfaces (des tableaux...) ect... )
Fondation propose aussi une reconnaissance de navigation que sa soit ( Ordinateur, tablette, téléphone ) comme ceci :
Code:
<strong class="show-on-desktops">Vous êtes sur un ordinateur.</strong>[/FONT][/CENTER][/FONT][/CENTER]
[FONT=Gotham narrow]
[CENTER][FONT=GothamNarrow-Book][CENTER]
<strong class="show-on-tablets">Vous êtes sur une tablette</strong>
<strong class="show-on-phones">Vous êtes sur un smartphone.</strong>
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445
Comme est dit en introduction, HTML/CSS ne sont pas les seuls langages qui bénéficient de framework : il y a aussi des framework pour PHP (Zend etc.).
Merci beaucoup tout le monde !
Anthony ES.
Anthony ES.
Dernière édition:
