mirror of
https://github.com/namibia/awesome-cheatsheets.git
synced 2024-11-24 21:57:38 +00:00
Merge branch 'master' of github.com:LeCoupa/awesome-cheatsheets
This commit is contained in:
Julien Le Coupanec
commit
ec7afa056b
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
## 🤔 Why Awesome-Cheatsheets?
|
## 🤔 Why Awesome-Cheatsheets?
|
||||||
|
|
||||||
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I reorganized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
|
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
|
||||||
|
|
||||||
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
|
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
|
||||||
|
|
||||||
@ -75,6 +75,7 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
#### Basics
|
#### Basics
|
||||||
|
|
||||||
- [HTML5](frontend/html5.html)
|
- [HTML5](frontend/html5.html)
|
||||||
|
- [CSS3](frontend/css3.css)
|
||||||
|
|
||||||
#### Frameworks
|
#### Frameworks
|
||||||
|
|
||||||
|
|||||||
683
frontend/css3.css
Normal file
683
frontend/css3.css
Normal file
@ -0,0 +1,683 @@
|
|||||||
|
/****************************
|
||||||
|
* CSS3 CHEATSHEET - Beginner Friendly
|
||||||
|
* Learn more: https://web.dev/learn/css/
|
||||||
|
* Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS
|
||||||
|
* PDF for Better Readability: https://github.com/LeCoupa/awesome-cheatsheets/files/8880372/CSS_Cheatsheet.pdf
|
||||||
|
* Brief overview about CSS: http://jonkinney.com/assets/21/advanced_css.pdf
|
||||||
|
* (Advance) Know more about each topic in-depth: https://www.ciwcertified.com/resources/documents/sample-chapter/CCT02CDHTCSCK1405.PDF
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* Table of contents
|
||||||
|
* -------------------
|
||||||
|
* 01 | Font
|
||||||
|
* 02 | Text
|
||||||
|
* 03 | Background
|
||||||
|
* 04 | Border
|
||||||
|
* 05 | Box Model
|
||||||
|
* 06 | Colors
|
||||||
|
* 07 | Template Layout
|
||||||
|
* 08 | Table
|
||||||
|
* 09 | Columns
|
||||||
|
* 10 | List & Markers
|
||||||
|
* 11 | Animations
|
||||||
|
* 12 | Transitions
|
||||||
|
* 13 | CSS Flexbox (Important)
|
||||||
|
* - Parent Properties (flex container)
|
||||||
|
* - Child Properties (flex items)
|
||||||
|
* 14 | CSS Grid (Useful in Complex Web Designs)
|
||||||
|
* - Parent Properties (Grid container)
|
||||||
|
* - Child Properties (Grid items)
|
||||||
|
* 15 | Media Queries
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*****************************/
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 01: Font -----------
|
||||||
|
|
||||||
|
There are many properties related to the font, such as the face, weight, style, etc. These
|
||||||
|
properties allow you to change the style or complete look of your text.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/** Body Selector which applies properties to whole body <body></body> */
|
||||||
|
body {
|
||||||
|
/* Font-Family */
|
||||||
|
font-family: "Segoe UI", Tahoma, sans-serif; /* You can declare multiple fonts. */
|
||||||
|
/*if first font doesn't exists other ones will be declared serial wise */
|
||||||
|
|
||||||
|
/* Font-Style */
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
/* Font-Variant */
|
||||||
|
font-variant: small-caps;
|
||||||
|
|
||||||
|
/* Font-Weight */
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/* Font-Size */
|
||||||
|
font-size: larger;
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
font: style variant weight size family;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 02: Text -----------
|
||||||
|
|
||||||
|
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the
|
||||||
|
document.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* Applies to all tags with class 'container' ex: <div class="container"></div> */
|
||||||
|
.container {
|
||||||
|
/* Text-Align */
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
/* Letter-Spacing */
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
|
||||||
|
/* Text-Decoration */
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
/* Word-Spacing */
|
||||||
|
word-spacing: 0.25em;
|
||||||
|
|
||||||
|
/* Text-Transform */
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
/* Text-Indent */
|
||||||
|
text-indent: 0.5cm;
|
||||||
|
|
||||||
|
/* Line-Height */
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 03: Background -----------
|
||||||
|
|
||||||
|
As the name suggests, these properties are related to background, i.e., you can change the color,
|
||||||
|
image, position, size, etc., of the document.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* Applies to all tags with id 'wrapper' ex: <div id="wrapper"></div> */
|
||||||
|
#wrapper {
|
||||||
|
/* Background-Image */
|
||||||
|
background-image: url("Path");
|
||||||
|
|
||||||
|
/* Background-Position */
|
||||||
|
background-position: right top;
|
||||||
|
|
||||||
|
/* Background-Size */
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
/* Background-Repeat */
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
/* Background-Attachment */
|
||||||
|
background-attachment: scroll;
|
||||||
|
|
||||||
|
/* Background-Color */
|
||||||
|
background-color: fuchsia;
|
||||||
|
|
||||||
|
/* Background */
|
||||||
|
background: color image repeat attachment position;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 04: Border -----------
|
||||||
|
|
||||||
|
Border properties are used to change the style, radius, color, etc., of buttons or other items of
|
||||||
|
the document.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* You can also select multiple items */
|
||||||
|
div,
|
||||||
|
.container {
|
||||||
|
/* Border-Width */
|
||||||
|
border-width: 5px;
|
||||||
|
|
||||||
|
/* Border-Style */
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
/* Border-Color */
|
||||||
|
border-color: aqua;
|
||||||
|
|
||||||
|
/* Border-Radius */
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: width style color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 05: Box Model -----------
|
||||||
|
|
||||||
|
In laymen's terms, the CSS box model is a container that wraps around every HTML element. It
|
||||||
|
consists of margins, borders, padding, and the actual content.
|
||||||
|
It is used to create the design and layout of web pages.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
/* Float */
|
||||||
|
float: none;
|
||||||
|
/* Clear */
|
||||||
|
clear: both;
|
||||||
|
/* Display */
|
||||||
|
display: block;
|
||||||
|
/* Height */
|
||||||
|
height: fit-content;
|
||||||
|
/* Width */
|
||||||
|
width: auto;
|
||||||
|
/* Margin */
|
||||||
|
margin: top right bottom left;
|
||||||
|
/* Padding */
|
||||||
|
padding: top right bottom left;
|
||||||
|
/* Overflow */
|
||||||
|
overflow: hidden;
|
||||||
|
/* Visibility */
|
||||||
|
visibility: visible;
|
||||||
|
/* z-index */
|
||||||
|
z-index: 1;
|
||||||
|
/* position */
|
||||||
|
position: static | relative | fixed | absolute | sticky;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 06: Colors -----------
|
||||||
|
|
||||||
|
With the help of the color property, one can give color to text, shape, or any other object.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
p,
|
||||||
|
span,
|
||||||
|
.text {
|
||||||
|
/* Color - 1 */
|
||||||
|
color: cornsilk;
|
||||||
|
/* Color - 2 */
|
||||||
|
color: #fff8dc;
|
||||||
|
/* Color - 3 */
|
||||||
|
color: rgba(255, 248, 220, 1);
|
||||||
|
/* Color - 4 */
|
||||||
|
color: hsl(48, 100%, 93%);
|
||||||
|
/* Opacity */
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 07: Template Layout -----------
|
||||||
|
|
||||||
|
Specifies the visual look of the content inside a template
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* '*' selects all elements on a page */
|
||||||
|
* {
|
||||||
|
/* Box-Align */
|
||||||
|
box-align: start;
|
||||||
|
|
||||||
|
/* Box-Direction */
|
||||||
|
box-direction: normal;
|
||||||
|
|
||||||
|
/* Box-Flex */
|
||||||
|
box-flex: normal;
|
||||||
|
|
||||||
|
/* Box-Flex-Group */
|
||||||
|
box-flex-group: 2;
|
||||||
|
|
||||||
|
/* Box-Orient */
|
||||||
|
box-orient: inline;
|
||||||
|
|
||||||
|
/* Box-Pack */
|
||||||
|
box-pack: justify;
|
||||||
|
|
||||||
|
/* Box-Sizing */
|
||||||
|
box-sizing: margin-box;
|
||||||
|
|
||||||
|
/* max-width */
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
/* min-width */
|
||||||
|
min-width: 500px;
|
||||||
|
|
||||||
|
/* max-height */
|
||||||
|
max-height: 100px;
|
||||||
|
|
||||||
|
/* min-height */
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 08: Table -----------
|
||||||
|
|
||||||
|
Table properties are used to give style to the tables in the document. You can change many
|
||||||
|
things like border spacing, table layout, caption, etc.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
table {
|
||||||
|
/* Border-Collapse */
|
||||||
|
border-collapse: separate;
|
||||||
|
|
||||||
|
/* Empty-Cells */
|
||||||
|
empty-cells: show;
|
||||||
|
|
||||||
|
/* Border-Spacing */
|
||||||
|
border-spacing: 2px;
|
||||||
|
|
||||||
|
/* Table-Layout */
|
||||||
|
table-layout: auto;
|
||||||
|
|
||||||
|
/* Caption-Side */
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 09: Columns -----------
|
||||||
|
|
||||||
|
These properties are used explicitly with columns of the tables, and they are used to give the
|
||||||
|
table an incredible look.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* Applies to <table class="nice-table"></table> */
|
||||||
|
/* Not <table></table> */
|
||||||
|
table.nice-table {
|
||||||
|
/* Column-Count */
|
||||||
|
column-count: 10;
|
||||||
|
|
||||||
|
/* Column-Gap */
|
||||||
|
column-gap: 5px;
|
||||||
|
|
||||||
|
/* Column-rule-width */
|
||||||
|
column-rule-width: medium;
|
||||||
|
|
||||||
|
/* Column-rule-style */
|
||||||
|
column-rule-style: dotted;
|
||||||
|
|
||||||
|
/* Column-rule-color */
|
||||||
|
column-rule-color: black;
|
||||||
|
|
||||||
|
/* Column-width */
|
||||||
|
column-width: 10px;
|
||||||
|
|
||||||
|
/* Column-span */
|
||||||
|
column-span: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------ 10: List & Markers -------
|
||||||
|
|
||||||
|
List and marker properties are used to customize lists in the document.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
li,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
/* List-style-type */
|
||||||
|
list-style-type: square;
|
||||||
|
|
||||||
|
/* List-style-position */
|
||||||
|
list-style-position: 20px;
|
||||||
|
|
||||||
|
/* List-style-image */
|
||||||
|
list-style-image: url("image.gif");
|
||||||
|
|
||||||
|
/* Marker-offset */
|
||||||
|
marker-offset: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 11: Animations -----------
|
||||||
|
|
||||||
|
CSS animations allow one to animate transitions or other media files on the web page.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
svg,
|
||||||
|
.loader {
|
||||||
|
/* Animation-name */
|
||||||
|
animation-name: myanimation;
|
||||||
|
|
||||||
|
/* Animation-duration */
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
/* Animation-timing-function */
|
||||||
|
animation-timing-function: ease;
|
||||||
|
|
||||||
|
/* Animation-delay */
|
||||||
|
animation-delay: 5ms;
|
||||||
|
|
||||||
|
/* Animation-iteration-count */
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
|
||||||
|
/* Animation-direction */
|
||||||
|
animation-direction: normal;
|
||||||
|
|
||||||
|
/* Animation-play-state */
|
||||||
|
animation-play-state: running;
|
||||||
|
|
||||||
|
/* Animation-fill-mode */
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 12: Transitions -----------
|
||||||
|
|
||||||
|
Transitions let you define the transition between two states of an element.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
a,
|
||||||
|
button {
|
||||||
|
/* Transition-property */
|
||||||
|
transition-property: none;
|
||||||
|
|
||||||
|
/* Transition-duration */
|
||||||
|
transition-duration: 2s;
|
||||||
|
|
||||||
|
/* Transition-timing-function */
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
|
||||||
|
/* Transition-delay */
|
||||||
|
transition-delay: 20ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 13: CSS Flexbox (Important) -----------
|
||||||
|
|
||||||
|
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align
|
||||||
|
items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill
|
||||||
|
the space. And overall, it makes the responsive design more manageable.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* ---------------------- Parent Properties (flex container) ------------ */
|
||||||
|
|
||||||
|
section,
|
||||||
|
div#wrapper {
|
||||||
|
/* display */
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* flex-direction */
|
||||||
|
flex-direction: row | row-reverse | column | column-reverse;
|
||||||
|
|
||||||
|
/* flex-wrap */
|
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse;
|
||||||
|
|
||||||
|
/* flex-flow */
|
||||||
|
flex-flow: column wrap;
|
||||||
|
|
||||||
|
/* justify-content */
|
||||||
|
justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||||
|
|
||||||
|
/* align-items */
|
||||||
|
align-items: stretch | flex-start | flex-end | center | baseline;
|
||||||
|
|
||||||
|
/* align-content */
|
||||||
|
align-content: flex-start | flex-end | center | space-between | space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------------- Child Properties (flex items) ------------ */
|
||||||
|
|
||||||
|
p,
|
||||||
|
span,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
a {
|
||||||
|
/* order */
|
||||||
|
order: 5; /* default is 0 */
|
||||||
|
|
||||||
|
/* flex-grow */
|
||||||
|
flex-grow: 4; /* default 0 */
|
||||||
|
|
||||||
|
/* flex-shrink */
|
||||||
|
flex-shrink: 3; /* default 1 */
|
||||||
|
|
||||||
|
/* flex-basis */
|
||||||
|
flex-basis: | auto; /* default auto */
|
||||||
|
|
||||||
|
/* flex shorthand */
|
||||||
|
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
||||||
|
|
||||||
|
/* align-self */
|
||||||
|
align-self: auto | flex-start | flex-end | center | baseline | stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 14: CSS Grid (Useful in Complex Web Designs) -----------
|
||||||
|
|
||||||
|
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design
|
||||||
|
layouts more easily and consistently across browsers.
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------------- Parent Properties (Grid container) ------------ */
|
||||||
|
|
||||||
|
section,
|
||||||
|
div#wrapper {
|
||||||
|
/* display */
|
||||||
|
display: grid | inline-grid;
|
||||||
|
|
||||||
|
/* grid-template-columns */
|
||||||
|
grid-template-columns: 12px 12px 12px;
|
||||||
|
|
||||||
|
/* grid-template-rows */
|
||||||
|
grid-template-rows: 8px auto 12px;
|
||||||
|
|
||||||
|
/* grid-template */
|
||||||
|
grid-template: none | <grid-template-rows> / <grid-template-columns>;
|
||||||
|
|
||||||
|
/* column-gap */
|
||||||
|
column-gap: <line-size>;
|
||||||
|
|
||||||
|
/* row-gap */
|
||||||
|
row-gap: <line-size>;
|
||||||
|
|
||||||
|
/* grid-column-gap */
|
||||||
|
grid-column-gap: <line-size>;
|
||||||
|
|
||||||
|
/* grid-row-gap */
|
||||||
|
grid-row-gap: <line-size>;
|
||||||
|
|
||||||
|
/* gap shorthand */
|
||||||
|
gap: <grid-row-gap> <grid-column-gap>;
|
||||||
|
|
||||||
|
/* grid-gap shorthand */
|
||||||
|
grid-gap: <grid-row-gap> <grid-column-gap>;
|
||||||
|
|
||||||
|
/* justify-items */
|
||||||
|
justify-items: start | end | center | stretch;
|
||||||
|
|
||||||
|
/* align-items */
|
||||||
|
align-items: start | end | center | stretch;
|
||||||
|
|
||||||
|
/* place-items */
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
/* justify-content */
|
||||||
|
justify-content: start | end | center | stretch | space-around | space-between;
|
||||||
|
|
||||||
|
/* align-content */
|
||||||
|
align-content: start | end | center | stretch | space-around | space-between;
|
||||||
|
|
||||||
|
/* place-content */
|
||||||
|
place-content: <align-content> / <justify-content>;
|
||||||
|
|
||||||
|
/* grid-auto-columns */
|
||||||
|
grid-auto-columns: <track-size> ...;
|
||||||
|
|
||||||
|
/* grid-auto-rows */
|
||||||
|
grid-auto-rows: <track-size> ...;
|
||||||
|
|
||||||
|
/* grid-auto-flow */
|
||||||
|
grid-auto-flow: row | column | row dense | column dense;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------------- Child Properties (Grid items) ------------ */
|
||||||
|
|
||||||
|
p,
|
||||||
|
span,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
a {
|
||||||
|
/* grid-column-start */
|
||||||
|
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
|
||||||
|
|
||||||
|
/* grid-column-end */
|
||||||
|
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
|
||||||
|
|
||||||
|
/* grid-row-start */
|
||||||
|
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
|
||||||
|
|
||||||
|
/* grid-row-end */
|
||||||
|
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
|
||||||
|
|
||||||
|
/* grid-column shorthand */
|
||||||
|
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
|
||||||
|
|
||||||
|
/* grid-row shorthand */
|
||||||
|
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
|
||||||
|
|
||||||
|
/* grid-area */
|
||||||
|
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
|
||||||
|
|
||||||
|
/* justify-self */
|
||||||
|
justify-self: start | end | center | stretch;
|
||||||
|
|
||||||
|
/* align-self */
|
||||||
|
align-self: start | end | center | stretch;
|
||||||
|
|
||||||
|
/* place-self */
|
||||||
|
place-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/***************************
|
||||||
|
|
||||||
|
------------ 15: MEDIA QUERIES -----------
|
||||||
|
|
||||||
|
Using media queries are a popular technique for delivering a tailored style sheet to
|
||||||
|
desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
|
||||||
|
|
||||||
|
|----------------------------------------------------------|
|
||||||
|
| Responsive Grid Media Queries - 1280, 1024, 768, 480 |
|
||||||
|
| 1280-1024 - desktop (default grid) |
|
||||||
|
| 1024-768 - tablet landscape |
|
||||||
|
| 768-480 - tablet |
|
||||||
|
| 480-less - phone landscape & smaller |
|
||||||
|
|----------------------------------------------------------|
|
||||||
|
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
|
||||||
|
@media all and (min-width: 1024px) and (max-width: 1280px) { }
|
||||||
|
|
||||||
|
@media all and (min-width: 768px) and (max-width: 1024px) { }
|
||||||
|
|
||||||
|
@media all and (min-width: 480px) and (max-width: 768px) { }
|
||||||
|
|
||||||
|
@media all and (max-width: 480px) { }
|
||||||
|
|
||||||
|
/* Small screens - MOBILE */
|
||||||
|
@media only screen { } /* Define mobile styles - Mobile First */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
|
||||||
|
|
||||||
|
/* Medium screens - TABLET */
|
||||||
|
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
|
||||||
|
|
||||||
|
/* Large screens - DESKTOP */
|
||||||
|
@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 1024px and max-width 1440px, use when QAing large screen-only issues */
|
||||||
|
|
||||||
|
/* XLarge screens */
|
||||||
|
@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, use when QAing xlarge screen-only issues */
|
||||||
|
|
||||||
|
/* XXLarge screens */
|
||||||
|
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
|
||||||
|
|
||||||
|
/*------------------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Portrait */
|
||||||
|
@media screen and (orientation:portrait) { /* Portrait styles here */ }
|
||||||
|
/* Landscape */
|
||||||
|
@media screen and (orientation:landscape) { /* Landscape styles here */ }
|
||||||
|
|
||||||
|
|
||||||
|
/* CSS for iPhone, iPad, and Retina Displays */
|
||||||
|
|
||||||
|
/* Non-Retina */
|
||||||
|
@media screen and (-webkit-max-device-pixel-ratio: 1) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Retina */
|
||||||
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||||
|
only screen and (-o-min-device-pixel-ratio: 3/2),
|
||||||
|
only screen and (min--moz-device-pixel-ratio: 1.5),
|
||||||
|
only screen and (min-device-pixel-ratio: 1.5) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone Portrait */
|
||||||
|
@media screen and (max-device-width: 480px) and (orientation:portrait) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone Landscape */
|
||||||
|
@media screen and (max-device-width: 480px) and (orientation:landscape) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPad Portrait */
|
||||||
|
@media screen and (min-device-width: 481px) and (orientation:portrait) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPad Landscape */
|
||||||
|
@media screen and (min-device-width: 481px) and (orientation:landscape) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make Sure you don't forgot to add */
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> /* within <head> tag */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -50,6 +50,7 @@
|
|||||||
<sup></sup> <!-- Defines superscripted text -->
|
<sup></sup> <!-- Defines superscripted text -->
|
||||||
<kbd></kbd> <!-- Specifies text as keyboard input -->
|
<kbd></kbd> <!-- Specifies text as keyboard input -->
|
||||||
<small></small> <!-- Specifies small text -->
|
<small></small> <!-- Specifies small text -->
|
||||||
|
<ins></ins> <!-- Defines a text that has been inserted into the document -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Links Formatting -->
|
<!-- Links Formatting -->
|
||||||
|
|||||||
@ -162,7 +162,7 @@ CHEATSHEET C#
|
|||||||
|
|
||||||
8. C# compiler at the Command Line
|
8. C# compiler at the Command Line
|
||||||
|
|
||||||
csc File.cs -> Compiles Files.cs producing File.exe
|
csc File.cs -> Compiles File.cs producing File.exe
|
||||||
csc -target:library File.cs -> Compiles File.cs producing File.dll
|
csc -target:library File.cs -> Compiles File.cs producing File.dll
|
||||||
csc -out:My.exe File.cs -> Compiles File.cs and creates My.exe
|
csc -out:My.exe File.cs -> Compiles File.cs and creates My.exe
|
||||||
csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe
|
csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe
|
||||||
|
|||||||
@ -26,11 +26,14 @@ public class HelloWorld {
|
|||||||
|
|
||||||
| Type | Set of values | Values | Operators |
|
| Type | Set of values | Values | Operators |
|
||||||
|:-------:|:-----------------------:|:----------------------------:|:---------:|
|
|:-------:|:-----------------------:|:----------------------------:|:---------:|
|
||||||
|
| short | integers | between -2^15 and + (2^15)-1 | + - * / % |
|
||||||
| int | integers | between -2^31 and + (2^31)-1 | + - * / % |
|
| int | integers | between -2^31 and + (2^31)-1 | + - * / % |
|
||||||
| double | floating-point numbers | real numbers | + - * / |
|
| long | integers | between -2^63 and + (2^63)-1 | + - * / % |
|
||||||
|
| float | integers | real numbers 32 bit | + - * / |
|
||||||
|
| double | floating-point numbers | real numbers 64 bit | + - * / |
|
||||||
| boolean | boolean values | true or false | && \|\| ! |
|
| boolean | boolean values | true or false | && \|\| ! |
|
||||||
| char | characters | | |
|
| char | characters | 16 bit | |
|
||||||
| String | sequences of characters | | |
|
| String | sequences of characters |it's not a primitive data type| |
|
||||||
|
|
||||||
|
|
||||||
### DECLARATION AND ASSIGNMENT STATEMENTS
|
### DECLARATION AND ASSIGNMENT STATEMENTS
|
||||||
@ -44,6 +47,16 @@ a = 13212; //a is the variable name; 13212 is the literal which is assign to the
|
|||||||
|
|
||||||
//Initialization statement
|
//Initialization statement
|
||||||
int c = a + b;
|
int c = a + b;
|
||||||
|
|
||||||
|
//Compound assignment expressions
|
||||||
|
a += b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a + b
|
||||||
|
a -= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a - b
|
||||||
|
a *= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a * b
|
||||||
|
a /= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a / b
|
||||||
|
a %= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a % b
|
||||||
|
a ^= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a ^ b
|
||||||
|
a &= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a & b
|
||||||
|
a \|= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a \| b
|
||||||
```
|
```
|
||||||
|
|
||||||
### COMPARISON OPERATORS
|
### COMPARISON OPERATORS
|
||||||
|
|||||||
@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
|
|||||||
$string = 'Awesome cheatsheets';
|
$string = 'Awesome cheatsheets';
|
||||||
|
|
||||||
str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
|
str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
|
||||||
str_replace('Awesome', 'Bonjour', $string); // Replace all occurence (PHP >= 8.0)
|
str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
|
||||||
strcmp($string, 'Awesome cheatsheets'); // Compare two strings
|
strcmp($string, 'Awesome cheatsheets'); // Compare two strings
|
||||||
strpos($string, 'a', 0); // Get position in the string
|
strpos($string, 'a', 0); // Get position in the string
|
||||||
str_split($string, 2); // Split the string
|
str_split($string, 2); // Split the string
|
||||||
|
|||||||
@ -12,6 +12,7 @@ docker stop <hash> # Gracefully stop the specified cont
|
|||||||
docker ps -a # See a list of all containers, even the ones not running
|
docker ps -a # See a list of all containers, even the ones not running
|
||||||
docker kill <hash> # Force shutdown of the specified container
|
docker kill <hash> # Force shutdown of the specified container
|
||||||
docker rm <hash> # Remove the specified container from this machine
|
docker rm <hash> # Remove the specified container from this machine
|
||||||
|
docker rm -f <hash> # Remove force specified container from this machine
|
||||||
docker rm $(docker ps -a -q) # Remove all containers from this machine
|
docker rm $(docker ps -a -q) # Remove all containers from this machine
|
||||||
docker images -a # Show all images on this machine
|
docker images -a # Show all images on this machine
|
||||||
docker rmi <imagename> # Remove the specified image from this machine
|
docker rmi <imagename> # Remove the specified image from this machine
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user