Restructure CSS

[front-endian]

Summary

While working on U-M's beta interface for our repository based on Sufia 7 we had a lot of trouble working with Sufia's current stylesheets. The following suggestions are centered around simplifying maintenance and making it easier for groups to customize Sufia's views as much or as little as they see fit.

Note: This issue should probably be dealt with as part of implementing whatever the UI working group comes up with instead of working on the current interface.

Suggestions

1. Reduce the amount of CSS in Sufia to a bare minimum, instead relying on native Bootstrap wherever possible.
   • Bootstrap is a great tool that was made to be easier to customize. If we let Bootstrap do almost all the heavy lifting and trust it to have proper padding/margins it will be a lot easier for developers to customize Sufia to meet their needs
   • This is also reduce the amount of CSS which has to be maintained by the Sufia community.
2. Any custom CSS shouldn't have any id's in the selectors, and should only have at most two classes.
   • This will make it easier to overwrite styles and will ease longterm maintenance.
3. Add semantically named classes to most elements in Sufia, even when they aren't being used by stock Sufia's CSS.
   • This will make it easier for people to restyle Sufia without having the go in and edit the HTML.
4. Improve the accessibility of Sufia's stock styles.
   • There are a number of things that need improvement so that it is easier for more people to use Sufia, such as more obvious link styles, clear :hover and :focus actions, etc.

     Related

See #1594 for the start of this discussion See #1608 for the discussion of front-end development best practices

[mtribone]

@mjgiarlo Bootstrap 4 is going from Less to Sass. One thing that I've experienced so far is trying to override specificity and had to follow Bootstrap syntax over BEM. For example:

https://github.com/projecthydra/sufia/blob/masthead_header/nav/app/assets/stylesheets/sufia/_header.scss#L48

@cbeer Yeah, man!

[atz]

This ticket is too big to be useful to developers. Nice conversation and all, but I would recommend piecing it out and closing this one.

[mjgiarlo]

This one is for discussion only. I believe @justcolin was going to take a gander at the UI changes we've been making the past few weeks (and possibly submit a PR). We may take up this work at the May Hydra Dev Congress in Ann Arbor. I'd like to leave it open for now, and leave it on the backlog, until we've ticketized the work here or punted it.

[front-endian]

@mjgiarlo: I've been looking at the UI changes and have some comments, but since you all are moving so fast pushing 7.0 out the door I haven't really have the chance to get any comments or PR's in. I am waiting until the Dev Congress or after 7.0 is out the door.

[mjgiarlo]

Sounds like a plan. At a macro level, would you say the changes you've seen are a step in the right direction or digging a deeper hole?

[front-endian]

There is a good amount of positive movement going on, and some lateral movement which is understandable. My primary concerns currently are sustainability and the designs, but that is a longer conversation.

[mjgiarlo]

@justcolin @mtribone As we start to clarify the paths forward for Sufia and Hyrax, I want to make sure we don't lose the good discussions here. Are there any bits from the above discussion that we should write up as actionable issues?

[mtribone]

Keep specificity low where we can, but overriding Bootstrap makes for very specific code. Use classes over IDs to gradually add granular styling. For example .btn .btn-alert .btn-lg

I've also been using this guide as a reference: http://codeguide.co/#css

[front-endian]

See this comment for a suggestion on how we could make it easier to make this issue actionable.

[mjgiarlo]

@justcolin Looks good.

@mtribone Would documenting that or similar practices in our Dev Guide (or elsewhere in our docs) be sufficient?

[mtribone]

@mjgiarlo Yeah the Dev Guide is a good idea!

[mjgiarlo]

@justcolin @mtribone are either of you inclined to start building out a new section of the dev guide about this?

[mtribone]

@mjgiarlo I certainly don't mind contributing to the Dev Guide, but it might be a bit of a slow burn while we crank out ScholarSphere. Are we at a point with Sufia that it is default enough?

[front-endian]

@mjgiarlo I can contribute to it and may be a bit faster since I am not currently working on any Sufia projects.

[mtribone]

@justcolin You have a good chunk of recommendations here: https://github.com/projecthydra/sufia/issues/1608#issue-137125284

[front-endian]

@mtribone I am also looking into automating a lot of those recommendations and the recommendations in here using a linter.

[mjgiarlo]

@justcolin @mtribone Sounds good, y'all. Once you add the new recommendations to the wiki, hit me up and I'll be happy to review. Feel free to close this issue when that's ready. Thanks!

[mjgiarlo]

@justcolin @mtribone FWIW, the folks at UW have been keeping some somewhat related notes on their own wiki. I link that here in case there are interesting tidbits to repurpose for the Sufia Dev Guide: https://bitbucket.org/uwlib/druw/wiki/User%20Interface%20Customization%20in%20Sufia.md

HT: @metageeky & @younga3

[mtribone]

@mjgiarlo The work from UW looks pretty good. I think we have several things to outline, if I'm following the conversations correctly

1. CSS Guidelines for writing CSS per @justcolin's suggestions and perhaps https://github.com/projecthydra/sufia/issues/1608#issuecomment-260655039
2. Overriding styles and customization using @metageeky & @younga3 work as a starting point
3. CSS Linter per @justcolin
4. Style Guide per @jenlindner https://github.com/projecthydra/sufia/issues/1608#issuecomment-250215268

[front-endian]

3 is under way, it will just take a bit to tweak the rules and to fix up the errors it throws for existing CSS. As for #1, I should be able to get started on it soon.

[mjgiarlo]

@mtribone @justcolin Solid! Thanks, you two.