algolia / algolia/instantsearch
CSS Styling seems either too loose or too restrictive
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
**Is your feature request related to a problem? Please describe 🙏**
I tried to update the [jekyll-algolia demo](https://community.algolia.com/jekyll-algolia-example/) from InstantSearch v2 to v3, but I'm feeling I have to do much more work than before just to have a decent styling.
Without too much CSS Styling, the v2 used to look like this;

Now, if I use only the reset theme I have this:

And if I use the Algolia theme I have this:

The first one is too bare-bones, it really only reset browser styles, but leave me with writing a lot of CSS just to have the searchbox decently displayed (adding padding, placing the magnifying glass and close button, etc).
The second one is too much Algolia-branded. It adds borders, shadows and even changes the text color to my hits. This seems perfect for Algolia employees to build demos, but not very useful for me, as a user.
**Describe the solution you'd like 🤔**
I would have loved a base CSS styling that does the basic layout, without dipping too much into Algolia branded territory. A simple CSS file I could add that does what reset does, enough to have something working, taking care of browser issues, but not tied to a specific color palette. Basically styling the searchbox with magnifying glass, close button and such
**Describe alternatives you've considered ✨**
Alternatively, if I could pick only parts of the Algolia theme, I could work around my issue. I could pick only the searchbox theming (which looks great), without having all my hits impacted by the theme.
Contributor guide
Research direction
Start with the jekyll-algolia demo and compare the InstantSearch v2 and v3 reset and Algolia theme output described here. Define a neutral base stylesheet or selectable theme parts that provide the searchbox layout without imposing Algolia branding, then verify the demo has usable searchbox controls without changing hit styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100