CSS Commands
UPSPLASH
https://source.unsplash.com/950x800/?nature
Icons
<< Font Awsome ICONS >>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<a href="#"><span class='fa fa-facebook-square' aria-hidden='true'></span> </a>
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 230%;
color: #3D619D;
}
.fa.fa-facebook-square {
// for additional styling
}
Margins, CALC & Padding
inline-block // allows adding margin and padding to inline elements
Use Ems and percentages
Border set to transparent to stop element shift
box-sizing: border-box
// CALC to break out of div container //
body {
overflow-x: hidden;
}
.img {
width: 100vw;
max-width:100vw;
margin: 0 calc(-50vw + 50%);
max-height: 450px;
object-fit: cover;
object-position: center;
display: block;
}
Flexbox
// JUSTIFYING //
display: flex
justify-content: space-between (default is flex-start)
// ALIGNING //
display: flex;
align-items: center; (default is stretch)
// ADD flex-direction TO MAKE VERTICAL!! //
flex-direction: column;
// SPCE OUT VERTICALY (set on flexRow > div)///
display: flex;
flex-direction: column;
justify-content: space-between;
display: flex // set on parent
justify-content: space-between // horizantal spacing
justify-content: space-around // horizantal spacing
justify-content: center // horizantal spacing
flex-wrap:wrap // wrap items
justify-content: flex-start // items
// Vertically align items
display: flex
align-items: centered
display: flex // height:100vh
flex-direction: column // vertical
align-items: center // vertical
// IE Gotcha (think for flexing column sticky footer)
flex:1
flex:0
// Ipad gotch had to add below after running flex css through autoprefixer
display: -webkit-flex;
-webkit-justify-content: space-between;
Transforms
scale, scaleX, scaleY, scaleZ
rotate()
translate, translateX, translateY, translateZ
Transitions
.d1 {
border: solid 2px transparent;
background: red;
transition: border .5s, background-color .5s;
}
.d1:hover {
border-bottom: solid 2px red;
background-color: yellow;
}
//// FADE PAGE IN ////
.wrapper {
animation: fadein .6s;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity: 1;
}
} // end @keyframes section
//// FADE IN & UP ////
.flexRow > div {
transform: translateY(14px);
opacity: 0;
transition: transform 0.5s ease, opacity 1s ease;
}
.fadeInUp {
transform: translateY(0px) !important;
opacity: 1 !important;
}
//// JQUERY FOR ABOVE (see jquery page for vanilla solution) ////
function fadeInUp(elem) {
elem.each(function (i) {
$(this).addClass('fadeElementOut')
var e1 = $(this);
setTimeout(function () {
e1.addClass('fadeElementIn')
}, i * 120)
});
};
Center Items
//// CENTER AP HORIZANTALY ////
left: 0;
right: 0;
margin: 0 auto;
Selectors
ul.test li:not(:first-child) // dont select first child
nth-child
.flexFooterCol > *:nth-child(-n+2) // select first 2 Items
Background Images
background: url(../images/img.png) no-repeat 0px 0px, url(../images/img2.png) no-repeat top center;
Gradiants
background-color: #CCCCCC;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #98B18E 100%) fixed;
background: -moz-linear-gradient(top, #FFFFFF 0%, #98B18E 100%) fixed;
Nav Border Left
border-left: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: inset 1px 0px 1px rgba(255, 255, 255, 0.2);
Nav Borders Bottom
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2);
Buttons
.btn {
width: 120px;
height: 36px;
background-color: #9AAA3A;
background-image: -webkit-linear-gradient(top, #9AAA3A 0%, #9AAA3A 100%);
background-image: -moz-linear-gradient(top, #9AAA3A 0%, #9AAA3A 100%);
border: 1px solid #9AAA3A;
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-radius: 2px;
line-height: 36px;
color: #FFFFFF;
text-align: center;
cursor: pointer;
font-size: 90%;
}
.btn:hover {
background-image: none;
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.2);
}
Shadows
.shadowTwoSided {
box-shadow: 40px 0 50px -50px rgba(0, 0, 0, .3), -40px 0 50px -50px rgba(0, 0, 0, .3);
}
.shadowFull {
box-shadow: 0px 0px 30px rgba(0, 0, 0, .4);
}
Lines
hr {
border: 0;
height: 1px;
}
.hrMain {
margin: 1em 0 1em 0;
background-color: #bbb;
}
.hrFadeToWhite {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.hrFadeToBlack {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.dottedLineGrey {
height: 1px;
background-image: radial-gradient(#666 10%, transparent 40%), radial-gradient(#666 15%, transparent 15%);
background-size: 4px 4px;
background-position: .5em;
width: 100%;
margin: 1.5em auto;
}
Check Window Size Function - Using @media & CSS Style
$(function() {
checkWindowSize();
$(window).resize(checkWindowSize);
function checkWindowSize(){
if ($(".sampleClass").css("float") == "none" ){
// your code here
}}
});
.sampleClass {float:left;}
@media only screen and (max-width: 800px){
.sampleClass {float:none;}
}
Get Simple CMS
Get Simple - Page Slug
// below add to page template to assign spacific CSS to page slug
<?php
$pageName = (return_page_slug());
$bordercss = "<style>
.cmsOutput img {
border: 1px solid #ccc;
padding: 10px;
display: block;
margin: 0px auto;
}
</style>
";
if ($pageName=="cv") {
echo $bordercss;
}
?>