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
  • Some suggestions

    Some suggestions

    Hi. Ilike the work you are doing on this repo and would like to suggest the following:

    1. I would like to be added as a maintainer of this project to ensure the longevity of the project.
    2. I would suggest you consider adding this project to the list of wagtail packages for more visibility.
    3. I would like to take this project a notch higher with some new blocks and extras.
    4. Thanks.
    opened by Whizfactor 0
Releases(0.0.3)
Owner
Krishna Prasad K
Web developer | Django | React
Krishna Prasad K
Free components that wrap up Python into Delphi and Lazarus (FPC)

Python for Delphi (P4D) is a set of free components that wrap up the Python DLL into Delphi and Lazarus (FPC). They let you easily execute Python scri

null 703 Aug 3, 2022
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 86 Aug 8, 2022
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 24 Jun 29, 2022
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 Jul 16, 2022
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 27 May 23, 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.6k Aug 12, 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 63 Jul 27, 2022
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 53 Jul 21, 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 4 Jun 25, 2022
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 2 Jul 1, 2022
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 5 Jun 8, 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 9 Apr 13, 2022
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 0 Mar 29, 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 19 Jun 20, 2022