Creative Design Cheat Sheet

Design cheat sheet is a big help

cheat sheetsIn crafting the cheat sheet, it is important to make it good for easy reading. You can use tables, graphs, bullets and others. For cheat sheet, check this out!

Cheat Sheet Design: Responsive Design

design cheat sheet

Responsive.css:

@media all and (max-width: 1024px) {…}

@media not screen and (color) {…}

@media all and (min-width: 800px) and (max-width: 1024px) {…}

@media only screen and (orientation: portrait) {…}

@media all and (max-width: 420px) {

section, aside {

float: none;

width: auto;

}

}

Cheat Sheet Template: Media Queries

Bootstrap:

  • /* No media query since this is the default in Bootstrap */
  • /* Small devices (tablets, 768px and up) */
  • @media (min-width: 768 { … }
  • /* Medium devices (desktops, 992px and up) */
  • @media (min-width: 992 { … }
  • /* Large devices (large desktops, 1200px and up) */
  • @media (min-width: 1200 { … }

Foundation:

  • @media only screen {} /* Define mobile styles */
  • @ media only screen and (max-width: 40em) { } /* max width 640px, mobile-only styles */
  • @ media only screen and (min-width: 40.062em) { } /* min width 641px, medium screens */
  • @ media only screen and (min-width: 40.063em) and (max width: 64em){ } /* min width 641px and max width 1024px */
  • @ media only screen and (min-width: 64.063em) { } /* min width 1025px, large screens */
  • @ media only screen and (min-width: 64.063em) and (max width: 90em){ } /* min width 1025px and max width 1440px */
  • @ media only screen and (min-width: 90.063em) { } /* min width 1441px, xlarge screens */
  • @ media only screen and (min-width: 90.063em) and (max width: 120em){ } /* min width 1441px and max width 1920px */
  • @ media only screen and (min-width: 120.063em) { } /* min width 1921px, xxlarge screens */

Cheat Sheet Template: Other Designs

Pure CSS:

  • /* Small */
  • @media min width: 35.5em) { . . . }
  • /* Medium */
  • @media min width: 48em) { . . . }
  • /* Large */
  • @media min width: 64em) { . . . }
  • /* Large */
  • @media min width: 80em) { . . . }

How to do a Cheat: Design

It is important to know how to do a cheat because it will be your help. First, what you should do is to gather all the information you need and compile them. It is important to make sure that all the details collected are correct and you need for the design or for any purposes you want. You can ask your parents or friends to help you. Make sure to understand also the formulas or the codes. Some examples are in cnc g code cheat sheet.

There are cheat sheet tips on the internet that you can find out. Some are in the form of images and others are in text. If you want to make sure your own cheat sheet, check the tips to get more ideas. Lastly, it is better to consult cheat sheet if you want to review easily or to memorize the information in easy way. Check out cheat sheet and cheat sheet tips today! Don’t forget to remind yourself about basic cheat sheet HTML.

Use our design cheat sheet today!

References

http://www.codeply.com/responsive-design-cheatsheet.html

http://www.360doc.com/content/14/1204/18/21412_430411571.shtml

Download as PDF

Next Post

Previous Post

© 2017 My Cheat Sheet

Theme by Anders Norén