Comments (8)
@RomanHotsiy Thank you for your thoughts on this. Implementing CSS variables is certainly a good first step for a better developer experience. I don't see how they would solve the issues I outlined above, however? You are moving the existing SC theme variables into the browser, but this does not add any new ways to style parts of the interface that can't be reached at the moment, like adding that border to the ToC. The point is to have a few general css classes so that we can have more reliable control over parts of the portal design that weren't considered by the portal developers. It's clear that this can introduce breaking changes (and you can add that disclaimer to your docs), but having something like .toc { border-left: 1px solid grey; }
is still an order of magnitude more reliable than writing CSS selectors that traverse the entire DOM down from <body>
just so we can grab the right <div>
to add a border to.
from developer-portal-starter.
Oh, I forgot to mention that we're building theming solution which will allow you to "eject" any component. You can then either add class to it or modify its styles directly.
The work is in progress. We don't have any specific details to share yet.
from developer-portal-starter.
For what it's worth, I also would rather have meaningful HTML classes so that I can re-style elements, even if it means that our customization are "brittle" when it comes to breaking updates. There are a lot of customizations that would be trivial to implement if elements had proper HTML classes instead of inline styles. For example, it's difficult to impossible to implement a client-side light/dark theme toggle with things the way they are, but HTML classes would make it very straightforward. Similarly, there are plenty of other powerful customizations one could do with CSS that are difficult to apply when things have only procedurally-generated class names.
from developer-portal-starter.
Hi, @jdahdah this is a know issue we feel your pain 🙈. We are actively working on it.
I'll post a detailed write up about our roadmap on it later this week.
from developer-portal-starter.
@RomanHotsiy Thank you for acknowledging this issue. I'm looking forward to learning about your roadmap.
from developer-portal-starter.
Hi @jdahdah,
Finally found some time to provide more details here.
First of all, we don't want to add HTML classes as it will limit our ability to change/update product without breaking changes. With CSS classes almost every layout change becomes a breaking change and we still have a lot of different features on our roadmap which will require those changes.
We 100% agree the current them is very complicated to use. There are 2 main issues:
- no way to know what some specific variable controls
- no way to know which variable controls some specific aspect
We think we can solve 2) while keep our ability to evolve the product.
Our idea is to convert our theme to css-variables based one. In such case you can right-click on any element on the page, inspect it and immediately understand how to adjust it. You can even adjust variable value directly in dev tools to see the impact.
We hope this will improve styling dramatically. Also, we'll provide a bunch of example themes.
This project is in progress right now but we plan to release it publicly only in Q3.
from developer-portal-starter.
@RomanHotsiy Ah, that sounds more like it, thank you for clarifying.
from developer-portal-starter.
Hi @RomanHotsiy are you able to provide any updates on this issue? Currently also trying to fit a Redocly portal into brand style and coming up against the same challenges that @jdahdah flagged. Even setting the font for the TOC panel is proving difficult.
from developer-portal-starter.
Related Issues (20)
- How to access nested nav items? HOT 3
- Components in nav allowed?
- OpenApiTryIt component shows "Incorrect definitionId" error HOT 5
- Unable to use UI components (OpenApiCodeSample) when using LandingLayout page template in .mdx file HOT 2
- How to access route changes? HOT 1
- Default logout functionality appends [object, object] to the end of the url causing 404 page on logout HOT 1
- bug: uninformative error messages
- Incorrect error messages: existing files "Could not find" HOT 5
- Cannot find module '@redocly/ui' HOT 5
- i18n HOT 1
- `yarn start` throws error on `\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53` HOT 1
- Feature Request: Customize toc HOT 2
- Error parsing assets folder: Unexpected token < in JSON HOT 3
- The build command fails with zero information on errors HOT 1
- creating running via dockerfile HOT 1
- Can we add more syntax highlighting options? HOT 3
- Doubt remove first page HOT 2
- Doubt change nav gradient color theme HOT 1
- Deploying developer-portal-starter to Redocly HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from developer-portal-starter.