This post is over 2 years old. Solutions
referenced in this article may no longer be valid. Please
consider this when utilizing any information referenced here.
Impatient? Scroll to the bottom to download.
So I recently was working on a site and wanted to use CSS3 columns. But I really like how the grid system works in Bootstrap, and wanted to be able to define columns in a similar way (i.e. have different number of columns depending on the screen size). Not finding any pre-cooked versions, I decided to write my own.
Strictly speaking, you don’t need Bootstrap for this to work. But I did re-use Bootstrap’s grid variables so that it breaks along the same lines that Bootstrap’s grid does. It’s also worth noting that, natively, the columns will collapse on their own if you specify a width. This method just gives you a bit more control.
Now, you can do something like this:
And it will collapse appropriately. You can see it in action on this JSFiddle.
The original release weighed in at roughly 12k compressed. I trimmed some of the fat off it. The current version weighs in at 7.6kb minified, which is about as small as it can get until those properties have no prefixes. If you want, though, you could use the mixin and the media queries to only generate the selectors you actually need. That would trim the file down to a ridiculously small size.
You can download a zip file containing the source SCSS, standard CSS and minified CSS for the full 12-column layout supporting all bootstrap break points, below. No license. Consider it public domain.
Hi, I'm Rebecca Peck (she/her/hers.) I'm a blogger and
software developer. I'm into bike riding, photography, writing,
making wine, listening to history podcasts, 3D printing, home
automation, being a complete and hopeless Apple fangirl, and
anything involving airplanes, trains and model trains. I am based
in Huntsville, Alabama.
Interested in why you can't leave comments on my blog?
Read the article
about why comments are uniquely terrible and need to
die. If you are still interested in commenting on this
article, feel free to reach out to me directly and/or share
it on social media.
Let’s say you’re building a tiny little Vue app. Not a full-on single page app,
but something very tiny that will need to be embedded into other pages. Like a
fully interactive widget that can do a wide variety of things, but will need to
be self-contained so as not to interfere the rest of the page.
Traditionally, in the past, we did this with a wide variety of approaches. Going
back to the 90s, we use Java Applets (remember those?) and Active-X controls
(ugh). We used Flash too (double ugh). Lately the preferred approach has been
iframes, and while this is still a perfectly valid approach, it has it’s own
set of problems.
But now, we also have Shadow DOM
which provides us another approach to building richly interactive widgets that
are (mostly) contained from interfering with the styling of the surrounding page
and, crucially, doesn’t allow the surrounding page to interfere with the widget!
And, yes, Vue can totally be used inside a shadow tree. It just take a bit of
setup work.
petfeedd users, I am proud to announce the beta release of petfeedd 1.0.1. This
release has no major changes in it and is solely about addressing security issues
in many of the underlying libraries used by petfeedd.
To install it or upgrade from previous versions, you can simply run:
docker pull peckrob/petfeedd:latest
After five beta releases and months of testing, I am happy to announce petfeedd
Version 1.0 is now available. All changes from the beta branch have been merged
in and the release is now available on Docker Hub. To install it or upgrade from
Version 0.2, you can simply run:
docker pull peckrob/petfeedd:latest
And restart. It should perform all the upgrades needed for version 1.0.