Git Product home page Git Product logo

wordpress-technical-test's Introduction

Kinesis Plugin

This is a WordPress plugin that adds custom blocks and Tailwind CSS styling to your site. This plugin developed using the tailpress plugin to fetch the Tailwind CSS styling.

Important Note

This is a basic starter plugin that allows to create custom blocks, but requires further development before it is ready for use.

Description

The Kinesis plugin provides the following:

  • Tailwind CSS framework loaded for styling
  • Custom Gutenberg blocks can be found in src/components/:
    • Hero banner
    • Call to action (CTA)
    • Pricing table
    • Zigzag section
    • Perks section
  • Custom styling for the blocks using Tailwind utilities css/kinesisStyle.css

Usage

PNG of the Blocks

After installing and activating the plugin:

  1. Edit a page or post in the block editor
  2. Add any of the custom blocks from the inserter
  3. Customize the content and styling using the block controls
  4. Publish and view the front-end to see the styled blocks

The Hero banner block can be used at the top of pages as an eye-catching header.

The Pricing table block lets you showcase latest crypto prices.

The Zigzag and Perks blocks help you create sectioned content with images and text.

The CTA block allows you to easily add a call to action button.

Utilize these new blocks along with Tailwind classes to build beautiful pages!

Installation

  1. Upload the plugin /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins screen in WordPress
  3. Use the blocks when editing pages and posts!

Customization

The blocks can be modified by editing the React components in the src/components folder. Additional css styles can be added in css/kinesisStyle.css.

Developer

This plugin was created by Abbas Yusuf. And inspired by freshbrewedweb - tailpress (Tailwind css)

wordpress-technical-test's People

Contributors

abbasyusuf avatar mgibson80380 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.