http://blog.codeply.com/Ghost 0.5Tue, 26 Sep 2017 21:55:39 GMT60In Bootstrap 3, adding a new grid tier (breakpoint) was not a simple process. It required various LESS or CSS customizations. Thanks to Bootstrap 4 SASS, and the new $grid-breakpoints variable it's very easy to add a new grid tier. Consider for example you want to add a new "extra extra small" breakpoint named xxs to support device widths less that 375 pixels. You can accomplish this with SASS...

First, add the new breakpoint by starting it at zero (0) pixels, and change the existing xs breakpoint to 375.

Recently, there has been a lot of talk about what's new in Bootstrap 4, but I was curious to examine the visual appearance & style differences. Here is a visual guide that will show you what's new in Bootstrap 4 as compared with Bootstrap 3.

Panels are now Cards

What you notice first in Bootstrap 4 is that .panel and .well have been replaced by .card. This makes a lot of sense as cards are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together or equal height. In they're default form you'll see they look almost the same.

The contextuals colors are still there in Bootstrap 4, but they're now bolder with inverse backgrounds..

Bigger Fonts

As you may have noticed with the cards, it's very apparent that typography is larger in Bootstrap 4. The default font size went from 14px to 16px in the new Bootstrap 4. There are also new "Display headings" that really stand out. All of the font sizing in Bootstrap 4 is completely based on rem units so that all font sizes are relative to the root HTML element.

Lookback: Bootstrap 3 Grid

In Bootstrap 3, the 4 breakpoints worked looked like this..

As you can see in Bootstrap 3, the smallest breakpoint has a wide range of devices less than 768px in width. As a result, there's no simple way to create different grid layouts for typical smartphone screens (~375px). There is also no way to distinguish between portrait and landscape mode on mobile devices.

New Bootstrap 4 Grid with XL Tier

Looking ahead to Bootstrap 4, the new grid tier provides better support for typical smaller device widths. Now there are 5 tiers (or breakpoints) to support typical portrait and landscape screen widths.

Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 544 px (or 34 em based on the new sizing). Eventhough the new XL tier would make one think it's been added to support extra large screens, it's actually the opposite.

All the 3.x tiers slide up in 4.x, to fit in the new 544px to 768px tier at the bottom. While the old 3.x col-xs-* supported screen widths under 768 px, the new 4.x col-xs-* tier supports screen width under 544 px. This new smaller xs tier means improved support portrait smartphones.

size

3.x

4.x

1200 - ∞

lg

xl

992 - 1199

md

lg

768 - 991

sm

md

544 - 767

xs (<= 768px)<="" td="">

sm

=>

0 - 542

-

xs

Desktop and laptops

The XL breakpoint is screen widths > 1200px

Landscape tablets

The LG breakpoint is screen widths > 992px

Portrait tablets and landscape phablets

The MD breakpoint is screen widths > 788px

Phablets and landscape smartphones

The SM breakpoint is screen widths > 544px

Portrait smartphones

The XS breakpoint is screen widths < 544px

Bootstrap 4 Grid Example

Outline Buttons

The obvious difference between 2.x to 3.x was the move from gradient to flat design which was most apparent in nav and button stlying. Bootstrap 4 buttons are still flat, with the addition of new outline buttons.

Responsive Alignment

One of my favorite new features in Bootstrap 4 is the addition of Responsive Floats that enable you to float an element (left, right, etc..) based on the grid tier. Lack of feature this was often an obstacle that required custom CSS media queries and classes in Bootstrap 3. Consider a scenario where we only want to right-align elements (float:right) on specific breakpoints, and otherwise return to the default behavior of float:none. Here pull-md-right is used to float right only the medium grid tier.

Similarly, the Text Alignment classes can be used for responsive text positioning in Bootstrap 4.

