Spacing

Padding-Margin   

padding and margin classes in all directions:

.p-1 .m-1: 0.25rem => 4px

.p-2 .m-2: 0.5rem => 8px

.p-3 .m-3: 0.75rem => 12px

.p-4 .m-4: 1rem => 16px

.p-5 .m-5: 1.25rem => 20px

.p-6 .m-6: 1.5rem => 24px

.p-7 .m-7: 2rem => 32px

.p-8 .m-8: 2.5rem => 40px

.p-9 .m-9: 3rem => 48px

.p-10 .m-10: 4rem => 64px

Copy
Edit
<!-- components/Spacing/Padding-Margin.html --> <p class="gray-800 mb-2">.p-1 .m-1: 0.25rem => 4px</p> <p class="gray-800 mb-2">.p-2 .m-2: 0.5rem => 8px</p> <p class="gray-800 mb-2">.p-3 .m-3: 0.75rem => 12px</p> <p class="gray-800 mb-2">.p-4 .m-4: 1rem => 16px</p> <p class="gray-800 mb-2">.p-5 .m-5: 1.25rem => 20px</p> <p class="gray-800 mb-2">.p-6 .m-6: 1.5rem => 24px</p> <p class="gray-800 mb-2">.p-7 .m-7: 2rem => 32px</p> <p class="gray-800 mb-2">.p-8 .m-8: 2.5rem => 40px</p> <p class="gray-800 mb-2">.p-9 .m-9: 3rem => 48px</p> <p class="gray-800 mb-2">.p-10 .m-10: 4rem => 64px</p>
Copy
Copy
Edit
/* scss/Spacing/_Padding-Margin.scss */ .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.25rem !important; } .p-6 { padding: 1.5rem !important; } .p-7 { padding: 2rem !important; } .p-8 { padding: 2.5rem !important; } .p-9 { padding: 3rem !important; } .p-10 { padding: 4rem !important; } .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 0.75rem !important; } .m-4 { margin: 1rem !important; } .m-5 { margin: 1.25rem !important; } .m-6 { margin: 1.5rem !important; } .m-7 { margin: 2rem !important; } .m-8 { margin: 2.5rem !important; } .m-9 { margin: 3rem !important; } .m-10 { margin: 4rem !important; }
Cancel

PaddingRight-MarginRight   

.pr-1 .mr-1: 0.25rem => 4px

.pr-2 .mr-2: 0.5rem => 8px

.pr-3 .mr-3: 0.75rem => 12px

.pr-4 .mr-4: 1rem => 16px

.pr-5 .mr-5: 1.25rem => 20px

.pr-6 .mr-6: 1.5rem => 24px

.pr-7 .mr-7: 2rem => 32px

.pr-8 .mr-8: 2.5rem => 40px

.pr-9 .mr-9: 3rem => 48px

.pr-10 .mr-10: 4rem => 64px

.mr-auto: auto => auto

Copy
Edit
<!-- components/Spacing/PaddingRight-MarginRight.htmr --> <p class="gray-800 mb-2">.pr-1 .mr-1: 0.25rem => 4px</p> <p class="gray-800 mb-2">.pr-2 .mr-2: 0.5rem => 8px</p> <p class="gray-800 mb-2">.pr-3 .mr-3: 0.75rem => 12px</p> <p class="gray-800 mb-2">.pr-4 .mr-4: 1rem => 16px</p> <p class="gray-800 mb-2">.pr-5 .mr-5: 1.25rem => 20px</p> <p class="gray-800 mb-2">.pr-6 .mr-6: 1.5rem => 24px</p> <p class="gray-800 mb-2">.pr-7 .mr-7: 2rem => 32px</p> <p class="gray-800 mb-2">.pr-8 .mr-8: 2.5rem => 40px</p> <p class="gray-800 mb-2">.pr-9 .mr-9: 3rem => 48px</p> <p class="gray-800 mb-2">.pr-10 .mr-10: 4rem => 64px</p> <p class="gray-800 mb-2">.mr-auto: auto => auto</p>
Copy
Copy
Edit
/* scss/Spacing/_PaddingRight-MarginRight.scss */ .pr-0 { @include dir-padding-right(0 !important); } .pr-1 { @include dir-padding-right(0.25rem !important); } .pr-2 { @include dir-padding-right(0.5rem !important); } .pr-3 { @include dir-padding-right(0.75rem !important); } .pr-4 { @include dir-padding-right(1rem !important); } .pr-5 { @include dir-padding-right(1.25rem !important); } .pr-6 { @include dir-padding-right(1.5rem !important); } .pr-7 { @include dir-padding-right(2rem !important); } .pr-8 { @include dir-padding-right(2.5rem !important); } .pr-9 { @include dir-padding-right(3rem !important); } .pr-10 { @include dir-padding-right(4rem !important); } .mr-0 { @include dir-margin-right(0 !important); } .mr-1 { @include dir-margin-right(0.25rem !important); } .mr-2 { @include dir-margin-right(0.5rem !important); } .mr-3 { @include dir-margin-right(0.75rem !important); } .mr-4 { @include dir-margin-right(1rem !important); } .mr-5 { @include dir-margin-right(1.25rem !important); } .mr-6 { @include dir-margin-right(1.5rem !important); } .mr-7 { @include dir-margin-right(2rem !important); } .mr-8 { @include dir-margin-right(2.5rem !important); } .mr-9 { @include dir-margin-right(3rem !important); } .mr-10 { @include dir-margin-right(4rem !important); } .mr-auto { @include dir-margin-right(auto !important); }
Cancel

