Introduction

CSS framework for Django projects We will introduce ** UIKit3 **.

UIKit3 UIKit is one of the CSS frameworks. Although it is a little inferior to Bootstrap and Foundation in terms of name recognition It is a popular framework with a simple design.

The class name is unified so that it starts with ʻuk-`, It is also a good point that friction with other CSS is unlikely to occur.

Download UIKit

Download from here.

Unzip the zip file and This time, we will use the following 3 files.

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

UIKit version is 3.5.6

Create static directory

Create a static directory directly under the project directory and Store the file as shown below.

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

Modify settings.py

Define the information for the'static' directory in [projectname] /settings.py.

`settings.py`


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

Read static

Point1:

{% load static %} Use the load tag to enable the use of static tags.

Point2:

{% static '[css or js]/[filenama]' %} You can use the> static tag to define a static file path as a relative path.

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' %}">

Official documentation: https://getuikit.com/docs/introduction#html-markup

Try to display the Dropdown list. I wanted a margin because I wanted to take a screenshot of the screen, so I also tried using ʻ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">UIKit sample</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>

It was displayed safely. It's simple and nice!

in conclusion

I had the opportunity to introduce UIKit, so I summarized it.

I haven't mastered UIkit yet, but as mentioned above It is very easy to use that the class name is unified with ʻuk-`.

[Python] Introduce UIKit3 to your Django project