Skip to content
This repository has been archived by the owner on Apr 11, 2024. It is now read-only.

💄🔧:wrangle sloppy SCSS situation (integration) #1100

Merged

Conversation

DerekNonGeneric
Copy link
Member

@DerekNonGeneric DerekNonGeneric commented Jan 27, 2024

this pr is expected to be tackling both
aforementioned problems from linked issues below:

  • unused CSS styles appearing on all site pages
  • critical path CSS (if we are feeling fancy tonight)

Refs: #851
Refs: #1098 (comment)

Copy link

netlify bot commented Jan 27, 2024

👷 Deploy Preview for open-inf-is processing.

Name Link
🔨 Latest commit 1f964e8
🔍 Latest deploy log https://app.netlify.com/sites/open-inf-is/deploys/65f3df98c018e800082b6787

@DerekNonGeneric
Copy link
Member Author

DerekNonGeneric commented Jan 27, 2024

i am going out for breakfast now, but looking forward to deploy previewing this pr in a few

Copy link
Member

@OpenINFbot OpenINFbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is obviously based on bootstrap, but those source files are still missing

maybe simply get the latest version from https://getbootstrap.com & vendor it in here?

bootstrap SCSS source files have an impressive quantity of variables for facilitating theming and customization; we want those source files in here w/ those variables customized ASAP

@OpenINFbot OpenINFbot added the 🚅 Status: Fast Track PRs that do not need to wait for 48 hours to land label Jan 27, 2024
@DerekNonGeneric
Copy link
Member Author

maybe simply get the latest version from https://getbootstrap.com/ & vendor it in here?

cloning their actual sourcecode repo would be getting us the most up-to-date look of things
and seems to be the least chance of adulteration from whatever archives come from their site

@DerekNonGeneric
Copy link
Member Author

cloning their top-level scss/ is the preferred solution here:

@DerekNonGeneric DerekNonGeneric added the 📦 Type: Developer Dependencies PRs that modify packages only req'd for local development and testing label Jan 27, 2024
@DerekNonGeneric
Copy link
Member Author

DerekNonGeneric commented Jan 27, 2024

okay, so that top-level scss/ from bootstrap was since been renamed to _sass/ fitting the convention established in Jekyll projects — should note that there are some extra useless things in there too btw

@OpenINFbot
Copy link
Member

@DerekNonGeneric, perfect, thanks — please stop teasing us tho — knock this thing out already!!

@DerekNonGeneric
Copy link
Member Author

DerekNonGeneric commented Jan 27, 2024

knock this thing out already!!

ok. there have been a slight change of plans tho; i am going to actually prefer bootstrap subdir: _sass/bootstrap/ since we'll also have _sass/bourbon/, _sass/functions/, etc.

moment pls

@DerekNonGeneric
Copy link
Member Author

if technology choices offend anyone: the googlers already did all the work for us and we should celebrate this by capitalizing on it (my humble opinion)

// Breadcrumbs
// Code

// Colors
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Colors
// Colours

okay, i am really excited about this part below as we are going to be getting our hands dirty

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're going to be tackling 👆 in ~30min

just doing some general management tasks waiting for my coffee to kick in ❗


we seem to have 3 palettes necessary, but each of those would need color schemes for both light and dark modes, which would result in 6 distinct palettes ❗

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

best thing to do now would be to first get all those colors

the goal here is simply to be able to get a more clear mental picture of what we have going on and what we are missing; we are just taking inventory, but eventual color corrections are to be expected #colorTheory


not a good idea to try creating your own color there ❗(they are all taken)

we are just taking inventory

finally kicking it off here now:


💭 ColourLovers w/ max of 5 colours per palette must just be trolling ❗

revamping the _variables.scss for bootstrap 2024 likely give idea on qty

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we seem to have 3 palettes necessary, but each of those would need color schemes for both light and dark modes, which would result in 6 distinct palettes ❗

Originally posted by @DerekNonGeneric in #1100 (comment)

the strategy we pulled off last night was refreshing, got my creative juices flowing, and was an exercise worth repeating, so expect an increase to the 1/6th we made in progress, as you'll find on my ColourLovers profile

see y'all 8:00pm eastern, where we bring this all together (metaphysically)

@OpenINFbot OpenINFbot added the ♿️ Category: Accessibility Issues and PRs related to accessibility (WCAG, etc.) label Jan 28, 2024
Copy link
Member

@OpenINFbot OpenINFbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

clarifying what all is going on here would be good

folks likely will find this to be perplexing proposal

to clarify, the Jekyll Reflection theme turning out to be somewhat of a late-developer means that all of its bootstrap-foundation styles (from ~2015) have since been outdated by the much more modern bootstrap of 2024

keeping the bootstrap foundation synchronized as bootstrap further evolves is going to be an interesting challenge, but nothing we'd shake our heads at

couple last points to get this over the finish line:

  • we'd like the color scheme adapted from wherever it may currently be expressed
  • please consider following the theming convention established by Jekyll proper

@DerekNonGeneric
Copy link
Member Author

please consider following the theming convention established by Jekyll proper

agreed, we would love to see the packaging of these up for others to use:

Jekyll has an extensive theme system that allows you to leverage community-maintained templates and styles to customize your site’s presentation. Jekyll themes specify plugins and package up assets, layouts, includes, and stylesheets in a way that can be overridden by your site’s content.
https://jekyllrb.com/docs/themes/

