Semantic-ui: What the heck is "pusher"?

Created on 16 Mar 2017 · 8Comments · Source: Semantic-Org/Semantic-UI

I'm opening this issue because I feel the documentation is severely lacking information on this particular class. I've combed the documentation, google, the issues here, and forum posts addressing the pusher class but I can't find information anywhere that describes what it is and what it does.

Could someone describe the class, it's use and purpose, and could we get that added to the docs?

Usage Question

Source

shellscape

👍11

Most helpful comment

@jokeronaldo why was this closed? closing an issue prematurely discourages discussion and participation from new, interested users like myself. And this issue could use further discussion as there's a clear need for improved documentation in this case.

Based on your reply, the code snippet on that page is erroneous:

<body>
  <div class="ui sidebar">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>

"Your site's actual content" is an error and should read at the very least "The sidebar content". Given the bad verbiage there, I think it's pretty clear why that's confusing to new users. A snippet of text above that code block explaining the pusher class would also go a long way.

Please consider reopening this issue and tagging it with something equivalent to "documentation error"

shellscape on 16 Mar 2017

👍16

All 8 comments

Pusher is used as your content wrapper for sidebar menus.
Look at https://semantic-ui.com/modules/sidebar.html#/usage

jokeronaldo on 16 Mar 2017

👎5

Based on your reply, the code snippet on that page is erroneous:

<body>
  <div class="ui sidebar">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>

Please consider reopening this issue and tagging it with something equivalent to "documentation error"

shellscape on 16 Mar 2017

👍16

Hi @shellscape,

Thank you for posting, but although it’s a valid usage question, we’ve limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

"Your site's actual content" is an error and should read at the very least "The sidebar content".

The documentation is correct, and I’m not sure how it can be changed to dispel the confusion; it seems to be very clear about the page structure. Let’s take a step back: .pusher is a wrapper for a page’s content, not a siderbar’s content, and without diving into what it does exactly, is a necessary part of the sidebar component’s HTML pattern. All sidebar’s content—menus and whatnot—go inside .ui.sidebar container, and .pusher becomes your <body>, so to speak.

I noticed you were using Vue, if you’re going to use the sidebar component with Vue, you could do something like that:

<body>
  <div class="vue_container">
    <div class="ui sidebar">
      // Sidebar’s content.
    </div>
    <div class="pusher">
      // Actual page’s content.
    </div>
  </div>
</body>

$('.ui.sidebar')
  .sidebar({
    context: '.vue_container',
  })

So basically, .pusher is a parent container that uses transforms, transitions and some other styles to apply all those fancy animations to a page.

awgv on 16 Mar 2017

👍7

Thanks for clearing that up @Banandrew, much appreciated. Amending the documentation with that immensely friendlier explanation would be a great improvement imho.

shellscape on 16 Mar 2017

@shellscape Sorry if I was too short in my explanation. In fact, pusher element is not too well explained, but, it may really not be too explained because it's only present in sidebar example. May a little quote or alert about what a pusher is will be great.

jokeronaldo on 17 Apr 2017

the documentation is great, but it would be nice if there was also a _reference_, i.e. a alphabetical list of each individual class and what it does. you can see this sort of thing with a lot of other code frameworks, the documentation provides usage instructions and the reference provides a list of all classes and functions

quinn on 23 Nov 2018

👍4

I concur. Just started using semantic over the last couple days. This type of grap in docs, however, is one of the things that I have noticed. I must confess I scratched my head when I couldn't find much information about pusher (and _surprise_ that's how I ended up here). My brain needs a quick reference...

And for added awesomeness, wouldn't it be thrilling if there was an explainer tool in the documentation. Pass it a class list and it would explain the meaning and usage.

Still, the docs are pretty decent.