Bootstrap 4 is currently is alpha, but if you're ready to take on the new version you can learn more using these helpful resources:

]]>http://blog.codeply.com/2016/05/27/new-in-bootstrap-4/e286c0d9-0e95-4c60-8540-5c3d74066724Fri, 27 May 2016 15:11:12 GMTSidebar navigation has become a standard for responsive design, and many frontend developers are looking for the best approach. Here is a collection of responsive side navs to demonstrate various sidebar implementations including off-canvas, left, right, floating, push (where the main content is pushed to the side), sliding and collapsing.

Left sidebar that collapses to top

This example has a multi-level left side vertical nav, that automatically collapses when screen-width shrinks. When the sidebar is collapsed, the hamburger menu in the top right (displayed only when the sidebar is collapsed) can be used to toggle the nav. The sidebar nav position moves to the top on smaller screens (tablets, phones, etc..).

Left sidebar that collapses to icons

This snippet is a multi-level left side vertical nav, that automatically collapses to a narrow column of icons (facebook-style) when screen-width shrinks. The hamburger menu that is displayed above the main content area can be used to toggle the nav between narrow and full width. The side nav pushes the main content area to the right when expanded.

Dual collapsing sidebars and top nav

If you can't have enough menus, this example shows 2 collapsing sidebars, and a top navbar. The responsive dual collapsing sidebars on both left and right side of main content. Use the chevron icons to toggle either of the sidebars once collapsed off-canvas. The navbar at the top has 3 links and toggles to a vertical dropdown that overlays the body on smaller screens.

Left sidebar collapse to right-side overlay

This example demonstrates a left sidebar that collapses to a floating overlay right-side menu on smaller screens. There is also the standard Bootstrap top navbar and hamburger toggle menu enables a vertically collapsed top menu.

Left sidebar collapse to right-side push

Similar to the left-to-right overlay example, this snippet demonstrates a left sidebar that switches to a right-side "push" nav at smaller widths. When the sidebar is toggled to the wider state, it pushes the main content area to the left. This example also includes the responsive Bootstrap top navbar that vertically overlays the content when toggled.

Wider right sidebar off-canvas push menu

Sometimes you'll want to make the sidebar wider on smaller screens. Here's an example where the expanded right sidebar consumes more than half (60%) of the screen when it's toggled. This can also be adjusted on the most of the other sidebar examples. Since absolute postioning is used in most of the examples, it's a simple matter of changing the percentage width...

Fixed width responsive sidebar, fluid layout

This example shows a fixed width left column for sidebar. The sidebar scrolls independently of the main content area that is a fluid width (a percentage of the page width). On mobile and tablet screens, the sidebar collapses off-canvas, and can then be toggled using a button on the left side.

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 be answered by understanding a few basics about what exactly the grid is, and how it works. I will clarify the Bootstrap grid here so that you're no longer left wondering about things like...

How do the different grid sizes (or breakpoints) work?

Why does Bootstrap have a 12 unit (columns) grid?

Can I have more that 12 columns in a single row?

Why does the row have a negative margin?

Grid Basics

It doesn't take much time before Bootstrap newbies feel at home with the grid. Here's the HTML markup we'd use in Bootstrap to make a simple 2-column Web page layout.

Containers

The root (top-level) element of the Bootstrap grid is the container. At first the container may seem trivial or unneccessary, but it's very important in controlling layout width. Bootstrap provides 2 types (classes) of containers:

Bootstrap containers (container or container-fluid) work in close partnership with the row and col-* (columns) to create "the grid".

Rows & Columns

Inside the container, the row class is used to contain the grid columns. Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don't put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.

The Bootstrap row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. There are several reasons why the "negative margin" approach is used in Bootstrap.

Why does Bootstrap use negative margins?

The "negative margin" approach isn't just a gimmick, it works better. Some grid systems instead adjust the padding (or margin) on the first/last columns using CSS child selector logic. But, as you can see here this doesn't work well since the first & last columns rendered visually, can be different than the actual first & last columns in the HTML markup of any given row. There are also other reasons Bootstrap uses the negative margins including simpler CSS, nesting and column wrapping which is discussed later in this article.

