algolia / algolia/instantsearch

CSS Styling seems either too loose or too restrictive

Open
#3,393 6 comments 4 reactions 0 assignees View on GitHub
Design: UI Feature: UI/UX Library: InstantSearch.css Type: Enhancement
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;
![image](https://user-images.githubusercontent.com/283419/51108365-4a71b080-17f2-11e9-826d-1b76e862b621.png)

Now, if I use only the reset theme I have this:
![image](https://user-images.githubusercontent.com/283419/51108403-6bd29c80-17f2-11e9-9e4f-e78b9381eea1.png)

And if I use the Algolia theme I have this:
![image](https://user-images.githubusercontent.com/283419/51108422-79882200-17f2-11e9-8fa4-27b8987f6055.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.