Less Space used for the Article App

Using CSS I've customized the article app to use less space as seen here.



I used the following CSS to create this:

/* Article App Styling */



.es-main .blog-image.pull-left.mr-10 > img {

    border-radius: 3px;

    box-shadow: 0 0 2px 1px #999;

    padding: 2px;

}



.es-main h4 {

    display: inline-block;

}



.es-main .article-meta {

    display: inline-block;

    margin-left: 5px;

    position: relative;

    top: -1px;

    border-bottom: none !important;

    margin-bottom: 5px !important;

    padding-bottom: 0 !important;

}



.es-main .article-item:before, .es-main .article-item:after {

    content: "";

    display: table;

}



.es-main .article-item:after {

    clear: both;

}



div#fd.es .es-profile .app-article .article-list > li .article-actions {

    float: right;

    margin-top: 0 !important;

}



.mb-10.mt-10.blog-description {

    display: inline;

}



div#fd.es .es-profile .app-article .article-list > li {

  margin-bottom: 0 !important;

  border-style: dashed !important;

  border-width: 0 0 1px 0 !important;

  border-color: #d7d7d7 !important;

}

Compare the last link with this one. Swap tabs to see the difference.

The pseudo elements are there to help objects float properly without the need of a defined height for the article wrapper. In addition to quite a bit of space being saved with this method, it also makes the separation border feel more like they are "collective objects" rather than "separate objects" which feels softer on the eyes (currently it's almost borders against borders). This is a design concept that bootstrap has made efforts in simplifying the UI. I chose to have the "Continue Reading" button on the right side so that it's less distracting, leaves off where the text does, and saves space when less text is available. Could this be considered for including in ES? Obviously the over rides would need to be removed and instead have the currently existing values changed. Also I can understand if it's preferred to have the meta data on it's own separate line.