The relationship between container and row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap's column classes col-*. Only columns should be the immediate children of rows.Horizontal layoutacross the page is relevant because screen width is an important consideration for responsive design.

The visual space between each column (known as the gutter) is created with padding (15px) on the left & right side of each column. As a result, the effective gutter between the content of each column is 30px (15px on the left + 15px on the right). The first (left-most) and last (right-most) columns line up perfectly to the edge of the row thanks to that negative margin discussed earlier.

Often users ask "Why does Bootstrap have 12 columns?". The reason Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier. Bootstrap's grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.

To enable or "set" a column width in your layout, simply use the appropriate col-*-* class in your HTML markup. The columns consume a percentage width of their container:

As you see, the appropriate col-* class is used to create various layouts.

Grid sizes (A.K.A - Breakpoints)

In addition to the concept of column width, Bootstrap has different "breakpoints" or grid sizes. The Bootstrap 3 grid comes in four (4) sizes to accomodate different screen (or viewport) widths. Each grid "size" encompasses a range that is designed to best-fit typical device screen widths such as that of desktops, laptops, tablets and smartphones. Bootstrap uses CSS media queries to create responsive breakpoints that establish a boundary for each grid size. These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.

xs - for the smallest screen widths like smartphones < 768 px

sm - for small screen widths like smartphones and tablets >= 768 px

md - for medium screen widths like tablets and laptops >= 992 px

lg - for large screen widths like desktops >= 1200 px

The upcoming Bootstrap 4 grid will add a new xl breakpoint to accomodate the widest high-res Desktop screens. The various breakpoints are combined with the column units to create different column layouts on different devices. For example, col-md-3 would be 25% width on medium size screens, and then you could add col-xs-6 to make the same column 50% width on the smallest screens. To enable or "use" a grid size, you simply specify it using the appropriate col-*-* class in your HTML markup. For example,

3-units wide on medium screens.. <div class="col-md-3">..</div>

6-units wide on small screens.. <div class="col-sm-6">..</div>

Combine the classes to use change column widths on different grid sizes.. <div class="col-md-3 col-sm-6">..</div>

Key points to remember about breakpoints and grid sizes:

Columns will stack vertically (and become full-width) on xs screens unless you use a specific col-xs-* class in your HTML markup. Use xs to prevent vertical stacking.

The smaller grid classes also apply to larger screens unless overriden specifically for larger screens. So, <div class="col-md-6"></div> is effectively the same as <div class="col-md-6 col-lg-6"></div>. Therefore, ou only need to use the class for the smallest device width you want to support.

Here are several more examples that demonstrate various Bootstrap grid layouts using different breakpoints.

Advanced Bootstrap Layouts

As you create different responsive layouts you find that some scenarios require more complex combinations of rows & columns to make "things fit" on multiple devices.

Column Wrapping

In some responsive scenarios you'll see that it's necessary to have columns exceeding 12 units in a single .row element. Consider for example a layout where we want 3 columns on larger devices, and 2 columns on smaller devices:

Offsets

The offset feature of the grid enables you to move columns to the right, or create more whitespace to the left. This comes in handy when you want a narrower centered layout. Here's an example of 2 - 33% width columns (col-*-4) that are centered by moving the first columns over 2 units (col-offset-md-2).

Nesting

Many scenarios require that columns inside columns, and in this case our columns become the containers. Bootstrap allows us to nest row and col-* inside other col-* which enables more control over when columns stack vertically at specific breakpoints. If we remember to think "mobile-first", we can nest the desired smaller device layout inside the desired larger layout. The enables the columns to switch positions (change the order) when the columns stack vertically on small devices:

When nesting, always remember to use another row around the inner columns to ensure proper spacing/padding. Also inner rows shouldn't exceed 12 columns. While you can use nesting to change the position of columns on different devices, you can also use Bootstrap's push and pull classes.

