[REFACTOR - Please review] Minimize tailwind use by adding semantic html and vanilla css #75
Conversation
|
Close and reopen to trigger CI. |
|
@DragaDoncila @aganders3 This PR removes all of the tailwind CSS. It's mostly done other than the things noted in the Status Updates section. I'm happy to walk through the PR review with you. I'm going to stop for now. If I get time early this week, I may finish the styling of the PR list entries on the main page. |
willingc
changed the title
|
@willingc this is sick 🔥! I 1000% agree that the best next step is vanilla CSS and I like the structure of the files. I also really like the more tabular display and making use of all that whitespace on the sides. In terms of the approach this definitely gets a big green tick for me. I think since this is such a big visual change, we should not "release" it until a month or two after the official domain switch, so that users don't get a visual shock right off the bat. Perhaps we should make a separate I'm not sure if you're looking for visual design feedback at this stage (let me know if you are), and you probably didn't mean for this to be the final colour, but just wanted to flag that the main plugin list text colour is too bright and low contrast against the background. Let me know what you think about next steps! If you want to keep playing with the design, have at it! Otherwise we can merge to a branch and keep iterating from there. Super excited to see this take shape so quickly! |
|
How can I check this out? I'm not seeing where the artifact is uploaded, maybe I'm just a silly goose. |
|
@TimMonko https://output.circle-artifacts.com/output/job/365c2486-3c2d-447f-b76c-9f315dd53939/artifacts/0/build-artifacts/index.html Sorry that the auto preview is not triggering. If you go to the latest circleci run there is an option called artifacts, it has all the things :D |
willingc
force-pushed
the
minimize-tailwind
branch
from
26483c2 to
54cb5ee
Compare
|
Groovy! This is what I'm meant to see? You've been working hard on this. It's impressive to see such a big -diff and relatively small +diff ❤️ I have no comments on the code, but certainly happy to see how this shapes up. |
willingc
force-pushed
the
minimize-tailwind
branch
from
2213766 to
e7c9990
Compare
willingc
force-pushed
the
minimize-tailwind
branch
from
eadd6f2 to
7c3c860
Compare
Prior to this PR our retrieval of github URLs was missing many plugins because it did not inspect the `project_url` field. This PR updates the logic for fetching this information to include checking both the `home_page` and `project_url`. It also retrieves the PyPI url from the PyPI api information as this is likely to be more stable. In future we should also add a link to the conda URL information (if present), and potentially parse documentation/bugtracker/etc. links for display. However that would require more icons/CSS/layout changes and I'd rather get #75 and #81 done first. I thought this was valuable enough to get it in asap.
3 participants
This draft PR is a proof of concept for migrating away from Tailwind CSS that I have been playing with in my free time. Currently, the styling of the site is difficult since the inline CSS from Tailwind makes for a mess and is difficult to reason about.
Addresses #49.
Approach
This PR is taking the following refactor approach to closely match existing site styling:
static/css/stylesfolder with 5 vanilla CSS files to separate styling into CSS fundamentals. ✅main.css: Combines the other 4 filesbase.css: Foundational styles that impact the entire documentcomponents.css: Reusable UI component stylesutilities.css: Single-purpose helper classes such as display, spacing, borders, etc.responsive.css: Responsive behavior and media queries<head>block ✅index.htmlsection by section to use the vanilla css and semantic naming instead of tailwind classes ✅index.html✅Status updates
Decisions
create_static_html.pyto remove Tailwind there.How to review
As this is a refactor, the review should focus on structure not styling.
Overall, this should help us be able to iterate on styling and structure more easily in the future. Going forward styling should go in the css files and not the html files. 😄