Pie.css

As Easy As Pie! Pie.css Is A CSS Library That Focuses On Utility And Simple Syntax Like That Of Tailwind Without The Use Of JavaScript.

Pie CSS Tries To Simplify Styling Syntax To Make Styling Your Page Much Faster And Easier. Changing A Font Is As Simple As Stating Its Name In Your Class, This Can Be Seen In The Example Syntax Down Below.

The Utility Portion Is The Only Portion Included In The Pie.min.css, The Rest Such as The Premade Objects Like Alerts, Buttons, Cards etc. Are Available In The Full Version Of The Library.

Example Syntax:

<h1 class="font montserrat light fs-36 white"> Pie.css </h1>

CDN:

<link rel="stylesheet" href="https://cdn.pyrepo.com/pie.min.css">

Features In Next Update

• More Font & BG Colors!
• More Fonts!
• More Margin & Padding Units
• Tips

Future Features

• Responsiveness Syntax For Mobile Devices!

Contact:

PyRepo Email Instagram

Documentation:

I Will Format This Section Property and Syntax Respectively.

When Playing With Fonts And Text, Make Sure To Use The font Class First As Seen In The Example Syntax Above Otherwise It Wont Work.

Font Families Currently Available:

• Montserrat montserrat
• Open Sans opensans
• QuickSand quicksand
• Roboto roboto
• Ma Shen Zheng ma
• Times New Roman times
• Arial arial
• Poppins poppins
• Mulish mulish
• Nunito Sans nunito

Font Size:

• Size Options Are Similar To That Of Microsoft Word fs-8, fs-9, fs-10, etc.

Font Weight:

• 100 thin
• 300 light
• 400 regular
• 500 medium
• 700 bold

Text Decoration:

• text-decoration: dashed; dashed
• text-decoration: dotted; dotted
• text-decoration: double; double
• text-decoration: line-through; line-through
• text-decoration: overline; overline
• text-decoration: solid; solid
• text-decoration: underline; underline
• text-decoration: wavy; wavy
• text-decoration: none; td-none

Text Align:

• text-align: center; center
• text-align: left; left
• text-align: right; right
• text-align: start; start
• text-align: end; end

Text Colors:

• color: white; white
• color: black; black
• color: grey; grey
• color: red; red
• color: blue; blue
• color: green; green
• color: pink; pink
• color: yellow; yellow
• color: orange; orange
• color: purple; purple
• color: aqua; aqua
• color: chartreuse; lime
• color: crimson; crimson
• color: gold; gold
• color: lightblue; lightblue
• color: lightcoral; lightcoral
• color: lightcyan; lightcyan
• color: lightgoldenrodyellow; lightgold
• color: lightgray; lightgray
• color: lightgreen; lightgreen
• color: lightgrey; lightgrey
• color: lightpink; lightpink
• color: lightsalmon; lightsalmon
• color: lightseagreen; lightseagreen
• color: lightskyblue; lightskylue
• color: lightslategray; lightslategray
• color: lightslategrey; lightslategrey
• color: lightsteelblue; lightsteelblue
• color: lightyellow; lightyellow

Border:

• border: 1px; b-1
• border: 2px; b-2
• border: 3px; b-3
• border: 4px; b-4
• border: 5px; b-5

Border Top:

• border-top: 1px; bt-1
• border-top: 2px; bt-2
• border-top: 3px; bt-3
• border-top: 4px; bt-4
• border-top: 5px; bt-5

Border Right:

• border-right: 1px; br-1
• border-right: 2px; br-2
• border-right: 3px; br-3
• border-right: 4px; br-4
• border-right: 5px; br-5

Border Bottom:

• border-bottom: 1px; bb-1
• border-bottom: 2px; bb-2
• border-bottom: 3px; bb-3
• border-bottom: 4px; bb-4
• border-bottom: 5px; bb-5

Border Left:

• border-left: 1px; bl-1
• border-left: 2px; bl-2
• border-left: 3px; bl-3
• border-left: 4px; bl-4
• border-left: 5px; bl-5

