benjstorlie / sudoku-shuffle

Play sudoku
https://mighty-ridge-19238-3e456d2c37f3.herokuapp.com/
MIT License
0 stars 0 forks source link

Styling #20

Closed benjstorlie closed 1 year ago

benjstorlie commented 1 year ago

Here is what is included in the assignment documentation.

CSS Styling Instead of using a CSS library like Bootstrap, consider one of the following suggestions:

Explore the concept of CSS-in-JS, which abstracts CSS to the component level, using JavaScript to describe styles in a declarative and maintainable way. Some popular libraries include styled-components and Emotion.

Try using a component library, such as Semantic UI, Chakra UI, or Ant Design.

Create all the CSS for your application just using CSS.

Ultimately, it doesn't matter which of these options you choose—it just needs to look professional and be mobile-friendly.

Bootstrap does have its own thing, react-bootstrap, which you can just install as a dependency, and the documentation is nice, and even includes light/dark mode. And that makes it where you can fall back on the regular Bootstrap if something isn't working, since it still uses the same CSS library.

And we could even just pull in parts of Bootstrap, like Container, with Row and Col, for just doing the layout, and maybe something else is nicer for everything else. Lots of options.

When I was trying to look up how to do styling with pseudo-selectors, like :hover, Emotion did come up, along with Radium, which is older.

It looked like a lot to learn just for one thing, so for now, the styling for hovering over candidates is handled with extra classes, which does do the job more simply.

But if it turns out that it's nice and lends itself to other things, then maybe that can look better too.

benjstorlie commented 1 year ago

I can work on tidying the controls panel, so it's not just random buttons everywhere.

npcoiner commented 1 year ago

Ben and Patrick bunch of misc fixes and changes