Refactor catalog list / grid view

[Januszpl]

I would:

1) change catalog-grid class to catalog-list__grid in catalog/_grid.scsc or even after changing the name we should move this styles to catalog/_list.scss - as they seem to be "default" styles for grid/list anyway (because of that I'm also thinking about doing nr 2)

Why? Because catalog-grid isn't a module. Styles in view should be related to catalog view.

2) do nr 1 plus change catalog-list to catalog-listing and then if required use catalog-listing--list and catalog-listing--grid. Then move catalog/list/_list.scss current styles to catalog/_catalog-listing.scss and change classes in grid.hbs and list.hbs to catalog-listing

Why? Because we use now in grid.hbs catalog-list and I think if catalog-list is a default "State" for list/grid we should use different more abstract name.

Then we have option 3 which can be made on top of implementing 2 or be implement into current state without doing 1 and 2.

3) move catalog-grid code to module products-grid

<div class="catalog-list__products">
    {{ render '@toolbar' }}
    <ul class="catalog-grid">
        {{ render '@catalog-grid-item' }}
        {{ render '@catalog-grid-item' }}
        ...
       {{ render '@catalog-grid-item' }}
    </ul>
    {{ render '@pager' }}
</div>

would be

<div class="catalog-list__products">
    {{ render '@toolbar' }}
    {{ reder '@products-grid' }}
    {{ render '@pager' }}
</div>

and then #167 question if related products listing (if it's not a slider just a products grid) should use or not the same module for products grid as catalog grid view (page) depend on project design implementation.

If it's 1-1 or very similar then in projects based on alpaca it can be used easily. If not then we a person who implement alpaca can create another module for featured / related etc (if required) or create grid per view (if in project it's only used in one view).

4) Plus I think we should move border bottom for current catalog-grid should be moved as border top for pager (implemented on view level) ex.:

.catalog-list { // or .catalog--listing if implementing nr 2
    .pager {
        border-top:...;
        padding-top: ...;
     }
}

Why? as it seems to be related to view no a products-grid