|-- .page-wrapper
|-- .header-wrapper
|-- .main-wrapper
|-- .footer-wrapper
This style guide page contains styles and components to be used throughout my component collection. Take inspiration from Nikolaibain.com and UI8
Defined and flexible core structure we can use on all or most pages.
|-- .page-wrapper
|-- .header-wrapper
|-- .main-wrapper
|-- .footer-wrapper
|-- .padding-global
|-- .container
HTML tags define default Heading styles.
HTML tags define default text styles.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Heading classes when typography style doesn't match the default HTML tag.
Text classes when typography style doesn't match the default HTML tag.
The different types of buttons used throughout the website.
The 12 column grid system to make it easy to align sections across different screen sizes.
Utility classes we like to use in most of our projects to build faster.
.desktop {
// .desktop-hide
&-hide {
@include mq-medium {
display: none !important;
}
}
// .desktop-show
&-show {
display: none !important;
@include mq-medium {
display: block !important;
}
}
}
.tablet {
// .tablet-hide
&-hide {
@include mq-tablet {
display: none !important;
}
}
// .tablet-show
&-show {
display: none !important;
@include mq-tablet {
display: block !important;
}
}
}
.mobile {
// .mobile-hide
&-hide {
@include mq-tablet-small {
display: none !important;
}
}
// .mobile-show
&-show {
display: none !important;
@include mq-tablet-small {
display: block !important;
}
}
}
$display-dom-values: (
block,
inline-block,
flex,
inline-flex
);
.display {
@each $display_prop in $display-dom-values {
&-#{$display_prop} {
display: $display_prop
}
}
}