How to create and use a Particle Class.

Learn 4 rules and you are ready to use particle css in your project. It is really easy and is same like wrinting your own css.

Rule 1 - How to make a particle class

A particle class consists of letter P in the start with first letter of css property followed by first letter of css value, ans seperared using dashes

P-(first letter of css property)(first letter of that property's value)
Example for {Display:block}
You need to use P-db

Rule 2 - If property value contains number values

If element has a specified number value it would be sepearted with a slash

P-(first letter of css property)(property value)
Example for {Top:0}
You need to use P-t0

percentage values are defined with p eg. 100% will be 100p and pixel values with px eg. 2px and the negative values will be represed same but with a letter n at the end eg. 100pn will be used for -100%

Rule 3

If there is a backslash (-) in property name

P-(first letter of css property)(first letter after backslash)-(property value)
Example for {Border-radius:4px}
You need to use P-br4px

Rule 4

If the value is dependent on specific property. eg. flex-wrap can't be used on an element without display flex

(P class for the dependent property)-(backslash first letter of property)(first letter of property value)
Example for {flex-wrap:wrap}
You need to use P-df-fww

If you like the Post

Subscribe to newsletter

Get every single post delivered first to you :)

Delivered by FeedBurner

Sharing Is Caring