Ordering (Push - Pull)

Often, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. A typical 2-column page layout is where we can see the most common use case for column ordering. Using the Bootstrap col-*-push-* and col-*-pull-* CSS classes we're able to utilize the column ordering feature of the Bootstrap grid. On small (mobile) screens we want to show our main content at the top and then the sidebar nav below. This also helps SEO as the main content is closer to the top of the page when Google bot indexes the page.

An important point to remember is that both nesting and push/pull classes can be used to change column order. It's also important to think "mobile-first". First create the markup for the desired small screen layout, and then adjust the markup accordingly for the desired large screen layout.

So as you can see the Bootstrap grid is a powerful, well-considered "machine" of containers, columns and rows that enables us to build amazingly flexible responsive layouts. I look forward to the upcoming Bootstrap 4, and I will be revisiting these concepts with the new Bootstrap 4 grid which will introduce more breakpoints, CSS3 flexbox layouts and the long-awaited "equal height rows".

The upcoming Bootstrap 4 is built with SASS, and you can customize many options in the _variables.scss. There are several options to quickly change the default Bootstrap look. Set the SASS variables to easily change the grid breakpoints, container widths, borders, colors, fonts and more. There is also a variable to enable flexbox and used flexbox enabled components like the grid columns, cards and form inputs.

Bootstrap 4 also makes use of CSS 3 flexbox which is an option that can be enabled by changing the $enable-flex variable. Enabling flexbox lets us make use of flexbox enabled components like the grid columns, cards and form inputs.

If you use Bootstrap, you'll find several basic examples are included with the Bootstrap docs. I wanted to take them a step further with some advanced examples that demonstrate common design trends and patterns. Here's a collection of Bootstrap snippets that will show you how to implement features like responsive sidebars, sticky navbars and create layouts such as one page apps, multiple sections and dashboards.

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 layout adapts and changes based on the size and capabilities of the device (desktop, tablet, smartphone, etc...) that a Website is being viewed on. Having a responsive Website is now an essential as it directly impacts search engine placement (SEO), and the majority of Websites are now being viewed on mobile devices. Having a responsive Website also makes sense because it eliminates the need for a separate mobile Website.

There are many things that need to be considered when creating a responsive Website. Responsive design is not just about page structure and fluid grids. Elements like images and text must also be made flexible to adapt as needed to "fit" the screen the site is being viewed on. Responsive frameworks such as Bootstrap, Foundation and Skeleton can be specifically used to implement responsive "mobile-first" design.

There are many advantages to utilizing a responsive framework, and investing time in a homegrown grid solution doesn't really make sense. There is little sense in reinventing the wheel without a compelling reason to do so. Frameworks provide a repeatable base from which you can build Websites faster.

Codeply makes it easy to compare, explore and prototype using any of these responsive frameworks. It's currently integrated with Bootstrap, Zurb Foundation, Yahoo's PureCSS, Skeleton, Materialize, Semantic UI and UIkit. The editor interface contains all of the framework CSS classes, and code snippets which can simply be selected and dropped in as markup. This means you'll spend less time trawling through the docs to determine the appropriate markup to use. There are also hundreds of reusable code examples that you can search and fork.

In conclusion, Front end frameworks are created to make life easy. There's no harm in using them if you understand the core concept of a CSS / JS framework. Codeply is a tool you can use to leverage these frameworks. We're also compiling a list of responsive snippets which might be helpful for your projects.

]]>http://blog.codeply.com/2015/06/25/build-responsive-designs-the-easy-way/71ebd2b5-2a1e-4bb8-9a86-2c38452bbf43Thu, 25 Jun 2015 13:02:02 GMTA closer look at: "Can I have more than 12 columns in a single Bootstrap row?"

Every time I see this question, someone inevitably answers "No, you should never do that", or "columns should never be more than 12". That's when I quietly whisper to myself, WTF. Contrary to popular opinion, it's totally OK to have columns that total more than 12 units in a single row. It causes the row to wrap. This is directly from the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

