Skip to content
This repository has been archived by the owner on Apr 6, 2024. It is now read-only.

Latest commit

 

History

History
144 lines (139 loc) · 6.71 KB

RATIO.md

File metadata and controls

144 lines (139 loc) · 6.71 KB
Raw

defaultRatio only example

Classes resize between screen sizes screens.sm and screens.xl

maxWidth

Class Properties Downscaling Ratio
.fl:max-w-xs max-width: 20rem 2
.fl:max-w-sm max-width: 24rem 2
.fl:max-w-md max-width: 28rem 2
.fl:max-w-lg max-width: 32rem 2
.fl:max-w-xl max-width: 36rem 2
.fl:max-w-2xl max-width: 42rem 2
.fl:max-w-3xl max-width: 48rem 2
.fl:max-w-4xl max-width: 56rem 2
.fl:max-w-5xl max-width: 64rem 2
.fl:max-w-6xl max-width: 72rem 2

padding

Class Properties Downscaling Ratio
.fl:p-1 padding: 0.25rem 1.5
.fl:p-2 padding: 0.5rem 1.5
.fl:p-3 padding: 0.75rem 1.5
.fl:p-4 padding: 1rem 1.5
.fl:p-5 padding: 1.25rem 1.5
.fl:p-6 padding: 1.5rem 1.5
.fl:p-8 padding: 2rem 1.5
.fl:p-10 padding: 2.5rem 1.5
.fl:p-12 padding: 3rem 1.5
.fl:p-16 padding: 4rem 1.5
.fl:p-20 padding: 5rem 1.5
.fl:p-24 padding: 6rem 1.5
.fl:p-32 padding: 8rem 1.5
.fl:p-40 padding: 10rem 1.5
.fl:p-48 padding: 12rem 1.5
.fl:p-56 padding: 14rem 1.5
.fl:p-64 padding: 16rem 1.5
.fl:py-1 padding-top: 0.25rem
padding-bottom: 0.25rem		 1.5
.fl:py-2 padding-top: 0.5rem
padding-bottom: 0.5rem		 1.5
.fl:py-3 padding-top: 0.75rem
padding-bottom: 0.75rem		 1.5
.fl:py-4 padding-top: 1rem
padding-bottom: 1rem		 1.5
.fl:py-5 padding-top: 1.25rem
padding-bottom: 1.25rem		 1.5
.fl:py-6 padding-top: 1.5rem
padding-bottom: 1.5rem		 1.5
.fl:py-8 padding-top: 2rem
padding-bottom: 2rem		 1.5
.fl:py-10 padding-top: 2.5rem
padding-bottom: 2.5rem		 1.5
.fl:py-12 padding-top: 3rem
padding-bottom: 3rem		 1.5
.fl:py-16 padding-top: 4rem
padding-bottom: 4rem		 1.5
.fl:py-20 padding-top: 5rem
padding-bottom: 5rem		 1.5
.fl:py-24 padding-top: 6rem
padding-bottom: 6rem		 1.5
.fl:py-32 padding-top: 8rem
padding-bottom: 8rem		 1.5
.fl:py-40 padding-top: 10rem
padding-bottom: 10rem		 1.5
.fl:py-48 padding-top: 12rem
padding-bottom: 12rem		 1.5
.fl:py-56 padding-top: 14rem
padding-bottom: 14rem		 1.5
.fl:py-64 padding-top: 16rem
padding-bottom: 16rem		 1.5
.fl:py-px padding-top: 1px
padding-bottom: 1px		 1.5
.fl:px-0 padding-right: 0
padding-left: 0		 1.5
.fl:px-1 padding-right: 0.25rem
padding-left: 0.25rem		 1.5
.fl:px-2 padding-right: 0.5rem
padding-left: 0.5rem		 1.5
.fl:px-3 padding-right: 0.75rem
padding-left: 0.75rem		 1.5
.fl:px-4 padding-right: 1rem
padding-left: 1rem		 1.5
.fl:px-5 padding-right: 1.25rem
padding-left: 1.25rem		 1.5
.fl:px-6 padding-right: 1.5rem
padding-left: 1.5rem		 1.5
.fl:px-8 padding-right: 2rem
padding-left: 2rem		 1.5
.fl:px-10 padding-right: 2.5rem
padding-left: 2.5rem		 1.5
.fl:px-12 padding-right: 3rem
padding-left: 3rem		 1.5
.fl:px-16 padding-right: 4rem
padding-left: 4rem		 1.5
.fl:px-20 padding-right: 5rem
padding-left: 5rem		 1.5
.fl:px-24 padding-right: 6rem
padding-left: 6rem		 1.5
.fl:px-32 padding-right: 8rem
padding-left: 8rem		 1.5
.fl:px-40 padding-right: 10rem
padding-left: 10rem		 1.5
.fl:px-48 padding-right: 12rem
padding-left: 12rem		 1.5
.fl:px-56 padding-right: 14rem
padding-left: 14rem		 1.5
.fl:px-64 padding-right: 16rem
padding-left: 16rem		 1.5
.fl:pt-1 padding-top: 0.25rem 1.5
.fl:pt-2 padding-top: 0.5rem 1.5
.fl:pt-3 padding-top: 0.75rem 1.5
.fl:pt-4 padding-top: 1rem 1.5
.fl:pt-5 padding-top: 1.25rem 1.5
.fl:pt-6 padding-top: 1.5rem 1.5
.fl:pt-8 padding-top: 2rem 1.5
.fl:pt-10 padding-top: 2.5rem 1.5
.fl:pt-12 padding-top: 3rem 1.5
.fl:pt-16 padding-top: 4rem 1.5
.fl:pt-20 padding-top: 5rem 1.5
.fl:pt-24 padding-top: 6rem 1.5
.fl:pt-32 padding-top: 8rem 1.5
.fl:pt-40 padding-top: 10rem 1.5
.fl:pt-48 padding-top: 12rem 1.5
.fl:pt-56 padding-top: 14rem 1.5
.fl:pt-64 padding-top: 16rem 1.5
.fl:pr-1 padding-right: 0.25rem 1.5
.fl:pr-2 padding-right: 0.5rem 1.5
.fl:pr-3 padding-right: 0.75rem 1.5
.fl:pr-4 padding-right: 1rem 1.5
.fl:pr-5 padding-right: 1.25rem 1.5
.fl:pr-6 padding-right: 1.5rem 1.5
.fl:pr-8 padding-right: 2rem 1.5
.fl:pr-10 padding-right: 2.5rem 1.5
.fl:pr-12 padding-right: 3rem 1.5
.fl:pr-16 padding-right: 4rem 1.5
.fl:pr-20 padding-right: 5rem 1.5
.fl:pr-24 padding-right: 6rem 1.5
.fl:pr-32 padding-right: 8rem 1.5
.fl:pr-40 padding-right: 10rem 1.5
.fl:pr-48 padding-right: 12rem 1.5
.fl:pr-56 padding-right: 14rem 1.5
.fl:pr-64 padding-right: 16rem 1.5
.fl:pb-1 padding-bottom: 0.25rem 1.5
.fl:pb-2 padding-bottom: 0.5rem 1.5
.fl:pb-3 padding-bottom: 0.75rem 1.5
.fl:pb-4 padding-bottom: 1rem 1.5
.fl:pb-5 padding-bottom: 1.25rem 1.5
.fl:pb-6 padding-bottom: 1.5rem 1.5
.fl:pb-8 padding-bottom: 2rem 1.5
.fl:pb-10 padding-bottom: 2.5rem 1.5
.fl:pb-12 padding-bottom: 3rem 1.5
.fl:pb-16 padding-bottom: 4rem 1.5
.fl:pb-20 padding-bottom: 5rem 1.5
.fl:pb-24 padding-bottom: 6rem 1.5
.fl:pb-32 padding-bottom: 8rem 1.5
.fl:pb-40 padding-bottom: 10rem 1.5
.fl:pb-48 padding-bottom: 12rem 1.5
.fl:pb-56 padding-bottom: 14rem 1.5
.fl:pb-64 padding-bottom: 16rem 1.5
.fl:pl-1 padding-left: 0.25rem 1.5
.fl:pl-2 padding-left: 0.5rem 1.5
.fl:pl-3 padding-left: 0.75rem 1.5
.fl:pl-4 padding-left: 1rem 1.5
.fl:pl-5 padding-left: 1.25rem 1.5
.fl:pl-6 padding-left: 1.5rem 1.5
.fl:pl-8 padding-left: 2rem 1.5
.fl:pl-10 padding-left: 2.5rem 1.5
.fl:pl-12 padding-left: 3rem 1.5
.fl:pl-16 padding-left: 4rem 1.5
.fl:pl-20 padding-left: 5rem 1.5
.fl:pl-24 padding-left: 6rem 1.5
.fl:pl-32 padding-left: 8rem 1.5
.fl:pl-40 padding-left: 10rem 1.5
.fl:pl-48 padding-left: 12rem 1.5
.fl:pl-56 padding-left: 14rem 1.5
.fl:pl-64 padding-left: 16rem 1.5