Skip to content

Instantly share code, notes, and snippets.

Avatar

Paul Barthmaier pbrocks

View GitHub Profile
View Simple-CSS-Menu-Transition.markdown
View Responsive-grid-using-elementQuery.markdown

Responsive grid using elementQuery

Example of a responsive grid using element queries instead of media queries.

A Pen by Tyson Matanich on CodePen.

License.

View GRG-Responsive-Grid.markdown

GRG Responsive Grid

Similar to Masonry, but with less heavy javascript. This particular version is limited to just square and 2:3 tall images, so it's definitely not as flexible as masonry, just snappier. All positioning is done in CSS, with just a single Javascript loop over the elements to update the classes. Note that bad images would expose the background.

A Pen by Olex on CodePen.

License.

View Fluid-Grid-Using-Text-align:-Justify.markdown

Fluid Grid Using Text-align: Justify

A new technique for responsive grids I've been working on which uses inline-block and text-align: justify.

Take a look at this article for an explanation of the fundamentals of the technique:

http://www.barrelny.com/blog/text-align-justify-and-rwd/

Essentially, margins are calculated by the browser and never specified in the CSS. This saves a lot of tedious work! Also by not having to use floats, clearfixes, or nth-child, we avoid many common problems associated with more traditional methods.

View Simple-Responsive-Image-Grid.markdown
View Responsive-Image-Grid-From-RSS-Feed.markdown
View Image-Grid.markdown

Image Grid

A list of images that by default is two-columns. As screen real estate becomes available, more columns are added.

A Pen by Brad Frost on CodePen.

License.

@pbrocks
pbrocks / index.html
Created Jan 19, 2015
seamless image grid and img overlays
View index.html
<div class="bGImg">
<img src="http://www.stockvault.net/data/2010/11/24/116234/small.jpg" />
<p>THIS IS SOME OVERLAY TEXT</p>
</div><div class="bGImg">
<img src="https://farm4.staticflickr.com/3774/10670407354_bba85826ce_n.jpg" />
<p>THIS IS SOME OVERLAY TEXT</p>
</div><div class="bGImg">
<img src="http://www.stockvault.net/data/2010/11/24/116234/small.jpg" />
<p>THIS IS SOME OVERLAY TEXT</p>
</div><div class="bGImg">
View Ajax-Lazy-Load-with-AngularJS.markdown
View Change BuddyPress Activity Title
add_filter( 'bp_get_directory_title', 'change_activity_title' );
function change_activity_title( $data ) {
if ( 'Sitewide Activity' === $data ) {
$data = 'Name';
}
return $data;
}