Ad

Saturday, April 23, 2016

Tutorial Spotlight - Front End Coding Tutorials Responsive Design Interactivity UX UI Design

Summary
Background

  • Responsive Design is an UI Trend 2015 "responsive design for The Internet of Things (IoT)"
  • Appears in job description of Front-End Developer job posts, lead UI designer job posts
Devices to be considered
Breakpoints 
  • Desktop
  • Large Tablet
  • Small Tablet
  • Smart Phone


Responsive design (CSS Tricks by Treehouse)
Responsive Columns Grid
https://css-tricks.com/guide-responsive-friendly-css-columns/

Dev tool - responsive column responsive grid calculator
http://www.responsivegridsystem.com/calculator/

A godzilla list of responsive design resources
https://bradfrost.github.io/this-is-responsive/resources.html

Use Twitter Bootstrap for responsive grids
<div class="row">
<div class="col-md-4">
</div>
</div>
Must enclose the column div in a row class div

Using Media Queries in JavaScript
http://modernweb.com/2014/03/24/using-media-queries-in-javascript/

Pure - a small light-weight responsive css library
http://purecss.io/start/

Useful libraries

Pizza Pie Charts is a responsive pie chart based on the Snap SVG framework from Adobe. It displays responsive pie charts (data diagrams) on websites.
http://zurb.com/playground/pizza-pie-charts

Dev tool - WordPress - create responsive WordPress themes without coding
CloudPress
http://cloud-press.net/


1 comment:

  1. Extremely useful information which you have shared here about image editor. This is a great way to enhance knowledge for us, and also beneficial for us. Thank you for sharing an article like this. super vectorizer mac

    ReplyDelete

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid