Uikit - lightweight and modular front-end

[SailorEudes 431]

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Bien le bonjour à toi moussaillon. Avec mes matelots nous avons décidé d'aborder le sujet du fameux "UIKit" qui est un framework te permettant de créer un navire rapidement tout en respectant l'esthétique des nouvelles technologies web.

J'ai eu cette petite idée en lisant le

Pour avoir accès à ce lien, merci de vous connecter.

 de @ Swayn qui parlait du fameux "Materializecss" et avec lequel, il a pu créer entièrement un CMS Habbo qui lui était propre et qui a fait bon nombre d'envieux !

 

Bon, bien sûr, contrairement à @ Swayn, je n'ai pas pris le temps de créer un CMS entièrement avec UIKit, mais je dois t'avouer que dans l'université ou je suis, ce framework est fortement conseillé par les intervenants.

 

 

Avant de commencer, faisons un point :

 

Citation

 

En programmation informatique, un framework (appelé aussi infrastructure logicielle1, socle d'applications, infrastructure de développement, ou cadre d'applications au Canada) désigne un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel (architecture). Un framework se distingue d'une simple bibliothèque logicielle principalement par :

 

1. son caractère générique, faiblement spécialisé, contrairement à certaines bibliothèques ; un framework peut à ce titre être constitué de plusieurs bibliothèques, chacune spécialisée dans un domaine. Un framework peut néanmoins être spécialisé, sur un langage particulier, une plateforme spécifique, un domaine particulier : communication de données, data mapping, etc. ;
2. le cadre de travail qu'il impose de par sa construction même, guidant l'architecture logicielle voire conduisant le développeur à respecter certains patrons de conception ; les bibliothèques le constituant sont alors organisées selon le même paradigme.

 

Les frameworks sont donc conçus et utilisés pour modeler l'architecture des logiciels applicatifs, des applications web, des middlewares et des composants logiciels. Les frameworks sont acquis par les informaticiens, puis incorporés dans des logiciels applicatifs mis sur le marché, ils sont par conséquent rarement achetés et installés séparément par un utilisateur final.

 

 

Maintenant que tu connais c'est quoi un framework, nous pouvons commencer ce tutoriel !

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Uikit est un framework CSS facile à prendre en main grâce notamment au nom des classes utilisées mais, aussi les helpers (ou utility) proposés pour vous aider à mettre en place votre layout. Je veux dire par là qu’il est presque possible de mettre en place un design sans avoir à ajouter du code CSS custom.

Il est vrai que cela occasionne d’avoir des balises avec beaucoup de classes attribuées, mais au moins cela permet d’harmoniser les méthodes d’intégration entre les développeurs front.

De plus en procédant de cette manière, le code CSS que vous aurez à ajouter sera vraiment q’une légère refonte du thème par défaut cela vous évitera notamment les bugs d’affichage liés à la gestion du responsive par exemple.

 

Contenu du framework :

• des composants : les icônes, les overlays, les badges, alertes, boutons
• un système de grille performant : comprenant la gestion du responsive, les articles et les sections
• les éléments HTML basiques : les liens hypertexte, les tableaux, les formulaires
• les animations css : de simples classes à ajouter à vos éléments pour les animer
• la navigation : barre de navigation, offcanvas, dropdown
• des composants javascript : accordéon, modal, slider, slideshow

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

1. Hautement customisable du fait de la possibilité de combiner les modules.
2. Permet d'ajouter des composants au CSS sans impacter le style général.
3. Possibilité de créer des interfaces utilisateurs poussées.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

1. Framework récent, très peu de ressources et de documentations.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Avant de commencer, il te faudra ton équipement matelot, sinon, tu risques de pas faire long feu face aux têtes-grises.

 

   

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Une cible projet qui t'encourage à continuer   

 

 

    Une peinte d'hydromel de café

 

 

Une boussole montre précise 

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

 

Comment j'inclus la librairie sur une page sans forcément devoir télécharger les fichiers correspondants ?

[hide]

<!-- Entre les balises "<head></head>" -->

<!-- Le CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" />

<!-- Le JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>

<!-- Le CSS -->

<!-- Entre les balises "<head></head>" -->

[/hide]

 

 

Comment je crée un accordion ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je crée un minuteur (countdown) ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

<div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2019-08-12T07:13:21+00:00">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Days</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Hours</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Minutes</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Seconds</div>
    </div>
</div>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je crée un tableau ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

<table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je peux créer ce que je veux ?

 

En te documentant

Pour avoir accès à ce lien, merci de vous connecter.

.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Pour avoir accès à cette image, merci de vous connecter.

 

Pour avoir accès à cette image, merci de vous connecter.

 

Effectivement, nous pouvons dire qu'UIKit peut remplacer Bootstrap avec un peu plus de possibilités, qu'en pensez-vous ?

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Si vous avez envie d'intégrer les fichiers d'UIKit sur votre site, sans passer par les liens directs, voici le lien de téléchargement :

 

[hide]

Pour télécharger, il te suffit de

Pour avoir accès à ce lien, merci de vous connecter.

!

[/hide]

 

En espérant voir très bientôt des rétros, des templates et/ou autres avec ce framework qui te permet facilement de créer de superbes choses !

 

Que la mer soit avec toi, moussaillon !

Modifié le 5 août 2019 par Eudes

[Harda 35]

J’adore ton délire pirate xD merci sa aidera plus d’un

[SailorEudes 431]

il y a 2 minutes, Harda a dit :

J’adore ton délire pirate xD merci sa aidera plus d’un

Tu n'es pas le premier à me le dire matelot, et j'en suis fier et te remercie par la même occasion pour ce compliment !

 

Eh bien écoute, c'est avec plaisir que je propose des tutoriels avec cette communauté qui manque cruellement de tutoriel en développement, ce qui peut consolider des lacunes pour un fondateur et le forcer à consulter des sites blindés de texte mais avec une finalité inutile pour ma part (OpenClassRoom par exemple).

 

Que la mer soit avec toi !

 

[Swayn 18]

Une très bonne alternative au Materialize, merci à toi camarade !

 

Ps : J'ai bien envie de recréer un CMS mais en UIKit cette fois-ci, on en reparle SMS !

 

La bise <3

[Python 32]

ça rend vraiment bien c'est sympa de nous en faire part

[SailorEudes 431]

il y a 1 minute, Hishiro a dit :

ça rend vraiment bien c'est sympa de nous en faire part

Au plaisir moussaillon !

[Invité Remi]

Salut,

C'est vraiment sympa merci beaucoup  

[Asare 2]

Merciiii