PCUI

PCUI Spacing

Documentation and example using Spacing for PCUI

Notation

The classes are named using the format {Name} - {Type} - {Size} - {Location(optional)}

Where type is one of:

sp- for {name} spacing
m- for classes that set margin
p- for classes that set padding

Where sizeis one of:

xs- for classes that set 4px
s- for classes that set 8px
m- for classes that set 16px
l- for classes that set 20px
xl- for classes that set 28px
2xl- for classes that set 40px
3xl- for classes that set 58px

Where locationis one of:

t- for classes that set Top
b- for classes that set Bottom
r- for classes that set Right
l- for classes that set Left
tb- for classes that set Top & Bottom
rl- for classes that set Right & Left

Notation

Margin and Padding for Top and Bottom of the element

Here are some example of classes:

Margin 4px

Margin 8px

Margin 16px

Margin 20px

Margin 28px

Margin 40px

Margin 58px

Copied successfully!


                    <div class="pcui">

                    <div class="sp-m-xs">Container</div>

                    <div class="sp-m-s>Container</div>

                    <div class="sp-m-m">Container</div>

                    <div class="sp-m-l>Container</div>

                    <div class="sp-m-xl">Container</div>

                    <div class="sp-m-2xl">Container</div>

                    <div class="sp-m-3xl">Container</div>

                    </div>

Margin top & Bottom 4px

Margin right & left 8px

Copied successfully!


                    <div class="pcui">

                    <div class="sp-m-xs-tb">Container</div>

                    <div class="sp-m-s-rl">Container</div>

                    </div>

Padding top & bottom 4px

Padding right & left 8px

Copied successfully!


                    <div class="pcui">

                    <div class="sp-p-xs-tb">Container</div>

                    <div class="sp-p-s-rl">Container</div>

                    </div>

Margin bottom 40px

Margin right 28px

Copied successfully!


                    <div class="pcui">

                    <div class="sp-m-2xl-b">Container</div>

                    <div class="sp-m-xl-r">Container</div>

                    </div>

Padding bottom 58px

Padding left 40px

Copied successfully!


                    <div class="pcui">

                    <div class="sp-p-3xl-b">Container</div>

                    <div class="sp-p-2xl-l>Container</div>

                    </div>