Border Radius:

• border-radius: 1px; bra-1
• border-radius: 2px; bra-2
• border-radius: 3px; bra-3
• border-radius: 4px; bra-4
• border-radius: 5px; bra-5
• border-radius: 10px; bra-10
• border-radius: 15px; bra-15
• border-radius: 20px; bra-20
• border-radius: 25px; bra-25
• border-radius: 30px; bra-30

Border Style:

• border-style: dashed; bs-Dashed
• border-style: dotted; bs-Dotted
• border-style: double; bs-Double
• border-style: groove; bs-Groove
• border-style: hidden; bs-Hidden
• border-style: inset; bs-Inset
• border-style: ridge; bs-Ridge
• border-style: outset; bs-Outset
• border-style: solid; bs-Solid

Backgrounds

Background Colors:

• background-color: white; bg-white
• background-color: black; bg-black
• background-color: rgb(36, 36, 36); bg-darkgrey
• background-color: grey; bg-grey
• background-color: pink; bg-pink
• background-color: yellow; bg-yellow
• background-color: orange; bg-orange
• background-color: purple; bg-purple
• background-color: aqua; bg-aqua
• background-color: chartreuse; bg-lime
• background-color: crimson; bg-crimson
• background-color: gold; bg-gold
• background-color: lightblue; bg-lightblue
• background-color: lightcoral; bg-lightcoral
• background-color: lightcyan; bg-lightcyan
• background-color: lightgoldenrodyellow; bg-lightgold
• background-color: lightgray; bg-lightgray
• background-color: lightgreen; bg-lightgreen
• background-color: lightgrey; bg-lightgrey
• background-color: lightpink; bg-lightpink
• background-color: lightsalmon; bg-lightsalmon
• background-color: lightseagreen; bg-lightseagreen
• background-color: lightskyblue; bg-lightskylue
• background-color: lightslategray; bg-lightslategray
• background-color: lightslategrey; bg-lightslategrey
• background-color: lightsteelblue; bg-lightsteelblue
• background-color: lightyellow; bg-lightyellow

Background Attachments:

• background-attachment: fixed; bg-fixed
• background-attachment: scroll; bg-scroll
• background-attachment: local; bg-local

Background Repeat:

• background-repeat: repeat; bg-repeat
• background-repeat: no-repeat; bg-norepeat
• background-repeat: repeat-x; bg-repeatx
• background-repeat: repeat-y; bg-repeaty

Background Size:

• background-size: cover; bg-cover
• background-size: contain; bg-contain

Height:

• Sizes 1 - 100 h-1,h-2,h-100 etc.

Width:

• Sizes 1 - 100 w-1,w-2,w-100 etc.

Margin

Margin Around

• margin: auto; m-auto
• margin: 1%; m-1
• margin: 2%; m-2
• margin: 4%; m-4
• margin: 6%; m-6
• margin: 8%; m-8
• margin: 10%; m-10

Margin Top

• margin-top: 1%; mt-1
• margin-top: 2%; mt-2
• margin-top: 4%; mt-4
• margin-top: 6%; mt-6
• margin-top: 8%; mt-8
• margin-top: 10%; mt-10

Margin Right

• margin-right: 1%; mr-1
• margin-right: 2%; mr-2
• margin-right: 4%; mr-4
• margin-right: 6%; mr-6
• margin-right: 8%; mr-8
• margin-right: 10%; mr-10

Margin Bottom

• margin-bottom: 1%; mb-1
• margin-bottom: 2%; mb-2
• margin-bottom: 4%; mb-4
• margin-bottom: 6%; mb-6
• margin-bottom: 8%; mb-8
• margin-bottom: 10%; mb-10

Margin Left

• margin-left: 1%; ml-1
• margin-left: 2%; ml-2
• margin-left: 4%; ml-4
• margin-left: 6%; ml-6
• margin-left: 8%; ml-8
• margin-left: 10%; ml-10

Padding

Padding Around