You can also see examples of column wrapping (exceeding 12 units) in the Bootstrap docs.

In fact, there are many responsive scenarios where it's necessary to have columns exceeding 12 in a single .row element. Consider for example a layout where we want 3 columns across on larger devices, and 2 columns across on smaller devices:

By using more than 12 column units per row, the markup for this layout is simple:

If you try inserting a new row element every 12 units (or limiting the col-* units to 12 per row) you will find that it doesn't work. Remember, with Bootstrap 3 you can mix-and-match the column classes for different layouts for different viewports. Consider the "mixed grid" examples in the Bootstrap docs. You'll see cases where a single row contains 3 col-6-xs classes.

Additionally, having more than 12 columns per row is a common scenario when creating col-* dynamically. It can also be useful to go over 12 columns when you have an unknown amount of columns created dynamically, they will just wrap onto the next line, as they are floated left. If you're having a problem with gaps in columns of different height you can use a CSS clearfix every n-TH column like this.

If you're going to use more than 12 columns in a row, remember that column height does effect how things wrap because Bootstrap uses CSS floats. In some cases you may need to use responsive resets to clear the columns and prevent gaps. Bootstrap recommends "nested rows should include a set of columns that add up to 12 or fewer" if you're nesting columns inside other columns.

I hope that this post will enlighten some Bootstrap users who insist "Each row should have columns that add up to 12 and never exceed it". Read this post to learn more about how the Bootstrap grid works.

Yes, it's OK to have more than 12 columns in a single row.

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 CSS override using flexbox to stretch the nav links.

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 is best for you?

#1 - Foundation

The most apparent alternative to Bootstrap, Zurb's Foundation boasts a robust mobile-first grid system and many components that are missing from Bootstrap. Take a look at Foundation's responsive images, Equalizer, Pricing tables, Switches and JoyRide for some features you won't find in Bootstrap. However, Foundation doesn't have the wide variety of themes readily available for Bootstrap, so consider that if you plan on changing Foundation's minimal look-and-feel. It's easy to customize Foundation based sites using a separate style sheet or SASS. Foundation uses em sizing for most elements (ie: grid column widths, media queries, font-sizing, etc..) which provides improved flexibility over Bootstrap's percentage based unit sizing. You'll also find that Foundation is widely used, and plenty of tutorials to help you along.

#2 - Skeleton

Toughted as a "dead simple, responsive boilerplate", Skeleton is exactly that. Skeleton is a great choice for designers and developers that simply want a responsive grid. You won't find all the bells-and-whistles of Bootstrap such as sliders, alerts, panels and navbars. Skeleton is solely a CSS framework so you don't need to worry about any JavaScript / jQuery bloat. What Skeleton does offer is a powerful, lightweight grid that is perfect for creating responsive layouts. Skeleton also provides some base styles for typography, buttons and forms. On the downside, Skeleton doesn't include class for column ordering which would really help to make the minimal grid more flexible.

#3 - Pure CSS

Created by Yahoo!, Pure is another minimal CSS-only framework that's an extension of normalize.css. It's a repsonsive grid system that also includes core styles for forms, buttons, tables and menus. Like Bootstap, the Pure grid has 4 breakpoints for different device widths - sm, md, lg and xl. Pure ships with both a 5ths and 24ths based grid. The 5ths-based grid is very handy for layouts with odd numbers of columns, which is a layout feature you won't find in the Bootstrap grid.

#4 - UIkit

UIkit is self-described as "A lightweight and modular front-end framework for developing fast and powerful web interfaces". It's a very complete and complex framework that has just about everything but the kitchen sink. This is framework of choice for developers that want an all-in-one CSS/JS framework that doesn't leave you searching for that missing component. UIkit's grid is very flexible. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions, column ordering and multiple gutter sizes. None of the other frameworks offer this level of control. UIkit also supports CSS 3's flexbox which enables support for things like equal height columns. Check out the customizer and themes available at the UIkit website. UIkit is separated into "core" and "components" bundles which is beneficial if you just need the base features and components without all the extras provided in "components" bundle.

