Topics: tools, development
Author: Maitrik
.parent-flex-container {
display: flex; <-- or inline-flex -->
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
.child-flex-item {
order: <integer>;
lex-grow: <number>; <-- default 0 -->
flex-shrink: <number>; <-- default 1 -->
flex-basis: <length> | auto; <-- default auto -->
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-
}
//Define Variable
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
// Import CSS file
@import 'reset';
//Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
//Extend / Inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
p[lang|="en"]{ <-- p[lang|="en"]{ <-- <p lang="en-us"> <p lang="en-uk"> --> }
a[title~=more] { <-- a[title~=more] { <-- <a title="want more info about this?">}
a[href^=mailto] {background- a[href^=mailto] {background-image: url(emailicon.gif);}
a[href^=http]:after {content: " (" attr(href) ")";}
a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}
E[attr*=val] : Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.
Note: Multiple attributes work! a[title][href]
@media print{
abbr[title]:after {
content: "(" attr(title) ")";
}
a[href^=http]:after {
content: "(" attr(href) ")";
}
}
input[type=checkbox]:checked + label {
color: red;
}
Target elements on the page based on their relationships to other elements in the DOM.
Updates dynamically if page updates.
Reduced need for extra markup, classes and IDs
tr:first-child,
tr:last-child {
font-weight: bold;
}
tr:first-of-type,
tr:last-of-type{
text-decoration:line-through;
}
tr:nth-child(even) {
background-color: #CCC;
}
tr:nth-child(3) {
color: #CCC;
}
tr:nth-of-type(odd) {
background-color: #FFF;
}
tr:nth-of-type(4n) {
color: #C61800;
}
tr:nth-of-type(3n-1) {
font-style: italic;
}
section:not(:target) > a {
border-bottom: 0;
background-color: #eee;
}
section:target > a {
background-color: white;
}
section:not(:target) > div { z-index: -2; }
section:target > div { z-index: -1; }
Pseudo-classes select elements that already exist.
Pseudo-elements create "faux" elements you can style.
::first-line
::first-letter
::selection (not in specification)
::before
::after
Specificity is not inheritance
Priority : 0001 = 1 < 0101 = 101 < 1000
Important : 1-0-0-0-0
Inline Style : 1-0-0-0
ID : 1-0-0
Class : 0-1-0
Element : 0-0-1
Global Selector : 0-0-0
ul > li { color : red } // 0-0-2
ul li { color : blue } // 0-0-2 : will apply due to order
Example
<p>
<before>before content - </before>
the content
<after> - after content</after>
</p>
@media screen & @media print
In link
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/smartphone.css' />
@media screen and (max-width: 480px){
a {
transition: background-color 200ms linear 50ms;
}
}
Media Query Options
Media Query Syntax/Punctuation/Tidbits
media="only print and (color)"
media="only screen and (orientation: portrait)"
media="not screen and (color)"
media="print, screen and (min-width: 480px)"
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.iphone4 { <-- high DPI -->}
}
@screen and (transform-3d) {
.transforms {}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
@font-face {
font-family: 'blah';
src: url('blah.eot');
src: url('blah.eot?#iefix')
format('embedded-opentype'),
url('blah.woff') format('woff'),
url('blah.ttf') format('truetype'),
url('blah.svg#blahRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'blah', arial, san-serif;
}
text-shadow: left top blur color;
.trans { text-shadow: 0 5px 1px rgba(0,0,0,0.2);}
.rainbow {
box-shadow: 0 0 0 10px red,
0 0 0 20px orange,
0 0 0 30px yellow,
0 0 0 40px green,
0 0 0 50px blue,
0 0 0 60px purple;
}
background properties
multiple background-image
background-image: url(brown.gif), url(blue.gif);
background: img position / size repeat attachment origin clip,
background: img position / size repeat attachment box{1,2} bgcolor;
background: url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box,
background: url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;
border: width style color;
border-left: width style color;
@keyframes tutsFade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.element {
animation-name: tutsFade;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
/* Short version */
.element {
animation: tutsFade 4s 1s infinite linear alternate;
}