Comments (4)
- The
i
in the logo is customized by Kristina — you won't find it anywhere else! - I don't care too much what y'all use for CSS, but my recommendation would be Theme UI. It has built in support for MDX: https://theme-ui.com/mdx-components
- Here's the brand summary with fonts:
from blitzjs.com.
@flybayer @robdrosenberg @coreybrown89
I wanted to raise issues I've found so we can decide how we want to move forward. These comments will also relate to #28
I'm finding some deficiencies with Infima, the built in design system that comes with Docusaurus. The big one being it's completely undocumented. It's considered not ready for production and is being built specifically for v2 docusaurus (https://facebookincubator.github.io/infima/) so that's not unexpected, but that means for our use it's hard to work with. Other related issues:
- Hard to know what tools I have available if I'm working within the system
- Their light and dark modes are coupled heavily with their variable set-up. And it seems to expect white background on light mode so the font colors aren't WCAG 2.0 compatible. And it's not obvious how to fix/change without having unintended consequences elsewhere. See the "Getting Started" in light mode or the dark text in dark mode of the hero image https://blitzjs-com-git-branding.blitzjs.now.sh/
The above issues might be partially rectified as our wonderful designer finishes her design of the site since the hero image arbitrarily uses the updated branding colors. It would probably have to encompass light and dark modes if that's what we want available on our site. However implementing her design using the undocumented design system might be difficult.
More general dev thoughts:
- We need to decide how we want to do styling in general, ie CSS modules, regular css, SASS, utility class based (Tailwind, Tachyons, etc), etc. We currently have a couple ways we're doing it.
- Are we planning on using a component library or just staying within what the docusaurus provides? Keeping in mind if we use a separate component library we'd have to figure out how we want to theme it since component libraries tend to come with their own theme customization and we might end up fighting with Docusaurus styling as well.
Design related:
- We may need an SVG logo that has a transparent background. That way we can use it wherever we need it (e.g. nav bar, hero section) and have "Blitz" be regular text
- Related to above, the PNG logo seems to have different text font than the branding fonts, not sure if that matters. I mostly noticed the "i" is not Franklin or Roboto. So that means we either have to use images anywhere we need logo + text, or we're OK with the name text not looking the same as the image based branding elsewhere (Twitter, GitHub profile, etc)
- If we go the PNGs for the logo + text route, we'll probably need those images to just have the text and logo with a transparent background
- How should the two fonts be utilized?
from blitzjs.com.
My votes for moving forward with out inferma for the time being. If it becomes a pain point later one when it's further developed maybe we can consider moving over to it? How hard would it be to move away from it now?
I agree we need to decide on a CSS solution ASAP. I'm most familiar with CSS in JS with emotion or styled components. I'd like to use one of these on the video player in #32. I know we talked early on about using something like Theme UI though. Do you have a preference?
I'll see if I can get our designer to provide some SVG assets!
from blitzjs.com.
Closing due to new site updates from @flybayer
from blitzjs.com.
Related Issues (20)
- Correct but not working anymore url on code of conduct page
- Wanted to send a pull request to update the doc, but permission denied HOT 1
- Add a restart blitz after 2 data migrations in tutorial steps
- Add a restart blitz after adding choices display in tutorial HOT 3
- Following the blitz tutorial at this step the code is different HOT 3
- Homepage - on mobile view - sponsors section does not shrink down HOT 9
- Change headings in the left side bar
- Improve Blitz Auth docs
- Improve Blitz RPC docs
- Improve Blitz Next docs
- Improve `Basics` section in the docs
- Improve CLI docs
- Add missing items to the docs HOT 1
- Documentation request: interacting with API endpoints HOT 2
- Remove old Next.js pages from the docs
- Outdated code example in "File-Based Routing"
- Collection of app router migration guide tasks HOT 1
- Button for scroll-to-top is fixed at the bottom
- Update custom-server docs HOT 1
- Load multiple env files HOT 2
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 blitzjs.com.