• padding: 1%; p-1
• padding: 2%; p-2
• padding: 4%; p-4
• padding: 6%; p-6
• padding: 8%; p-8
• padding: 10%; p-10

Padding Top

• padding-top: 1%; pt-1
• padding-top: 2%; pt-2
• padding-top: 4%; pt-4
• padding-top: 6%; pt-6
• padding-top: 8%; pt-8
• padding-top: 10%; pt-10

Padding Right

• padding-right: 1%; pr-1
• padding-right: 2%; pr-2
• padding-right: 4%; pr-4
• padding-right: 6%; pr-6
• padding-right: 8%; pr-8
• padding-right: 10%; pr-10

Padding Bottom:

• padding-bottom: 1%; pb-1
• padding-bottom: 2%; pb-2
• padding-bottom: 4%; pb-4
• padding-bottom: 6%; pb-6
• padding-bottom: 8%; pb-8
• padding-bottom: 10%; pb-10

Padding Left

• padding-left: 1%; pl-1
• padding-left: 2%; pl-2
• padding-left: 4%; pl-4
• padding-left: 6%; pl-6
• padding-left: 8%; pl-8
• padding-left: 10%; pl-10

Display

• display: block; block
• display: inline; inline
• display: inline-block; inline-block

Display Flex

• display: flex; flex

Flex Direction

• flex-direction: row; fd-row
• flex-direction: column; fd-column

Flex Centering

• align-items: center; fh-center
• justify-content: center; fv-center

Display Grid

• display: grid; grid

Grid Templates

• grid-template-columns: auto; gcol-1x1
• grid-template-columns: auto auto; gcol-1x2
• grid-template-columns: auto auto auto; gcol-1x3
• grid-template-rows: auto; grow-1x1

Grid Gap

• grid-gap: 1px; gap-1
• grid-gap: 2px; gap-2
• grid-gap: 4px; gap-4
• grid-gap: 6px; gap-6
• grid-gap: 8px; gap-8
• grid-gap: 10px; gap-10
• grid-gap: 20px; gap-20

Opacity

• opacity: 0; o-0
• opacity: 0.25; o-25
• opacity: 0.5; o-50
• opacity: 0.75; o-75
• opacity: 1; o-1

Transition Timings

• transition: ease; tr-ease
• transition: ease-in; tr-easeIn
• transition: ease-in-out; tr-easeInOut
• transition: ease-out; tr-easeOut
• transition: linear; tr-linear
• transition: step-end; tr-stepEnd
• transition: step-start; tr-stepStart

Transformations

• transformation: rotateZ(15,30,45,60,75,90,105,120,135,150,165,180,195,210,225,240,255,270,285,200,315,330,345,360); rotate-*
• transformation: rotateX(15,30,45,60,75,90,105,120,135,150,165,180,195,210,225,240,255,270,285,200,315,330,345,360); rotateX-*
• transformation: rotateY(15,30,45,60,75,90,105,120,135,150,165,180,195,210,225,240,255,270,285,200,315,330,345,360); rotateY-*
• transformation: skew(15,30,45,60,75,90); skew-*
• transformation: skewX(15,30,45,60,75,90); skewX-*
• transformation: skewY(15,30,45,60,75,90); skewY-*

Scale Transformations

• transformation: scale(1.5,1.5); scale-onehalftimes
• transformation: scale(2,2); scale-twotimes
• transformation: scale(3,3); scale-threetimes
• transformation: scale(4,4); scale-fourtimes
• transformation: scaleX(1.5,1.5); scaleX-onehalftimes
• transformation: scaleX(2,2); scaleX-twotimes
• transformation: scaleX(3,3); scaleX-threetimes
• transformation: scaleX(4,4); scaleX-fourtimes
• transformation: scaleY(1.5,1.5); scaleY-onehalftimes
• transformation: scaleY(2,2); scaleY-twotimes
• transformation: scaleY(3,3); scaleY-threetimes
• transformation: scaleY(4,4); scaleY-fourtimes