#5 - Semantic UI

Semantic UI is another component library implemented using a set of specifications designed around natural language. Like Bootstrap & UIkit, Semantic UI is a very complete framework that is extensive with features and components. Similar to Foundation, Semantic UI uses em grid and element sizing. Semantic includes more than 3000 theming variables so make it very easy and flexible to theme. The component libary is extensive with stuff like buttons, modals, labels, loaders, breadcrumbs, forms, accordions, cards, menus, etc.. Semantic UI is made available via a single large bundle of CSS and JavaScript files, which is something to consider if you're looking for a minimal framework.

#6 - Materialize

Many frontend developers 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 team at Materialize has adopted these principles into their responsive front-end framework that's based on Material Design. Materialize provides a responsive grid with 3 breakpoints, and many UI components that enable Web developers to rapidly design sites based on the Material Design language. It includes animation features, cards, collections (lists), buttons, form styles and 740 Material Design Icons courtesy of Google. There are also several JavaScript components that facilitate other features such as modals, scrolling animations, tabs and dialogs. Materialize is a very new framework, which it something to consider if you're looking for a stable, mature codebase. Currently it's available as a bundle of minified CSS and JS files, or as a SASS bundle for improved customization.

In conclusion, there is not a "best" framework for everyone, but there may be one Bootstrap alternative that is best suited to your needs. You can play with all of these great frontend frameworks at Codeply. Did I miss one that is a viable alternative? Let me know in the comments.

]]>http://blog.codeply.com/2015/06/11/6-bootstrap-alternatives-for-responsive-design/63f14394-32be-4e65-bd50-914bbccc77f8Thu, 11 Jun 2015 13:17:17 GMTA 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 and profile images from the RandomUser.me API, but you can replace this with your own static images and data as desired.

The interesting bit: Sections that snap into place upon scroll so that the user experiences smooth transitions between each section. This also prevents the sections from being partially or "half-way" scrolled. It is responsive in that the textual content is hidden on smaller screen widths so that only the iPhone image frame is visible.

The structure: The white iPhone is a transparent image background that is placed in an overlayed "placeholder" container. This .outer container is position:fixed over the sections that are repeated down the page. As you will notice, the iPhone is actually a background in the .ph-overlay div.

When you dive down into the full code you'll see that jQuery animate is used to smoothly scroll the appropriate section into place. We temporarily add the .wait class during this transition so that the $(window).scroll event (constantly fired as the user scrolls) ignores any in-progress section transition. For this reason, the $('.highlight:not(".wait")') selector is used when determining the current section.

So that's it for this snippet. Let me know how it works for you, and any improvements you'd recommend.

]]>http://blog.codeply.com/2015/04/30/mobile-app-showcase-on-materializecss/b339240f-a5ff-4842-a55f-273a60103ac2Thu, 30 Apr 2015 12:20:10 GMTAs 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 have to. Just select 'No Framework' for a plain old HTML starter w/o any frontend CSS or JS.

Load Framework from URL

You can also select the framework directly from the URL by way of /go/p/(framework)_(version). For example, if you want to load MaterializeCSS into the editor, just use: http://www.codeply.com/go/p/materialize

The responsive viewer has had several changes. You can go directly to http://codeply.com/responsive-test to test the responsiveness of any URL. The viewer can also be accessed from the editor by clicking the 'Responsive Viewer' link in the lower right corner viewbar.

Social Sharing of Plys

From the editor metadata menu or responsive viewer, you choose Facebook, Twitter or Google+ to share any saved ply. A snapshot of the ply will also be automatically generated and displayed in the social mention/tweet.

]]>http://blog.codeply.com/2015/04/11/codeply-roadmap-updates/98eda6fa-e164-4bde-b4de-4c8571bf6f71Sat, 11 Apr 2015 14:16:19 GMTIt 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 team at MaterializeCSS has adopted these principles into their responsive front-end framework that's based on Material Design.