PaddingLeft-MarginLeft   

.pl-1 .ml-1: 0.25rem => 4px

.pl-2 .ml-2: 0.5rem => 8px

.pl-3 .ml-3: 0.75rem => 12px

.pl-4 .ml-4: 1rem => 16px

.pl-5 .ml-5: 1.25rem => 20px

.pl-6 .ml-6: 1.5rem => 24px

.pl-7 .ml-7: 2rem => 32px

.pl-8 .ml-8: 2.5rem => 40px

.pl-9 .ml-9: 3rem => 48px

.pl-10 .ml-10: 4rem => 64px

.ml-auto: auto => auto

Copy
Edit
<!-- components/Spacing/PaddingLeft-MarginLeft.html --> <p class="gray-800 mb-2">.pl-1 .ml-1: 0.25rem => 4px</p> <p class="gray-800 mb-2">.pl-2 .ml-2: 0.5rem => 8px</p> <p class="gray-800 mb-2">.pl-3 .ml-3: 0.75rem => 12px</p> <p class="gray-800 mb-2">.pl-4 .ml-4: 1rem => 16px</p> <p class="gray-800 mb-2">.pl-5 .ml-5: 1.25rem => 20px</p> <p class="gray-800 mb-2">.pl-6 .ml-6: 1.5rem => 24px</p> <p class="gray-800 mb-2">.pl-7 .ml-7: 2rem => 32px</p> <p class="gray-800 mb-2">.pl-8 .ml-8: 2.5rem => 40px</p> <p class="gray-800 mb-2">.pl-9 .ml-9: 3rem => 48px</p> <p class="gray-800 mb-2">.pl-10 .ml-10: 4rem => 64px</p> <p class="gray-800 mb-2">.ml-auto: auto => auto</p>
Copy
Copy
Edit
/* scss/Spacing/_PaddingLeft-MarginLeft.scss */ .pl-0 { @include dir-padding-left(0 !important); } .pl-2 { @include dir-padding-left(0.5rem !important); } .pl-3 { @include dir-padding-left(0.75rem !important); } .pl-4 { @include dir-padding-left(1rem !important); } .pl-5 { @include dir-padding-left(1.25rem !important); } .pl-6 { @include dir-padding-left(1.5rem !important); } .pl-7 { @include dir-padding-left(2rem !important); } .pl-8 { @include dir-padding-left(2.5rem !important); } .pl-9 { @include dir-padding-left(3rem !important); } .pl-10 { @include dir-padding-left(4rem !important); } .ml-0 { @include dir-margin-left(0 !important); } .ml-1 { @include dir-margin-left(0.25rem !important); } .ml-2 { @include dir-margin-left(0.5rem !important); } .ml-3 { @include dir-margin-left(0.75rem !important); } .ml-4 { @include dir-margin-left(1rem !important); } .ml-5 { @include dir-margin-left(1.25rem !important); } .ml-6 { @include dir-margin-left(1.5rem !important); } .ml-7 { @include dir-margin-left(2rem !important); } .ml-8 { @include dir-margin-left(2.5rem !important); } .ml-9 { @include dir-margin-left(3rem !important); } .ml-10 { @include dir-margin-left(4rem !important); } .ml-auto { @include dir-margin-left(auto !important); }
Cancel

PaddingTop-MarginTop   

.pt-1 .mt-1: 0.25rem => 4px

.pt-2 .mt-2: 0.5rem => 8px

.pt-3 .mt-3: 0.75rem => 12px

.pt-4 .mt-4: 1rem => 16px