background-repeat-x: repeat;
}
.outro {
background-image: url("/assets/img/jekyll-theme-reflection/prism_outro.svg");
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
background-image: url("/assets/img/jekyll-theme-reflection/prism_outro.svg");
background-image: url("/assets/img/svg/jekyll-theme-reflection/prism_outro.svg");

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 shoot; tbh i am not familiar w/ proper Jekyll theming as independent structures:

please consider following the theming convention established by Jekyll proper

agreed, we would love to see the packaging of these up for others to use:

Jekyll has an extensive theme system that allows you to leverage community-maintained templates and styles to customize your site’s presentation. Jekyll themes specify plugins and package up assets, layouts, includes, and stylesheets in a way that can be overridden by your site’s content.
https://jekyllrb.com/docs/themes/

Originally posted by @DerekNonGeneric in #1100 (comment)


thinking we gonna have to move some things around soon; time for research now too

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 shoot; tbh i am not familiar w/ proper Jekyll theming as independent structures

last night i did due diligence of reading up on what we are expected to provide as theme developers and my reaction was increasing "holy moly" — excited about the whole ordeal — even made my very first RubyGems.org account — we're so back to Ruby Community

@DerekNonGeneric
Copy link
Member Author

DerekNonGeneric commented Jan 28, 2024

my mistake for not linking issue #851 sooner, but seems like working on this w/o addressing #851 would not seem to be something we'd like to see undertaken here; looking forward to making this a priority we are mindful of while at this crucial stage of development (no pun intended)…


nobody probably saw this coming, but this line of work in the pr is starting to force us to figure out what we're all about — something we've generally been happy to leave as undefined/open-ended, but maybe take a look at the facilities we have currently in planning (visible via full-fledged SCSS files), you'll notice that what we gave ourselves is:

  • a) the pretty common standard stuff (every webdev gets requested they build)
  • b) difficult-to-interpret outliers (idk whether yet has merit-enough to build)

@DerekNonGeneric
Copy link
Member Author

something we've generally been happy to leave as undefined/open-ended

i mean, that is not to say that this org has no identity or is cultureless, but we have been thru what can only be described as perhaps various community lifecycles (?) w/ some of the most influential people in open-source who've come to us to collaborate and leave their mark

@DerekNonGeneric
Copy link
Member Author

DerekNonGeneric commented Jan 29, 2024

we need to keep driving in the same direction as last night: ~30min until shuttle takeoff
#1100 (comment)


some relevant hive-mind things happened last night (and earlier this week),
begging to be captured in palettes:


first thing's first: the initial color scheme of the main star of the show:

OpenINF-Reflection
Color by COLOURlovers

wow, same energy as the funnies (?)

image

@@ -21,7 +21,7 @@
// Auto-fix JS files with ESLint using our custom settings. Needs
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change no longer necessary

{% endcapture %}
{{ styles | scssify }}
{% endif %}
{% if page.class == 'collections' %}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{% if page.class == 'collections' %}
{% if page.class == 'collections' %}

Comment on lines +301 to +308
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

total for theme palette's color qty seems like 8 here, but those other colors above maybe should be customized by theme authors as well

@DerekNonGeneric DerekNonGeneric added 🛄 Status: Claimed Issues that have been claimed to be undertaken by someone 🌗 P2: Medium undefined labels Mar 15, 2024
@DerekNonGeneric
Copy link
Member Author

clarifying what all is going on here would be good

folks likely will find this to be perplexing proposal

to clarify, the Jekyll Reflection theme turning out to be somewhat of a late-developer means that all of its bootstrap-foundation styles (from ~2015) have since been outdated by the much more modern bootstrap of 2024

keeping the bootstrap foundation synchronized as bootstrap further evolves is going to be an interesting challenge, but nothing we'd shake our heads at

couple last points to get this over the finish line:

  • we'd like the color scheme adapted from wherever it may currently be expressed

  • please consider following the theming convention established by Jekyll proper

OK, it's a lot to go over now haha; and almost time for bed maybe tomorrow we can pick it back up

Copy link

netlify bot commented Apr 4, 2024

Deploy Preview for openinfis failed.

Name Link
🔨 Latest commit 486c9bd
🔍 Latest deploy log https://app.netlify.com/sites/openinfis/deploys/661043309678090008291d6a

@DerekNonGeneric DerekNonGeneric merged commit 33d717a into OpenINF:live Apr 5, 2024
7 of 16 checks passed
DerekNonGeneric added a commit that referenced this pull request Apr 5, 2024
DerekNonGeneric added a commit to OpenINF/open.inf.is that referenced this pull request Apr 7, 2024
@DerekNonGeneric DerekNonGeneric deleted the fix/sloppy-css-management branch April 7, 2024 23:48
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
♿️ Category: Accessibility Issues and PRs related to accessibility (WCAG, etc.) 💄 Category: CSS/Styling undefined 📖 Category: Documentation Improvements or additions to documentation 🚸 Category: User Experience (UX) undefined 🌗 P2: Medium undefined 🛄 Status: Claimed Issues that have been claimed to be undertaken by someone 🚅 Status: Fast Track PRs that do not need to wait for 48 hours to land 🚧 Status: Work In Progress (WIP) undefined 📦 Type: Developer Dependencies PRs that modify packages only req'd for local development and testing 🔧 Type: Maintenance undefined 🔔 Type: New undefined
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 still missing org custom templates for our error pages 🎨✨ adopting sanitize.css
3 participants