Skip to content

Instantly share code, notes, and snippets.

@zackpyle
Last active September 11, 2024 16:22
Show Gist options
  • Save zackpyle/64f9dd05f096265e07570605dc54f695 to your computer and use it in GitHub Desktop.
Save zackpyle/64f9dd05f096265e07570605dc54f695 to your computer and use it in GitHub Desktop.
Starter CSS
/** TABLE OF CONTENTS
---------------------------------------------------------------------------/
1.0 - Global Styles
1.1 - General
1.2 - Selection Highlight
1.3 - Buttons
1.4 - Typography
1.5 - Custom Font Face
1.6 - Hero Styles
1.7 - Forms
2.0 - Layout + Themer
2.1 - Header
2.2 - Navigation
2.3 - Footer
3.0 - Page Specific CSS
3.1 - Homepage
4.0 - Admin Branding
4.1 - Admin Bar
4.2 - Builder Styles
5.0 - Tablet Only Styles
6.0 - Tablet + Mobile Styles
7.0 - Mobile Only Styles
8.0 - Accessibility Styles
/// END TABLE OF CONTENTS
--------------------------------------------------------------------------*/
/** 1.0 - Global Settings
--------------------------------------------------------------------------*/
/* =========================
1.1 - General
========================= */
:root {
--clr-primary: #878787;
--clr-primary-rgb: 135 135 135;
--clr-secondary: #595959;
--clr-secondary-rgb: 89 89 89;
--ff-serif: "Times New Roman", serif;
--ff-sans-serif: Helvetica, sans-serif;
--tr: 0.2s ease-in-out;
--bs: 0 5px 10px rgb(0 0 0 / 0.25);
--bs-small: 0 3px 8px rgb(0 0 0 / 0.25);
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Utility Classes */
.wrapcenter {
text-align: center !important;
}
.centeralign {
margin: 0 auto;
display: block;
}
.inlineblock {
display: inline-block;
}
.flow,
.float {
display: inline-block;
position: relative;
}
/* Flexbox */
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.align-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-flex: 1;
-ms-flex: 1 1 0;
flex: 1 1 0;
}
.align-flex-start,
.align-flex-start .fl-row-content-wrap,
.align-flex-start.fl-row-custom-height.fl-row-align-center
.fl-row-content-wrap {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-items: flex-start;
}
.justify-flex-start,
.justify-flex-start .fl-row-content-wrap,
.justify-flex-start.fl-row-custom-height.fl-row-align-center
.fl-row-content-wrap {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-justify-content: flex-start;
}
.align-flex-center,
.align-flex-center .fl-row-content-wrap,
.align-flex-center.fl-row-custom-height.fl-row-align-center
.fl-row-content-wrap {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: center;
}
.justify-flex-center,
.justify-flex-center .fl-row-content-wrap,
.justify-flex-center.fl-row-custom-height.fl-row-align-center
.fl-row-content-wrap {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-justify-content: center;
}
.align-flex-end,
.align-flex-end .fl-row-content-wrap,
.align-flex-end.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-align-items: flex-end;
}
.justify-flex-end,
.justify-flex-end .fl-row-content-wrap,
.justify-flex-end.fl-row-custom-height.fl-row-align-center
.fl-row-content-wrap {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
/* Sticky Column for Desktop */
@media (min-width: 993px) {
.sticky-col {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 125px;
}
}
/* Fixes margins for when modules pull content from another saved module. */
.fl-builder-module-template {
margin: 0 !important;
max-width: 100% !important;
padding: 0 !important;
}
/* Fixes pixel shifting for row shape layers */
.fl-builder-shape-layer > svg {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
/* =========================
1.2 - Selection Highlight
========================= */
::-moz-selection {
background: rgb(var(--clr-primary-rgb) / 0.75);
color: white;
-webkit-text-fill-color: white;
text-shadow: none;
}
::selection {
background: rgb(var(--clr-primary-rgb) / 0.75);
color: white;
-webkit-text-fill-color: white;
text-shadow: none;
}
/* =========================
1.3 - Buttons
========================= */
button:active,
input[type="button"]:active,
input[type="submit"]:active,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.fl-builder-content .fl-button:active {
top: inherit;
}
/* =========================
1.4 - Typography
========================= */
.ff-sans-serif,
.ff-sans-serif span {
font-family: var(--ff-ss);
}
.ff-serif,
.ff-serif span {
font-family: var(--ff-serif);
}
.two-col .fl-rich-text p {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
-webkit-column-gap:40px;
-moz-column-gap:40px;
column-gap:40px;
}
.two-col .fl-rich-text ul{
position: relative;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.two-col .fl-rich-text li{
position: relative;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
page-break-inside: avoid;
break-inside: avoid;
line-height:1.4;
margin-bottom:15px;
}
/* =========================
1.5 - Custom Font Face
========================= */
@font-face {
font-family: "Font Name";
src: url("/wp-content/themes/bb-theme-child/fonts/font.woff2") format("woff2"),
url("/wp-content/themes/bb-theme-child/fonts/font.woff") format("woff");
font-weight: normal;
}
/* =========================
1.6 - Hero Styles
========================= */
.hero:not(.home-hero) .fl-row-content-wrap {
min-height: 300px;
}
@media (min-width: 768px) and (max-width: 992px) {
.hero:not(.home-hero) .fl-row-content-wrap {
min-height: 250px;
}
}
@media (max-width: 767px) {
.hero:not(.home-hero) .fl-row-content-wrap {
min-height: 200px;
}
}
/* =========================
1.7 - Forms
========================= */
/** END Global Settings
--------------------------------------------------------------------------*/
/** 2.0 - Layout + Themer
--------------------------------------------------------------------------*/
/* =========================
2.1 - Header
========================= */
header {
position: relative;
}
.fl-page-header-wrap {
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15);
z-index: 9999;
}
/* =========================
2.2 - Navigation
========================= */
.menu-item a {
-webkit-transition: var(--tr);
transition: var(--tr);
}
/* =========================
2.3 - Footer
========================= */
/** END Layout
--------------------------------------------------------------------------*/
/** 3.0 - Page Specific CSS
--------------------------------------------------------------------------*/
/* =========================
3.1 - Homepage
========================= */
/** END Page Specific CSS
--------------------------------------------------------------------------*/
/** 4.0 - Admin Branding
--------------------------------------------------------------------------*/
/* =========================
4.1 - Admin Bar
========================= */
#wpadminbar {
background-color: var(--clr-primary);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
background-color: var(--clr-secondary);
}
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
background-color: var(--clr-secondary);
}
#wp-admin-bar-wp-logo,
#wp-admin-bar-rank-math,
#wpadminbar #wp-admin-bar-site-name > .ab-item:before {
display: none;
}
li#wp-admin-bar-wlcms-admin-logo img {
max-width: 30px;
}
/* =========================
4.2 - Builder Styles
========================= */
.fl-builder-bar-title-icon,
#fl-builder-toggle-notifications {
display: none;
}
.fl-builder-bar-title-area {
padding: 4px 4px 4px 15px;
}
/** END Admin Branding
--------------------------------------------------------------------------*/
/** 5.0 - Tablet Only Styles
--------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 992px) {
.tabletcenter {
text-align: center !important;
float: none !important;
}
}
/** 6.0 - Tablet + Mobile Styles
--------------------------------------------------------------------------*/
@media (max-width: 992px) {
/* For reverse tablet, must add tablet_reversed class to ROW */
.tablet_reversed .fl-col-group.fl-col-group-responsive-reversed {
display: -moz-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-box-orient: horizontal;
}
.tablet_reversed .fl-col-group-responsive-reversed .fl-col:nth-of-type(1) {
-webkit-box-ordinal-group: 13;
-ms-flex-order: 12;
order: 12;
}
/* Typography */
.two-col .fl-rich-text {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
/** 7.0 - Mobile Only Styles
--------------------------------------------------------------------------*/
@media (max-width: 767px) {
.mobilecenter {
text-align: center !important;
float: none !important;
}
}
/** 8.0 - Accessibility Styles
--------------------------------------------------------------------------*/
/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-delay: 0.01ms !important;
animation-delay: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
-webkit-transition-delay: 0.01ms !important;
transition-delay: 0.01ms !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment