Skip to content

Latest commit

 

History

History
137 lines (102 loc) · 2.29 KB

README.md

File metadata and controls

137 lines (102 loc) · 2.29 KB
Raw

FruitUI a moduler styling framework

when you use bootstarp for just the grid system or use the responsive navbar component , if you want to use the grid system you have to load about 15k lines of css code and if you loaded the full bootstarp bundle or if you use the bootstarp grid preset it contains {padding ,margin, etc...} it's about 6k lines of code I don't want all this stuff so I create this library with it.

So you can import just one component like just the navbar or import just the grid system

License

under SIL license

Getting Started

docs https://fruit-ui.vercel.app

npm i spices-fruitui 
# or 
yarn add spices-fruitui
# or 
pnpm add spices-fruitui

fruitUI still on development step there is a lot of stuff to do

  • full RTL support 0%
  • dark mode 10%

Components

base components

  • checkers 99%
  • buttons 90%
  • navbar 50% - 70%
  • forms 30% - 60%
  • card 80%

other components

  • badge 99%
  • table 30%
  • alert 80%
  • slider 70%
  • modal 0%
  • accordion 0%
  • pagination 0%
  • spinners 0%
  • dropdown 0%
  • group 0%

awesome components

  • prototype 100%

experimental

  • css mixin 10%
div {
  @include css((
    bg: #fff,
    p: (
      xs: 10px,
      md: 8px,
      lg: 6px,
    ),
    items: center,
    justify: center,    
  ));
}

output

div {
  background-color: #fff;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 0px) {
  div {
    padding: 10px;
  }
}
@media screen and (min-width: 720px) {
  div {
    padding: 8px;
  }
}
@media screen and (min-width: 960px) {
  div {
    padding: 6px;
  }
}

  • compress 0%

    it takes every property in any class have it and combines them into a single property extender

  • apply mixin 0%

    it takes class utilities names and returns a list of properties

    div {
  @include apply("p-6 w-10 mt-3")
}

    output

    div {
  padding: 1.25rem;
  width:   26.25rem;
  margin-top: 0.5rem;
}

plugins

  • anim 60%

    it is a built in animation libarray

  • debug 30%

    it is a built in debuging and minimal unit testing libarray