From 6cac73fcafb9227c19d106d48bb0d980bc56776f Mon Sep 17 00:00:00 2001 From: Joe Snell Date: Thu, 8 Feb 2024 14:17:32 -0800 Subject: [PATCH 1/2] add new reset file - refactor css file structure organizatoin - add new utilities for css --- .../{global => 01-settings}/colors.css | 0 .../frontend/01-settings/custom-selectors.css | 7 ++ .../{global => 01-settings}/index.css | 2 +- .../{global => 01-settings}/media-queries.css | 0 .../assets/css/frontend/02-global/index.css | 2 + .../assets/css/frontend/02-global/mixins.css | 18 +++++ .../assets/css/frontend/02-global/reset.css | 76 +++++++++++++++++++ .../css/frontend/{base => 03-base}/button.css | 1 + .../css/frontend/{base => 03-base}/index.css | 0 .../css/frontend/{base => 03-base}/link.css | 1 + .../prefers-reduced-motion.css | 0 .../css/frontend/{base => 03-base}/utils.css | 0 .../frontend/{base => 03-base}/wordpress.css | 0 .../frontend/{layout => 04-layout}/index.css | 0 .../{templates => 05-templates}/index.css | 0 .../{components => 06-components}/index.css | 0 .../skip-to-content-link.css | 0 .../assets/css/frontend/global/reset.css | 13 ---- .../10up-theme/assets/css/frontend/style.css | 13 ++-- 19 files changed, 114 insertions(+), 19 deletions(-) rename themes/10up-theme/assets/css/frontend/{global => 01-settings}/colors.css (100%) create mode 100644 themes/10up-theme/assets/css/frontend/01-settings/custom-selectors.css rename themes/10up-theme/assets/css/frontend/{global => 01-settings}/index.css (62%) mode change 100755 => 100644 rename themes/10up-theme/assets/css/frontend/{global => 01-settings}/media-queries.css (100%) create mode 100755 themes/10up-theme/assets/css/frontend/02-global/index.css create mode 100644 themes/10up-theme/assets/css/frontend/02-global/mixins.css create mode 100644 themes/10up-theme/assets/css/frontend/02-global/reset.css rename themes/10up-theme/assets/css/frontend/{base => 03-base}/button.css (93%) rename themes/10up-theme/assets/css/frontend/{base => 03-base}/index.css (100%) rename themes/10up-theme/assets/css/frontend/{base => 03-base}/link.css (93%) rename themes/10up-theme/assets/css/frontend/{base => 03-base}/prefers-reduced-motion.css (100%) rename themes/10up-theme/assets/css/frontend/{base => 03-base}/utils.css (100%) rename themes/10up-theme/assets/css/frontend/{base => 03-base}/wordpress.css (100%) rename themes/10up-theme/assets/css/frontend/{layout => 04-layout}/index.css (100%) rename themes/10up-theme/assets/css/frontend/{templates => 05-templates}/index.css (100%) rename themes/10up-theme/assets/css/frontend/{components => 06-components}/index.css (100%) rename themes/10up-theme/assets/css/frontend/{components => 06-components}/skip-to-content-link.css (100%) delete mode 100644 themes/10up-theme/assets/css/frontend/global/reset.css diff --git a/themes/10up-theme/assets/css/frontend/global/colors.css b/themes/10up-theme/assets/css/frontend/01-settings/colors.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/global/colors.css rename to themes/10up-theme/assets/css/frontend/01-settings/colors.css diff --git a/themes/10up-theme/assets/css/frontend/01-settings/custom-selectors.css b/themes/10up-theme/assets/css/frontend/01-settings/custom-selectors.css new file mode 100644 index 00000000..67fc2843 --- /dev/null +++ b/themes/10up-theme/assets/css/frontend/01-settings/custom-selectors.css @@ -0,0 +1,7 @@ +/* + * Custom Selectors + * ...grouping of selectors to make life easier to manage + */ + +/* All heading levels supported */ +@custom-selector :--headings h1, h2, h3, h4, h5, h6; diff --git a/themes/10up-theme/assets/css/frontend/global/index.css b/themes/10up-theme/assets/css/frontend/01-settings/index.css old mode 100755 new mode 100644 similarity index 62% rename from themes/10up-theme/assets/css/frontend/global/index.css rename to themes/10up-theme/assets/css/frontend/01-settings/index.css index 08e37b3c..7c29694a --- a/themes/10up-theme/assets/css/frontend/global/index.css +++ b/themes/10up-theme/assets/css/frontend/01-settings/index.css @@ -1,3 +1,3 @@ -@import url("reset.css"); @import url("colors.css"); @import url("media-queries.css"); +@import url("custom-selectors.css"); diff --git a/themes/10up-theme/assets/css/frontend/global/media-queries.css b/themes/10up-theme/assets/css/frontend/01-settings/media-queries.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/global/media-queries.css rename to themes/10up-theme/assets/css/frontend/01-settings/media-queries.css diff --git a/themes/10up-theme/assets/css/frontend/02-global/index.css b/themes/10up-theme/assets/css/frontend/02-global/index.css new file mode 100755 index 00000000..2227cea5 --- /dev/null +++ b/themes/10up-theme/assets/css/frontend/02-global/index.css @@ -0,0 +1,2 @@ +@import url("reset.css"); +@import url("mixins.css"); diff --git a/themes/10up-theme/assets/css/frontend/02-global/mixins.css b/themes/10up-theme/assets/css/frontend/02-global/mixins.css new file mode 100644 index 00000000..4de58332 --- /dev/null +++ b/themes/10up-theme/assets/css/frontend/02-global/mixins.css @@ -0,0 +1,18 @@ +/* + * Mixins + * Use mixins to keep code DRY where viable + */ + +/* + @define-mixin icon $name { + padding-left: 16px; + &::after { + content: ""; + background: url(/icons/$(name).png); + } + } + + .search { + @mixin icon search; + } +} */ diff --git a/themes/10up-theme/assets/css/frontend/02-global/reset.css b/themes/10up-theme/assets/css/frontend/02-global/reset.css new file mode 100644 index 00000000..eb05118a --- /dev/null +++ b/themes/10up-theme/assets/css/frontend/02-global/reset.css @@ -0,0 +1,76 @@ +/** +* Reset.css +* Custom reset enhancments. +* Primary reset is modern-normalize (by default) +* imported in ../style.css +*/ + +/* + * Reset spacing & font inheritance + * + * Font iheriance: We add intentional font inheritence as there are browser + * inconstencies as well as some instances where lacking implecit inheritence + * can cause challenges + * + * Margin & Padding reset: We reset margin and padding to 0 to ensure a + * consistentstarting point for all elements + */ +* { + font: inherit; + margin: 0; + padding: 0; +} + +html { + + /* enable dark and light color schemes by default */ + color-scheme: dark light; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ + + /* enable hanging punctuation */ + hanging-punctuation: first last; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ +} + +/* + * Ensure body is at least 100% of viewport height + */ +body { + min-height: 100svh; +} + +/* + * Responsive media + */ +img, +picture, +svg, +video { + display: block; + max-width: 100%; +} + +:--headings { + text-wrap: balance; +} + +p { + max-width: 75ch; /* 75 characters - may wish to replace with custom property */ + text-wrap: pretty; +} + +/* + * Enable mooth scrolling by default + */ +@media (prefers-reduced-motion: no-preference) { + + :has(:target) { /* include all elements with a target (i.e. html only will not include dialogs) */ + scroll-behavior: smooth; + scroll-padding-top: var(--scroll-padding-default,); /* empty fallback if property doesn't exist */ + } +} + +/* + * Create a root stacking context + */ +.wp-site-blocks { + isolation: isolate; +} diff --git a/themes/10up-theme/assets/css/frontend/base/button.css b/themes/10up-theme/assets/css/frontend/03-base/button.css similarity index 93% rename from themes/10up-theme/assets/css/frontend/base/button.css rename to themes/10up-theme/assets/css/frontend/03-base/button.css index e8d0d868..e85db782 100644 --- a/themes/10up-theme/assets/css/frontend/base/button.css +++ b/themes/10up-theme/assets/css/frontend/03-base/button.css @@ -8,4 +8,5 @@ */ button:where(:not(.components-button)) { + /* styles here */ } diff --git a/themes/10up-theme/assets/css/frontend/base/index.css b/themes/10up-theme/assets/css/frontend/03-base/index.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/base/index.css rename to themes/10up-theme/assets/css/frontend/03-base/index.css diff --git a/themes/10up-theme/assets/css/frontend/base/link.css b/themes/10up-theme/assets/css/frontend/03-base/link.css similarity index 93% rename from themes/10up-theme/assets/css/frontend/base/link.css rename to themes/10up-theme/assets/css/frontend/03-base/link.css index a7b4b3d1..b5cc3170 100644 --- a/themes/10up-theme/assets/css/frontend/base/link.css +++ b/themes/10up-theme/assets/css/frontend/03-base/link.css @@ -8,4 +8,5 @@ */ a:where(:not(.components-external-link)) { + /* styles here */ } diff --git a/themes/10up-theme/assets/css/frontend/base/prefers-reduced-motion.css b/themes/10up-theme/assets/css/frontend/03-base/prefers-reduced-motion.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/base/prefers-reduced-motion.css rename to themes/10up-theme/assets/css/frontend/03-base/prefers-reduced-motion.css diff --git a/themes/10up-theme/assets/css/frontend/base/utils.css b/themes/10up-theme/assets/css/frontend/03-base/utils.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/base/utils.css rename to themes/10up-theme/assets/css/frontend/03-base/utils.css diff --git a/themes/10up-theme/assets/css/frontend/base/wordpress.css b/themes/10up-theme/assets/css/frontend/03-base/wordpress.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/base/wordpress.css rename to themes/10up-theme/assets/css/frontend/03-base/wordpress.css diff --git a/themes/10up-theme/assets/css/frontend/layout/index.css b/themes/10up-theme/assets/css/frontend/04-layout/index.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/layout/index.css rename to themes/10up-theme/assets/css/frontend/04-layout/index.css diff --git a/themes/10up-theme/assets/css/frontend/templates/index.css b/themes/10up-theme/assets/css/frontend/05-templates/index.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/templates/index.css rename to themes/10up-theme/assets/css/frontend/05-templates/index.css diff --git a/themes/10up-theme/assets/css/frontend/components/index.css b/themes/10up-theme/assets/css/frontend/06-components/index.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/components/index.css rename to themes/10up-theme/assets/css/frontend/06-components/index.css diff --git a/themes/10up-theme/assets/css/frontend/components/skip-to-content-link.css b/themes/10up-theme/assets/css/frontend/06-components/skip-to-content-link.css similarity index 100% rename from themes/10up-theme/assets/css/frontend/components/skip-to-content-link.css rename to themes/10up-theme/assets/css/frontend/06-components/skip-to-content-link.css diff --git a/themes/10up-theme/assets/css/frontend/global/reset.css b/themes/10up-theme/assets/css/frontend/global/reset.css deleted file mode 100644 index b93aa3f4..00000000 --- a/themes/10up-theme/assets/css/frontend/global/reset.css +++ /dev/null @@ -1,13 +0,0 @@ -/** -* Reset.css -* Custom reset enhancments. -* Primary reset is modern-normalize (by default) -* imported in ../style.css -*/ - -/* - * Create a root stacking context - */ -.wp-site-blocks { - isolation: isolate; -} diff --git a/themes/10up-theme/assets/css/frontend/style.css b/themes/10up-theme/assets/css/frontend/style.css index 5748d1b1..dfa042d1 100755 --- a/themes/10up-theme/assets/css/frontend/style.css +++ b/themes/10up-theme/assets/css/frontend/style.css @@ -14,23 +14,26 @@ */ @import url("modern-normalize/modern-normalize.css"); +/* Settings - settings like mixins, custom selectors, and custom properties */ +@import url("01-settings/index.css"); + /* Global - global pieces like media queries, mixins and placholders */ -@import url("global/index.css"); +@import url("02-global/index.css"); /* Base - base styles such as fonts, typography, and wordpress overrides */ -@import url("base/index.css"); +@import url("03-base/index.css"); /* Layout - styles specific to layout */ -/* @import url("layout/index.css"); */ +/* @import url("04-layout/index.css"); */ /* Templates */ -/* @import url("templates/index.css"); */ +/* @import url("05-templates/index.css"); */ /* Components */ -@import url("components/index.css"); +@import url("06-components/index.css"); /* Gutenberg blocks */ From 785a9c408cfb86bfcc3767eb025217343909f495 Mon Sep 17 00:00:00 2001 From: Joe Snell Date: Thu, 8 Feb 2024 15:26:32 -0800 Subject: [PATCH 2/2] Add additional comments to reset.css --- themes/10up-theme/assets/css/frontend/02-global/reset.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/themes/10up-theme/assets/css/frontend/02-global/reset.css b/themes/10up-theme/assets/css/frontend/02-global/reset.css index eb05118a..187d6c37 100644 --- a/themes/10up-theme/assets/css/frontend/02-global/reset.css +++ b/themes/10up-theme/assets/css/frontend/02-global/reset.css @@ -53,6 +53,13 @@ video { } p { + + /* + * Adding a readable max width to all paragraphs to prevent + * long lines of text. + * + * NOTE: if using the lobomized owl technique - this style may be overridden + */ max-width: 75ch; /* 75 characters - may wish to replace with custom property */ text-wrap: pretty; }