When I started working on the design, I came across button properties.

I understand that if you change something now, some templates may break. So my post is more for information. But I think it will have to be done sooner or later. Maybe sooner than later?

  • EvgOP
    link
    fedilink
    arrow-up
    2
    ·
    edit-2
    5 years ago

    The hierarchy of actions in buttons is not used. This is not an entirely academic example, and the colors are poorly selected, I just showed that one button should be one, the other another.

    I have a bad translation, if there is a minute, please take a look at paragraph 7.

    Item 7: Not every button needs a background color https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

    But the conversation is not even about that. The hierarchy of importance, actions, and Bootstrap is usually distinguished by different classes.

    At the moment, the properties of the buttons are the same. We can’t highlight let’s say in a different color, the buttons that are in the sidebar. Unless I will add my own styles using the card-body or card properties.

    .card-body .btn-secondary {...

    To somehow separate the “important” action buttons from the filter at the top of the topic.

    Bootstrap uses different styles to separate the “importance” of buttons. If the styles are the same everywhere, it becomes very difficult to use the standard Bootstrap features for highlighting.


    I have a question right away. I can use these things in design:

    .card-body .btn-secondary {...

    If I add a couple of my classes to the bootstrap file.

    To somehow highlight the buttons that are in the sidebar.

    • DessalinesMA
      link
      fedilink
      arrow-up
      2
      ·
      5 years ago

      Its a concious front end choice on my part to have most buttons look pretty similar. I can’t stand sites that have buttons with lots of different colors.

      When creating a style, you can set btn - secondary to be whatever color you want, but they’ll all be styled similarly, which is a good thing.

      • EvgOP
        link
        fedilink
        arrow-up
        1
        ·
        5 years ago

        Fine. There is one more question. Does it allow, if I remove the “extra” styles from the Bootstrap file.

        For example, btn-info is not used by you.

        https://github.com/LemmyNet/lemmy/search?q=btn-info&unscoped_q=btn-info

        Or should the Bootstrap file contain everything? Some editors allow you to create your own style; do not use what is not.

        I just want to immediately understand some basic things, so that later everything will be right.

        • DessalinesMA
          link
          fedilink
          arrow-up
          1
          ·
          5 years ago

          bootstrap.build will create a bootstrap v4 compatible theme, that’s all you need.

    • DessalinesMA
      link
      fedilink
      arrow-up
      2
      ·
      5 years ago

      I also have a philosophy with color scheming taken from a lot of other apps, where only things like votes, users, and communities stand out with colors.