Let's take a look at five examples using MaterializeCSS to demonstrate MD...

The first snippet shows responsive cards, where you'll see bold use of color. AngularJs and animate.css are used to create the cascading motion effect as the cards are loaded.

The next snippet demonstrates a responsive top nav that switches to a mobile sidebar on smaller devices. Click the user icon for the login modal. In this demo you'll see that the Materialize pushpin component is used to affix the sidebar when the page is scrolled.

Click the inputs of this contact form to see how motion is used to focus user attention.

Here's another example showing use of the Materialize collapsible accordion...

Filtering data using AngularJS in this select list snippet demonstrates the MD concepts of motion. Click a username to see how attention is focused to the bottom slide modal.

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 or the frontend framework of your choice.

The Angular Controller

Here's the simple controller that's used to fetch the user data from the RandomUser.me API. In a real AngularJs app you'd most likely move the $http get out to a user service, and then simply do something like userService.get() in the controller. This populates the $scope.users var that will be used to construct the panels using ng-repeat...

A little CSS is added to handle the text overflow, and to create the circle user images in each card. The ellipsis CSS class handle single line overflow since headings may vary in length. Also, the ellipsis-2 CSS class handles two-line overflow, so that descriptions inside the card show "..." instead of wrapping to another line. This enables each panel to be the same height.

For CSS animation, I'm using Dan Eden's animate.css. You'll see in the markup that AngularJS' ng-class-odd and ng-class-even can be used to switch styles on each panel rendered by the ng-repeat. The effect is that each panel alternates slide in from the left and right.

Alternately, you can create a staggered / cascading effect by adding a style delay to the -animation-duration used by the animate.css animated class. You don't need angular-animate for this since it's using the animate.css classes.

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 pull classes to think "mobile-first".

These 4 grid sizes (xs, sm, md, lg) enable you to control grid behavior on different devices (desktop, laptops, tablet, smartphone, etc..). When Web browser width changes, the Bootstrap CSS media queries (breakpoints) "kick-in" to change the width of the columns and in some cases stack the columns vertically.

Why Use Column Ordering? A Simple Use Case.

Often, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. This typical 2 column page layout is where we can see the most common use case for column ordering. Using the Bootstrap col-*-push-* and col-*-pull-* CSS classes we're able to utilize the real power of the Bootstrap grid.

When the sm breakpoint of less than 992 pixels is reached, the columns stack vertically and become 100% width. This places the sidebar above the main content on smaller devices.

However, the above example placed the sidebar above the main content which may not be desirable since the sidebar will push down the main content requiring users to scroll down on smaller devices. To resolve this, we use Bootstrap's push and pull classes to order the columns. The markup using push and pull changes to:

Using the push and pull classes we've pushed the 2nd column all the way to the right,
and pulled the 3 smaller columns back to the left. Now we have the desired layout:

Nest Smaller Inside Larger

Another rule to follow when creating ordered columns is to place the desired smaller layout columns, inside the larger layout columns using nesting.

Sometimes a simple pushpull won't work because of the desired column order. However, Bootstrap allows us to nest rows and col-* inside other col-* which enables us to have more control over when columns stack vertically at specific breakpoints. If we remember this, while continuing to think "mobile-first", we can nest the desired smaller device layout inside the larger layout like this...

Height Matters

Bootstrap columns always float left until stacked. As a result, shorter columns that exceed the 12 column total will naturally keep to the right of taller columns. When columns are about the same height, they stack into rows when the columns total exceeds 12 like this..

Not every case is suitable for push-pull, but if you understand the principal of mobile-first, it will make creating layouts much easier. In some cases it's necessary to float columns using the pull-left and pull-right classes. Of course there are exceptions to the rule. You'll see that in example #8 below pull-right is used, and not the mobile-first rule.