How the Bootstrap Grid Really Works

Bootstrap Grid Explained Over the last few years I've answered a lot (over 800!) of Bootstrap questions on Stack Overflow. Frequently these questions relate to the Bootstrap grid __ that powerful blend of containers, rows and columns that make responsive layouts possible and flexible with Bootstrap. More often than not, questions about the Bootstrap grid can

Responsive Design, The Easy Way.

Choose Bootstrap, Foundation, Skeleton or another grid system? Responsive Frameworks Make Frontend Development Easier There is some debate on why a frontend designer would use a responsive framework instead of just using custom CSS. As you may know, the term "Responsive web design", was originally defined by Ethan Marcotte on A List Apart. A responsive

When to Use Bootstrap's Row Class

A closer look at: "Can I have more than 12 columns in a single Bootstrap row?" Numerous times on Stackoverflow I've seen questions like this.. Can I have columns add up to more than 12? What will happen if I put more than 12 in a row? Do I need a new row every 12

10 Essential Zurb Foundation Snippets

Zurb's popular Foundation 5 framework is a very useful tool for quick, consistent responsive design. Here are some useful code snippets, including navs, forms and cards for your next Foundation based project. Justified Navbar Here's a snippet showing a top-nav with centered links that expand the full width of the navbar. It includes a simple

Responsive Design: 6 Bootstrap Alternatives

Top Responsive Frameworks & Grid Systems As a responsive designer, you may want to consider viable alternatives to Bootstrap, but also avoid the "flavor-of-the-day" grid systems that come and go. These top frontend frameworks will allow you to build sites faster, and reap the benefits of responsive layouts, pre-defined styles and reusable components. So, which framework

Mobile App Showcase on MaterializeCSS

A responsive example with iPhone images that snap into place as you scroll each section. This code nugget uses the new MaterializeCSS framework inspired by Material Design. You could use this as a mobile app landing page, app tour, or mobile screenshot showcase. For this example, we use AngularJS 1.3 to get user data

Codeply Roadmap Updates

As of today, April 11, 2015, Several more items on the Codeply Roadmap have been completed... Comments & Discussion The Disqus integration is complete. You can now read and post comments from any saved ply. Just click the comments icon in the top navbar. No Framework Don't want to use a responsive framework? You don't

5 Material Design Examples using MaterializeCSS

It seems like a lot of #frontend developers these days are moving towards adoption of the Principles of Google's Material Design. At the core, Material Design emphasizes the metaphor of real world paper & ink. MD uses motion (animation) to focus attention and meaningful user interaction. MD elements and colors are bold & deliberate. The

Responsive Cards on Foundation + AngularJs

Cards are a clean, consise means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like headings and photos with captions. I will use Zurb's Foundation for the responsive grid, but the could easily swapped out with Bootstrap, PureCSS

Responsive Bootstrap Layouts

A Guide to Column Ordering & Stacking in Bootstrap 3 Bootstrap 3's responsive grid is powerful, but getting columns to stack nicely in the desired order can be tricky. Here are some working examples and guidance that will help to make your responsive design life easier. You will find some tricks on using Bootstrap's push and