Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Buttons in Drupal 8 have become a bit of a mess, really inconsistent and ugly.
As well a finding consistent styling I'm happy for us to aim towards a more complete OOCSS solution ala Bootstrap etc.
Here're my current findings attached.
Comment | File | Size | Author |
---|---|---|---|
seven button styles.jpg | 56.55 KB | LewisNyman |
Comments
Comment #0.0
LewisNyman CreditAttribution: LewisNyman commentedimg
Comment #1
sunI totally agree - that looks anything but consistent.
Related: #1845728: Refactor and introduce generic button CSS styles for forms and links — but that won't change anything for Seven's concrete/custom button styles, so this has to be adjusted here.
Comment #2
sunOh! And as soon as #1168246: Freedom For Fieldsets! Long Live The DETAILS. has landed, this sounds like a super critical and perfect new design test case! :)
Comment #3
LewisNyman CreditAttribution: LewisNyman commentedTagging for accessibility
Comment #4
yoroy CreditAttribution: yoroy commented#1848432: Visually Differentiate the second level of the toolbar more clearly from the content region
#1848428: Make the primary action buttons color and shape correlate with "Save" button and other buttons
and
#1238484: Ability to mark the form buttons to be of a specific type (so that they can be styled differently)
Comment #5
Bojhan CreditAttribution: Bojhan commentedTo me this is just a side-effect of this phase, I generally don't even bother giving visual reviews anymore even on things like the toolbar. We can clean it up nicely after code freeze, and we should have a more profound style guide or this will always happen.
Comment #6
LewisNyman CreditAttribution: LewisNyman commentedJust posting up an extensive resource for consistent button styles — Sassy buttons. It pretty much covers every style of button you're likely to see in 99% of modern sites out there.
In my opinion we should grab a style from here, with some colour variants, and paste the generated CSS into Sevens stylesheet. We might need to tweak the colours for accessibility afterwards.
Comment #7
mgifford@Lewis - Sassy's buttons look good to me.
@Bojhan - I'm not one for writing a solid style guide, but certainly support it.
Comment #8
ry5n CreditAttribution: ry5n commentedWith help from Bojhan and yoroy, I’ve been drafting an updated and unified set of styles for Seven, including buttons. It should make its way to the issue queue soon, and the idea is for it to evolve into a style guide. Besides consistency, I’m also trying to make sure every element is careful to reflect Drupal’s personality, or – for lack of a better term – brand. Look for more on this in the near future :)
Comment #9
mgiffordThat's great. Any chance they will be available in a .svg format so that we can modify them with http://inkscape.org and add it to a git repo?
Comment #10
ry5n CreditAttribution: ry5n commented@mgifford Right now all the graphic work is in Photoshop. However, once there is a basic consensus on the design direction, my plan is to throw out the .psd and iterate in HTML and CSS. That way, we get the benefit of working in the 'real thing' and open up participation. Plus, the ‘style guide’ starts to bridge the gap with an actual theme component library. Ultimately, the best style guide is a 'living style guide': generated from the same code used for Drupal’s normal output. It would serve to illustrate (and test) of all of the available UI components (run through a given theme) with inline rationale and usage guidelines for each component.
Comment #11
mgiffordSounds great! Thanks @ry5n.
Comment #12
quicksketchIn addition to the button styles in the original post, there is also the gray, less-rounded button used in .form-actions. It's totally crazy that Seven uses rounded buttons *unless* it's in the .form-actions wrapper, where buttons are mostly square. Continuing the madness, the .button-primary class doesn't provide any visual difference because the .form-actions button CSS overrides it, so all buttons at the end of forms are always gray now, instead of the primary button having any special identification. Totally crazy.
I'd like it if this issue were attempted sooner rather than later. Trying to use the Views interface without any indication of primary buttons is a lot more difficult than it would seem.
After #1851414: Convert Views to use the abstracted dialog modal is finished up, we'll also need to provide some styling for buttons in modals. IMO these should be consistent with other buttons, but jQuery UI's default styling may require some additional overriding.
Comment #13
eigentor CreditAttribution: eigentor commentedSo am I correct the style guide has clear instructions how this has to look?
If it does, it would save a lot of the discussion part.
Comment #14
ry5n CreditAttribution: ry5n commented@eigentor Yes. The style guide proposes a unified style for all buttons in Seven that I believe covers all our current use cases. We’ve started prototyping this in a sandbox project: http://drupal.org/sandbox/ry5n/1932040.
Comment #15
LewisNyman CreditAttribution: LewisNyman commentedDuplicate of #1986074: Buttons style update
Comment #15.0
LewisNyman CreditAttribution: LewisNyman commentedHow do you add images?!