Knight Wings v1

Get start the CSS styling with Knight-wings library.

This CSS library provides easy to write styling quicker and easier to use with dynamic styles and functionality. We will try to improve and better performace with new stylings and components in our next update.

GET START

To install package

npm i knight-wings

Add this to your root HTML file.

inside head tag.

  <link rel="stylesheet" href="node_modules/knight-wings/styling.css">

inside body tag.

  <script src="node_modules/knight-wings/scripting.js" async defer></script>

or

  <script src="node_modules/knight-wings/scripting.js" ></script>

note that you have installed npm in yur system. It is install by nodejs https://nodejs.org/

Usage/Examples

import Component from 'my-project'

function App() {
  return <Component />
}

Color Reference

op-colors

| Color | Hex | | ----------------- | ------------------------------------------------------------------ | | orange | op-color-orange| | banana | op-color-banana | |grapes | op-color-grapes | | strawberry | op-color-strawberry| | berry | op-color-berry | | danger | op-color-danger | | success | op-color-success | | alert | op-color-alert | | warn | op-color-warn | | alert | op-color-alert | | dark | op-color-dark | | grey | op-color-grey | | prime | op-color-prime |

Demo

size

class="sz-h-(height_in_px)"
class="sz-w-(width_in_px)"

class="sz-w-100"

color

class="color-(color_value)"

flexbox

class="flexbox-(position)-(gap_in_px)"

class="flexbox-cen-20"

more

Alignment of element

cen(center)

lt(left)

rt(right)

buttons

btn-filled-(opcolors)

btn-outline-(opcolors)

border radius

bd-radius-(in_px)

text color && text Alignment

txt-(Alignment i.e: cen)

margin

t-(top in px)

l-(top in px)

r-(top in px)

b-(top in px)

Proper documentation will come soon on official site.