Phone1st Classes
Experimenting with classes.
Work in progress
Classes are based on the variable sizes set in the _variables.scss file and the default colors.
-- Links --
Color
//variables color
dark-gray - color: var(--dark-gray);
medium-gray color: var(--medium-gray);
light-gray - color: var(--light-gray);
first - color: var(--first);
black - color: var(--black);
white - color: var(--white);
font-color color: var(--font-color);
link-color - color: var(--link-color);
hover-color - color: var(--hover-color);
page-bg - color: var(--viewport-bg);
bg - color: var(--bg);
light-bg - color: var(--light-bg);
error - color: var(--error);
alert - color: var(--alert);
success - color: var(--success);
//variables background-color
bg-dark-gray - background-color: var(--dark-gray);
bg-medium-gray background-color: var(--medium-gray);
bg-light-gray - background-color: var(--light-gray);
bg-first - background-color: var(--first);
bg-black - background-color: var(--black);
bg-white - background-color: var(--white);
bg-font-color background-color: var(--font-color);
bg-link-color - background-color: var(--link-color);
bg-hover-color - background-color: var(--hover-color);
bg-page-bg - background-color: var(--viewport-bg);
bg-bg - background-color: var(--bg);
bg-light-bg - background-color: var(--light-bg);
bg-error - background-color: var(--error);
bg-alert - background-color: var(--alert);
bg-success - background-color: var(--success);
//media breakpoints
//none for color as yet
Typography
//font family
font - font-family: $font;
heading-font - font-family: $heading-font;
code-font - font-family: $code-font;
//font-size
normal - $font-size//1.2rem
lead - $lead
secondary - $secondary
third - $third
//see css/base/_typography.scss
p - font-size: clamp($font-size, 1.1385rem + 0.3077vw, 1.35rem);
//headings
//set your css Clamp function settings at https://clamp.font-size.app
//see css/base/_typography.scss
//all clamp functions based on screen width 320px to 1100px
h1 - font-size: clamp(2rem, 0.58rem + 3.77vw, 3rem);
h2 - font-size: clamp(1.75rem, 0.69rem + 2.83vw, 2.5rem);
h3 - font-size: clamp(1.5rem, 0.79rem + 1.89vw, 2rem);
h4 - font-size: clamp(1.25rem, 0.54rem + 1.89vw, 1.75rem);
h5 - font-size: clamp(1.13rem, 0.59rem + 1.42vw, 1.5rem);
h6 - font-size: clamp(1rem, 0.65rem + 0.94vw, 1.25rem);
//big heading sizes - classes and mixins
//see css/class/_typography.scss
bighead-1 - font-size: clamp(2.5rem, 2.2949rem + 1.0256vw, 3rem);
bighead-2 - font-size: clamp(3rem, 2.7949rem + 1.0256vw, 3.5rem);
bighead-3 - font-size: clamp(3.5rem, 3.2949rem + 1.0256vw, 4rem);
bighead-4 - font-size: clamp(4rem, 3.7949rem + 1.0256vw, 4.5rem);
//hyphens
hyphens - hyphens: auto;
hyphens-man - hyphens: manual;
hyphens-none - hyphens: none;
//align
center - text-align: center
left - text-align: left
right - text-align: right
//letter spacing
ls-tight - letter-spacing: -0.025em;
ls-0 - letter-spacing: normal;
ls - letter-spacing: 0.0625rem;
ls-2 - letter-spacing: 0.125rem;
ls-3 - letter-spacing: 0.1875rem;
ls-4 - letter-spacing: 0.25rem;
ls-5 - letter-spacing: 0.3125rem;
ls-6 - letter-spacing: 0.375rem;
ls-7 - letter-spacing: 0.4375rem;
ls-8 - letter-spacing: 0.5rem;
ls-9 - letter-spacing: 0.5625rem;
ls-10 - letter-spacing: 0.625rem;
//line-height
lh - line-height: 1;
lh-1 - line-height: 1.1;
lh-2 - line-height: 1.2;
lh-3 - line-height: 1.3;
lh-4 - line-height: 1.4;
lh-5 - line-height: 1.5;
lh-6 - line-height: 1.6;
lh-7 - line-height: 1.7;
lh-8 - line-height: 1.8;
lh-9 - line-height: 1.9;
lh-20 - line-height: 2;
lh-21 - line-height: 2.1;
//font weight
font100 - font-weight: 100;
font200 - font-weight: 200;
font300 - font-weight: 300;
font400 - font-weight: 400;
font500 - font-weight: 500;
font600 - font-weight: 600;
font700 - font-weight: 700;
font800 - font-weight: 800;
font900 - font-weight: 900;
//font-style
italic - font-style: italic;
not-italic - font-style: normal;
//text-transform
upper - text-transform: uppercase;
lower - text-transform: lowercase;
caps - text-transform: capitalize;
normal-case - text-transform: none;
//media breakpoints
//not included font-family or headings. Headings using clamp function at the moment
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
lead_7 - font-size: $lead;//@700px
center_9 - text-align: center;//@900px
ls-tight_11 - letter-spacing: -0.025em;//@1100px
lh-2_7 - line-height: 1.2;//@700px
font300_9 - font-weight: 300;//@900px
caps_11 text-transform: capitalize;//@1100px
Margin
//centered
centered - margin-left: auto; - margin-right: auto;
//margin top and bottom
my-0 - margin-top: 0; - margin-bottom: 0;
my-1 - margin-top: 0.25rem; - margin-bottom: 0.25rem;
my-2 - margin-top: 0.5rem; - margin-bottom: 0.5rem;
my-3 - margin-top: 0.75rem; - margin-bottom: 0.75rem;
my-4 - margin-top: 1rem; - margin-bottom: 1rem;
my-5 - margin-top: 1.25rem; - margin-bottom: 1.25rem;
my-6 - margin-top: 1.5em; - margin-bottom: 1.5em;
my-7 - margin-top: 1.75rem; - margin-bottom: 1.75rem;
my-8 - margin-top: 2rem; - margin-bottom: 2rem;
my-9 - margin-top: 2.5rem; - margin-bottom: 2.5rem;
my-10 - margin-top: 3rem; - margin-bottom: 3rem;
my-11 - margin-top: 3.5rem; - margin-bottom: 3.5rem;
my-12 - margin-top: 4rem; - margin-bottom: 4rem;
my-13 - margin-top: 4.5rem; - margin-bottom: 4.5rem;
my-14 - margin-top: 5rem; - margin-bottom: 5rem;
my-15 - margin-top: 5.5rem; - margin-bottom: 5.5rem;
//margin left and right
mx-0 - margin-left: 0; - margin-right: 0;
mx-1 - margin-left: 0.25rem; - margin-right: 0.25rem;
mx-2 - margin-left: 0.5rem; - margin-right: 0.5rem;
mx-3 - margin-left: 0.75rem; - margin-right: 0.75rem;
mx-4 - margin-left: 1rem; - margin-right: 1rem;
mx-5 - margin-left: 1.25rem; - margin-right: 1.25rem;
mx-6 - margin-left: 1.5em; - margin-right: 1.5em;
mx-7 - margin-left: 1.75rem; - margin-right: 1.75rem;
mx-8 - margin-left: 2rem; - margin-right: 2rem;
mx-9 - margin-left: 2.5rem; - margin-right: 2.5rem;
mx-10 - margin-left: 3rem; - margin-right: 3rem;
mx-11 - margin-left: 3.5rem; - margin-right: 3.5rem;
mx-12 - margin-left: 4rem; - margin-right: 4rem;
mx-13 - margin-left: 4.5rem; - margin-right: 4.5rem;
mx-14 - margin-left: 5rem; - margin-right: 5rem;
mx-15 - margin-left: 5.5rem; - margin-right: 5.5rem;
//margin top
mt-0 - margin-top: 0;
mt-1 - margin-top: 0.25rem;
mt-2 - margin-top: 0.5rem;
mt-3 - margin-top: 0.75rem;
mt-4 - margin-top: 1rem;
mt-5 - margin-top: 1.25rem;
mt-6 - margin-top: 1.5em;
mt-7 - margin-top: 1.75rem;
mt-8 - margin-top: 2rem;
mt-9 - margin-top: 2.5rem;
mt-10 - margin-top: 3rem;
mt-11 - margin-top: 3.5rem;
mt-12 - margin-top: 4rem;
mt-13 - margin-top: 4.5rem;
mt-14 - margin-top: 5rem;
mt-15 - margin-top: 5.5rem;
//margin bottom
mb-0 - margin-bottom: 0;
mb-1 - margin-bottom: 0.25rem;
mb-2 - margin-bottom: 0.5rem;
mb-3 - margin-bottom: 0.75rem;
mb-4 - margin-bottom: 1rem;
mb-5 - margin-bottom: 1.25rem;
mb-6 - margin-bottom: 1.5em;
mb-7 - margin-bottom: 1.75rem;
mb-8 - margin-bottom: 2rem;
mb-9 - margin-bottom: 2.5rem;
mb-10 - margin-bottom: 3rem;
mb-11 - margin-bottom: 3.5rem;
mb-12 - margin-bottom: 4rem;
mb-13 - margin-bottom: 4.5rem;
mb-14 - margin-bottom: 5rem;
mb-15 - margin-bottom: 5.5rem;
//margin left
ml-0 - margin-left: 0;
ml-1 - margin-left: 0.25rem;
ml-2 - margin-left: 0.5rem;
ml-3 - margin-left: 0.75rem;
ml-4 - margin-left: 1rem;
ml-5 - margin-left: 1.25rem;
ml-6 - margin-left: 1.5em;
ml-7 - margin-left: 1.75rem;
ml-8 - margin-left: 2rem;
ml-9 - margin-left: 2.5rem;
ml-10 - margin-left: 3rem;
ml-11 - margin-left: 3.5rem;
ml-12 - margin-left: 4rem;
ml-13 - margin-left: 4.5rem;
ml-14 - margin-left: 5rem;
ml-15 - margin-left: 5.5rem;
//margin right
mr-0 - margin-right: 0;
mr-1 - margin-right: 0.25rem;
mr-2 - margin-right: 0.5rem;
mr-3 - margin-right: 0.75rem;
mr-4 - margin-right: 1rem;
mr-5 - margin-right: 1.25rem;
mr-6 - margin-right: 1.5em;
mr-7 - margin-right: 1.75rem;
mr-8 - margin-right: 2rem;
mr-9 - margin-right: 2.5rem;
mr-10 - margin-right: 3rem;
mr-11 - margin-right: 3.5rem;
mr-12 - margin-right: 4rem;
mr-13 - margin-right: 4.5rem;
mr-14 - margin-right: 5rem;
mr-15 - margin-right: 5.5rem;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
my-7_7 - margin-top: 1.75rem; - margin-bottom: 1.75rem;//@700px
mx-11_9 - margin-left: 3.5rem; - margin-right: 3.5rem;//@900px
mt-2_11 - margin-top: 0.5rem;//@1100px
Padding
//padding top and bottom
py-0 - padding-top: 0; - padding-bottom: 0;
py-1 - padding-top: 0.25rem; - padding-bottom: 0.25rem;
py-2 - padding-top: 0.5rem; - padding-bottom: 0.5rem;
py-3 - padding-top: 0.75rem; - padding-bottom: 0.75rem;
py-4 - padding-top: 1rem; - padding-bottom: 1rem;
py-5 - padding-top: 1.25rem; - padding-bottom: 1.25rem;
py-6 - padding-top: 1.5em; - padding-bottom: 1.5em;
py-7 - padding-top: 1.75rem; - padding-bottom: 1.75rem;
py-8 - padding-top: 2rem; - padding-bottom: 2rem;
py-9 - padding-top: 2.5rem; - padding-bottom: 2.5rem;
py-10 - padding-top: 3rem; - padding-bottom: 3rem;
py-11 - padding-top: 3.5rem; - padding-bottom: 3.5rem;
py-12 - padding-top: 4rem; - padding-bottom: 4rem;
py-13 - padding-top: 4.5rem; - padding-bottom: 4.5rem;
py-14 - padding-top: 5rem; - padding-bottom: 5rem;
py-15 - padding-top: 5.5rem; - padding-bottom: 5.5rem;
//padding left and right
px-0 - padding-left: 0; - padding-right: 0;
px-1 - padding-left: 0.25rem; - padding-right: 0.25rem;
px-2 - padding-left: 0.5rem; - padding-right: 0.5rem;
px-3 - padding-left: 0.75rem; - padding-right: 0.75rem;
px-4 - padding-left: 1rem; - padding-right: 1rem;
px-5 - padding-left: 1.25rem; - padding-right: 1.25rem;
px-6 - padding-left: 1.5em; - padding-right: 1.5em;
px-7 - padding-left: 1.75rem; - padding-right: 1.75rem;
px-8 - padding-left: 2rem; - padding-right: 2rem;
px-9 - padding-left: 2.5rem; - padding-right: 2.5rem;
px-10 - padding-left: 3rem; - padding-right: 3rem;
px-11 - padding-left: 3.5rem; - padding-right: 3.5rem;
px-12 - padding-left: 4rem; - padding-right: 4rem;
px-13 - padding-left: 4.5rem; - padding-right: 4.5rem;
px-14 - padding-left: 5rem; - padding-right: 5rem;
px-15 - padding-left: 5.5rem; - padding-right: 5.5rem;
//padding top
pt-0 - padding-top: 0;
pt-1 - padding-top: 0.25rem;
pt-3 - padding-top: 0.75rem;
pt-4 - padding-top: 1rem;
pt-5 - padding-top: 1.25rem;
pt-6 - padding-top: 1.5em;
pt-7 - padding-top: 1.75rem;
pt-8 - padding-top: 2rem;
pt-9 - padding-top: 2.5rem;
pt-10 - padding-top: 3rem;
pt-11 - padding-top: 3.5rem;
pt-12 - padding-top: 4rem;
pt-13 - padding-top: 4.5rem;
pt-14 - padding-top: 5rem;
pt-15 - padding-top: 5.5rem;
//padding bottom
pb-0 - padding-bottom: 0;
pb-1 - padding-bottom: 0.25rem;
pb-3 - padding-bottom: 0.75rem;
pb-4 - padding-bottom: 1rem;
pb-5 - padding-bottom: 1.25rem;
pb-6 - padding-bottom: 1.5em;
pb-7 - padding-bottom: 1.75rem;
pb-8 - padding-bottom: 2rem;
pb-9 - padding-bottom: 2.5rem;
pb-10 - padding-bottom: 3rem;
pb-11 - padding-bottom: 3.5rem;
pb-12 - padding-bottom: 4rem;
pb-13 - padding-bottom: 4.5rem;
pb-14 - padding-bottom: 5rem;
pb-15 - padding-bottom: 5.5rem;
//padding left
pl-0 - padding-left: 0;
pl-1 - padding-left: 0.25rem;
pl-3 - padding-left: 0.75rem;
pl-4 - padding-left: 1rem;
pl-5 - padding-left: 1.25rem;
pl-6 - padding-left: 1.5em;
pl-7 - padding-left: 1.75rem;
pl-8 - padding-left: 2rem;
pl-9 - padding-left: 2.5rem;
pl-10 - padding-left: 3rem;
pl-11 - padding-left: 3.5rem;
pl-12 - padding-left: 4rem;
pl-13 - padding-left: 4.5rem;
pl-14 - padding-left: 5rem;
pl-15 - padding-left: 5.5rem;
//padding right
pr-0 - padding-right: 0;
pr-1 - padding-right: 0.25rem;
pr-3 - padding-right: 0.75rem;
pr-4 - padding-right: 1rem;
pr-5 - padding-right: 1.25rem;
pr-6 - padding-right: 1.5em;
pr-7 - padding-right: 1.75rem;
pr-8 - padding-right: 2rem;
pr-9 - padding-right: 2.5rem;
pr-10 - padding-right: 3rem;
pr-11 - padding-right: 3.5rem;
pr-12 - padding-right: 4rem;
pr-13 - padding-right: 4.5rem;
pr-14 - padding-right: 5rem;
pr-15 - padding-right: 5.5rem;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
py-5_7 - padding-top: 1.25rem; - padding-bottom: 1.25rem;//@700px
px-8_9 - padding-left: 2rem; - padding-right: 2rem;//@900px
pt-3_11 - padding-top: 0.75rem;//@1100px
Size
//width
width100 - width: 100%;
width90 - width: 90%;
width80 - width: 80%;
width75 - width: 75%;
width70 - width: 70%;
width60 - width: 60%;
width50 - width: 50%;
width40 - width: 40%;
width30 - width: 30%;
width25 - width: 25%;
width20 - width: 20%;
width10 - width: 10%;
//height
height100 - height: 100%;
//radius
rad - border-radius: $radius; //6px - 0.375rem
rad-m - border-radius: 0.625rem;
rad-s - border-radius: 0.1875rem;
rad-l - border-radius: 0.9375rem;
rad-b - border-radius: 1.25rem;
rad-full - border-radius: 3.125rem;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
width90_7 - width: 90%;//@700px
height100_11 - height: 100%;//@1100px
rad-m_9 - border-radius: 0.625rem;//@900px
Display
//display
block - display: block;
inline - display: inline;
inline-block - display: inline-block;
hidden - display: none;
flex - display: flex;
hide - @include hidden;
show - @include show;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
inline_7 - display: inline;//@700px
hidden_9 - display: none;//@900px
flex_11 - display: flex;//@1100px
Appearance
//cursor
cursor - cursor: default;
cursor-p - cursor: pointer;
cursor-h - cursor: help;
cursor-w - cursor: wait;
cursor-ch - cursor: crosshair;
cursor-na - cursor: not-allowed;
cursor-zi - cursor: zoom-in;
cursor-zo - cursor: zoom-out;
cursor-g - cursor: grab;
//list-style
list-none - list-style: none;
list-disc - list-style: disc;
list-decimal - list-style: decimal;
list-circle - list-style: circle;
list-square - list-style: square;
list-inside - list-style-position: inside;
list-outside - list-style-position: outside;
//border
border - border: $border;
no-border - border: none;
//border width
border-2 - border-width: 0.125rem;
border-3 - border-width: 0.188rem;
border-4 - border-width: 0.25rem;
border-5 - border-width: 0.313rem;
border-6 - border-width: 0.375rem;
border-7 - border-width: 0.438rem;
border-8 - border-width: 0.5rem;
border-9 - border-width: 0.563rem;
border-10 - border-width: 0.625rem;
//border style
border-solid - border-style: solid;
border-dashed - border-style: dashed;
border-groove - border-style: groove;
border-double - border-style: double;
border-dotted - border-style: dotted;
border-ridge - border-style: ridge;
border-inset - border-style: inset;
border-outset - border-style: outset;
border-none - border-style: none;
border-hidden - border-style: hidden;
//border color
border-light - border-color: $light-gray;
border-medium - border-color: $medium-gray;
border-dark - border-color: $dark-gray;
border-first - border-color: $first;
border-black - border-color: $black;
border-white - border-color: $white;
border-trans - border-color: transparent;
//media breakpoints
//no media breaks for cursor and list styles
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
border_7 - border: $border;//@700px
border-3_9 - border-width: 0.188rem;//@900px
border-groove_11 - border-style: groove;//@1100px
Flex
//flex direction
//row is default
flex-row - flex-direction: row;
row-reverse - flex-direction: row-reverse;
flex-col - flex-direction: column;
col-reverse - flex-direction: column-reverse;
//flex-wrap
no-wrap - flex-wrap: nowrap;
wrap - flex-wrap: wrap;
wrap-reverse - flex-wrap: wrap-reverse;
//justify content
justify-start - justify-content: flex-start;
justify-end - justify-content: flex-end;
justify-center - justify-content: center;
justify-between - justify-content: space-between;
justify-around - justify-content: space-around;
justify-evenly - justify-content: space-evenly;
//align-items
items-start - align-items: flex-start;
items-end - align-items: flex-end;
items-center - align-items: center;
items-baseline - align-items: baseline;
items-stretch - align-items: stretch;
//flex container items
grow - flex-grow: 1;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
flex-row_7 - flex-direction: row;//@700px
justify-start_9 - justify-content: flex-start;//@900px
items-center_11 - align-items: center;//@1100px
Gap
//gap
gap-0 - gap: 0;
gap-1 - gap: 0.25rem;
gap-2 - gap: 0.5rem;
gap-3 - gap: 0.75rem;
gap-4 - gap: 1rem;
gap-5 - gap: 1.25rem;
gap-6 - gap: 1.5rem;
gap-7 - gap: 1.75rem;
gap-8 - gap: 2rem;
//gap row
row-gap-0 - row-gap: 0;
row-gap-1 - row-gap: 0.25rem;
row-gap-2 - row-gap: 0.5rem;
row-gap-3 - row-gap: 0.75rem;
row-gap-4 - row-gap: 1rem;
row-gap-5 - row-gap: 1.25rem;
row-gap-6 - row-gap: 1.5rem;
row-gap-7 - row-gap: 1.75rem;
row-gap-8 - row-gap: 2rem;
//gap column
col-gap-0 - column-gap: 0;
col-gap-1 - col-gap: 0.25rem;
col-gap-2 - col-gap: 0.5rem;
col-gap-3 - col-gap: 0.75rem;
col-gap-4 - col-gap: 1rem;
col-gap-5 - col-gap: 1.25rem;
col-gap-6 - col-gap: 1.5rem;
col-gap-7 - col-gap: 1.75rem;
col-gap-8 - col-gap: 2rem;
//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class
//examples
gap-m_7 - gap: $medium-spacer;//@700px
row-gap-m_9 - row-gap: $medium-spacer;//@900px
col-gap-l_11 - column-gap: $large-spacer;//@1100pxHome | About | Test Page | Scss Mixins