knight-wings

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.