introduction

Framework CSS pour les projets Django Nous allons introduire ** UIKit3 **.

UIKit3 UIKit est l'un des frameworks CSS. Bien qu'il soit un peu inférieur à Bootstrap et Foundation en termes de reconnaissance de nom C'est un cadre populaire avec un design simple.

Le nom de la classe est unifié afin qu'il commence par ʻuk-`, C'est également un bon point qu'il est peu probable qu'un conflit avec d'autres CSS se produise.

Télécharger UIKit

Téléchargez depuis ici.

Décompressez le fichier zip et Cette fois, nous utiliserons les 3 fichiers suivants.

uikit-3.5.6/ 　├ css/ 　│　└ uikit.min.css 　└ lib/ 　　└ uikit-icons.min.js 　　└ uikit.min.js

La version UIKit est 3.5.6

Créer un répertoire statique

Créez un répertoire static directement sous le répertoire du projet Stockez le fichier comme indiqué ci-dessous.

[projectname]/ 　├ [projectname]/ 　├ static/ 　│　└ css/ 　│　│ └ uikit.min.css 　│　└ js/ 　│　　└ uikit.min.css 　│　　└ uikit.min.css 　└ manage.py

Modifier settings.py

Définissez les informations du répertoire "statique" dans "[nom du projet] / settings.py".

`settings.py`


STATICFILES_DIRS = (
	os.path.join(BASE_DIR, 'static'),
)

Lire statique

Point1:

{% load static %} Utilisez la balise> load pour activer l'utilisation de balises statiques.

Point2:

{% static '[css or js]/[filenama]' %} Vous pouvez utiliser la balise> static pour définir le chemin d'un fichier statique en tant que chemin relatif.

Point3:

ʻLoad UIKit` <link href="{% static 'css/uikit.min.css' %}" rel="stylesheet"> <script src="{% static 'js/uikit.min.js' %}"> <script src="{% static 'js/uikit-icons.min.js' %}">

Document officiel: https://getuikit.com/docs/introduction#html-markup

Essayez d'afficher la Liste déroulante. Je voulais une marge parce que je voulais presser l'écran, alors J'ai aussi essayé d'utiliser ʻuk-margin-top`.

`uikit-sample.html`


{% load static %}

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>TEST</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="{% static 'css/uikit.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/uikit.min.js' %}"></script>
    <script src="{% static 'js/uikit-icons.min.js' %}"></script>
</head>
<body>
    <h1 class="uk-margin-top uk-margin-left">Échantillon UIKit</h1>

    <div class="uk-button-group uk-margin-left">
        <button class="uk-button uk-button-default">Dropdown</button>
        <div class="uk-inline">
            <button class="uk-button uk-button-default" type="button"><span uk-icon="icon:  triangle-down"></span></button>
            <div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">
                <ul class="uk-nav uk-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>

Il a été affiché en toute sécurité. C'est simple et sympa!

en conclusion

J'ai eu l'occasion de présenter UIKit, alors je l'ai résumé.

Je n'ai pas encore maîtrisé UIkit, mais comme mentionné ci-dessus Il est très facile d'utiliser que le nom de classe soit unifié avec ʻuk-`.

[Python] Présentez UIKit3 au projet Django