.pt-5 .mt-5: 1.25rem => 20px

.pt-6 .mt-6: 1.5rem => 24px

.pt-7 .mt-7: 2rem => 32px

.pt-8 .mt-8: 2.5rem => 40px

.pt-9 .mt-9: 3rem => 48px

.pt-10 .mt-10: 4rem => 64px

Copy
Edit
<!-- components/Spacing/PaddingTop-MarginTop.html --> <p class="gray-800 mb-2">.pt-1 .mt-1: 0.25rem => 4px</p> <p class="gray-800 mb-2">.pt-2 .mt-2: 0.5rem => 8px</p> <p class="gray-800 mb-2">.pt-3 .mt-3: 0.75rem => 12px</p> <p class="gray-800 mb-2">.pt-4 .mt-4: 1rem => 16px</p> <p class="gray-800 mb-2">.pt-5 .mt-5: 1.25rem => 20px</p> <p class="gray-800 mb-2">.pt-6 .mt-6: 1.5rem => 24px</p> <p class="gray-800 mb-2">.pt-7 .mt-7: 2rem => 32px</p> <p class="gray-800 mb-2">.pt-8 .mt-8: 2.5rem => 40px</p> <p class="gray-800 mb-2">.pt-9 .mt-9: 3rem => 48px</p> <p class="gray-800 mb-2">.pt-10 .mt-10: 4rem => 64px</p>
Copy
Copy
Edit
/* scss/Spacing/_PaddingTop-MarginTop.scss */ .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 0.75rem !important; } .pt-4 { padding-top: 1rem !important; } .pt-5 { padding-top: 1.25rem !important; } .pt-6 { padding-top: 1.5rem !important; } .pt-7 { padding-top: 2rem !important; } .pt-8 { padding-top: 2.5rem !important; } .pt-9 { padding-top: 3rem !important; } .pt-10 { padding-top: 4rem !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-5 { margin-top: 1.25rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mt-7 { margin-top: 2rem !important; } .mt-8 { margin-top: 2.5rem !important; } .mt-9 { margin-top: 3rem !important; } .mt-10 { margin-top: 4rem !important; }
Cancel

PaddingBottom-MarginBottom   

.pb-1 .mb-1: 0.25rem => 4px

.pb-2 .mb-2: 0.5rem => 8px

.pb-3 .mb-3: 0.75rem => 12px

.pb-4 .mb-4: 1rem => 16px

.pb-5 .mb-5: 1.25rem => 20px

.pb-6 .mb-6: 1.5rem => 24px

.pb-7 .mb-7: 2rem => 32px

.pb-8 .mb-8: 2.5rem => 40px

.pb-9 .mb-9: 3rem => 48px

.pb-10 .mb-10: 4rem => 64px

Copy
Edit
<!-- components/Spacing/PaddingBottom-MarginBottom.html --> <p class="gray-800 mb-2">.pb-1 .mb-1: 0.25rem => 4px</p> <p class="gray-800 mb-2">.pb-2 .mb-2: 0.5rem => 8px</p> <p class="gray-800 mb-2">.pb-3 .mb-3: 0.75rem => 12px</p> <p class="gray-800 mb-2">.pb-4 .mb-4: 1rem => 16px</p> <p class="gray-800 mb-2">.pb-5 .mb-5: 1.25rem => 20px</p> <p class="gray-800 mb-2">.pb-6 .mb-6: 1.5rem => 24px</p> <p class="gray-800 mb-2">.pb-7 .mb-7: 2rem => 32px</p> <p class="gray-800 mb-2">.pb-8 .mb-8: 2.5rem => 40px</p> <p class="gray-800 mb-2">.pb-9 .mb-9: 3rem => 48px</p> <p class="gray-800 mb-2">.pb-10 .mb-10: 4rem => 64px</p>
Copy
Copy
Edit
/* scss/Spacing/_PaddingBottom-MarginBottom.scss */ .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 0.75rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pb-5 { padding-bottom: 1.25rem !important; } .pb-6 { padding-bottom: 1.5rem !important; } .pb-7 { padding-bottom: 2rem !important; } .pb-8 { padding-bottom: 2.5rem !important; } .pb-9 { padding-bottom: 3rem !important; } .pb-10 { padding-bottom: 4rem !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-5 { margin-bottom: 1.25rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mb-7 { margin-bottom: 2rem !important; } .mb-8 { margin-bottom: 2.5rem !important; } .mb-9 { margin-bottom: 3rem !important; } .mb-10 { margin-bottom: 4rem !important; }
Cancel