A collection of UIKit components that can be used as a Wagtail StreamField block.

Overview

Wagtail UIKit Blocks

A collection of UIKit components that can be used as a Wagtail StreamField block.

Available UIKit components

  • Container
  • Grid
  • Heading
  • Image
  • Slideshow
  • Slider
  • Lightbox
  • Modal Popup
  • Switcher
  • Banner
  • Button
  • Link

Some components also have alignment, margin, padding, and animation properties as well.

Quick start

  • Install from PyPI

    pip install wagtail-uikitblocks
    
  • Add "uikitblocks" to your INSTALLED_APPS

    INSTALLED_APPS = [
        ...
        'uikitblocks',
    ]
    
  • In your models.py, import the uikitblocks module

    from uikitblocks import blocks
    
  • The root component - which contains all the available components, is a grid (uk-grid) component, which can be used as a StreamField.

    grid = StreamField(
          [("UIKit", blocks.UIKitGrid())], blank=True, null=True
      )
    
  • Instead of adding the whole grid component, you can also add individual UIKit components to your model class as well. An example is given below.

      heading = StreamField(
      [("heading", blocks.HeadingBlock())], blank=True, null=True
      )
    
  • Run python manage.py migrate to migrate the model changes.

  • The UIKit library must be imported in order to display the changes. You can either do it manually (For more info, please see the UIKit's official documentation here) or you can load the production ready files via the template tag.

    Add the following in the base template.

    {% load uikit_assets %}
    

    Before closing the head tag, load css and js files by adding the following template tags.

    {% uikit_css %}
    {% uikit_js %}
    

    Optional configuration

    The number of children appear inside a grid can be altered.

    For example, if you want to display 4 children in extra large (above 1600px) screens, 3 children in large (above 1200px) screens, and 2 children in medium (above 960px) screens, add the following lines in your settings module. Please note that only 1-6 are valid by default.

    UIKIT_GRID_CHILDREN_COUNT_EXTRA_LARGE = 4
    UIKIT_GRID_CHILDREN_COUNT_LARGE = 3
    UIKIT_GRID_CHILDREN_COUNT_MEDIUM = 2
    

    Demo

Issues
  • Dev changes to main

    Dev changes to main

    • Updated the README and added the install instruction from PyPI.
    • Updated UIKit version to latest (3.10.0)
    opened by kpsaurus 0
  • Update CHANGELOG.md

    Update CHANGELOG.md

    Added log for 0.0.2 release

    opened by kpsaurus 0
Releases(0.0.2)
Owner
Krishna Prasad K
Web developer | Django | React
Krishna Prasad K
Probably the best way to simulate block scopes in Python

This is a package, as it says on the tin, to emulate block scoping in Python, the lack of which being a clever design choice yet sometimes a trouble.

null 80 Nov 16, 2021
Block fingerprinting for the beacon chain, for client identification & client diversity metrics

blockprint This is a repository for discussion and development of tools for Ethereum block fingerprinting. The primary aim is to measure beacon chain

Sigma Prime 6 Dec 17, 2021
Block the annoying Token Grabbers on your discord

General We have seen that in the last time many discord servers are infected by fake discord nitro links we want to put an end to this and have develo

BadTiger Network 2 Dec 27, 2021
Block when attacker want to bypass the limit of request

Block when attacker want to bypass the limit of request

iFanpS 1 Dec 1, 2021
Programming in Bioinformatics, Block 3

Programming in Bioinformatics - Block 3 I. Setting up Environment and Running the Code Create the environment using the pibi_block3.yml file with the

null 2 Dec 10, 2021
A collection of repositories used to realise various end-to-end high-level synthesis (HLS) flows centering around the CIRCT project.

circt-hls What is this?: A collection of repositories used to realise various end-to-end high-level synthesis (HLS) flows centering around the CIRCT p

null 17 Jan 8, 2022
One Ansible Module for using LINE notify API to send notification. It can be required in the collection list.

Ansible Collection - hazel_shen.line_notify Documentation for the collection. ansible-galaxy collection install hazel_shen.line_notify --ignore-certs

Hazel Shen 4 Jul 19, 2021
Originally used during Marketplace.tf's open period, this program was used to get the profit of items bought with keys and sold for dollars.

Originally used during Marketplace.tf's open period, this program was used to get the profit of items bought with keys and sold for dollars. Practically useless for me now, but can be used as an example of tkinter.

BoggoTV 1 Dec 11, 2021
tidevice can be used to communicate with iPhone device

h 该工具能够用于与iOS设备进行通信, 提供以下功能 截图 获取手机信息 ipa包的安装和卸载 根据bundleID 启动和停止应用 列出安装应用信息 模拟Xcode运行XCTest,常用的如启动WebDriverAgent测试

Alibaba 1.3k Jan 13, 2022
Ikaros is a free financial library built in pure python that can be used to get information for single stocks, generate signals and build prortfolios

Ikaros is a free financial library built in pure python that can be used to get information for single stocks, generate signals and build prortfolios

Salma Saidane 58 May 23, 2021
Information about a signed UEFI Shell that can be used when Secure Boot is enabled.

SignedUEFIShell During our research of the BootHole vulnerability last year, we tried to find as many signed bootloaders as we could. We searched all

Mickey 49 Jan 15, 2022
vFuzzer is a tool developed for fuzzing buffer overflows, For now, It can be used for fuzzing plain vanilla stack based buffer overflows

vFuzzer vFuzzer is a tool developed for fuzzing buffer overflows, For now, It can be used for fuzzing plain vanilla stack based buffer overflows, The

Vedant Bhalgama 5 Dec 6, 2021
Identifies the faulty wafer before it can be used for the fabrication of integrated circuits and, in photovoltaics, to manufacture solar cells.

Identifies the faulty wafer before it can be used for the fabrication of integrated circuits and, in photovoltaics, to manufacture solar cells. The project retrains itself after every prediction, making it more robust and generalized over time.

Arun Singh Babal 1 Dec 4, 2021
This repo will have a small amount of Chrome tools that can be used for DFIR, Hacking, Deception, whatever your heart desires.

Chrome-Tools Overview Welcome to the repo. This repo will have a small amount of Chrome tools that can be used for DFIR, Hacking, Deception, whatever

null 3 Jan 5, 2022
Frappe app for authentication, can be used with FrappeVue-AdminLTE

Frappeauth App Frappe app for authentication, can be used with FrappeVue-AdminLTE

Anthony C. Emmanuel 4 Dec 18, 2021
Modeval (or Modular Eval) is a modular and secure string evaluation library that can be used to create custom parsers or interpreters.

modeval Modeval (or Modular Eval) is a modular and secure string evaluation library that can be used to create custom parsers or interpreters. Basic U

null 2 Jan 1, 2022
Trackthis - This library can be used to track USPS and UPS shipments.

Trackthis - This library can be used to track USPS and UPS shipments. It has the option of returning the raw API response, or optionally, it can be used to standardize the USPS and UPS responses so they are easier to work with.

Aaron Guzman 1 Jan 3, 2022
Wrapper for the undocumented CodinGame API. Can be used both synchronously and asynchronlously.

codingame API wrapper Pythonic wrapper for the undocumented CodinGame API. Installation Python 3.6 or higher is required. Install codingame with pip:

Takos 16 Dec 9, 2021
The tool helps to find hidden parameters that can be vulnerable or can reveal interesting functionality that other hunters miss.

The tool helps to find hidden parameters that can be vulnerable or can reveal interesting functionality that other hunters miss. Greater accuracy is achieved thanks to the line-by-line comparison of pages, comparison of response code and reflections.

null 117 Jan 3, 2022