css tricks@work

Background Images

Background-size: cover|contain|value; can be a huge benefit. Watch out for using with fixed position in parallax as it will stretch to the page size.

But, what I also like doing, instead of embedding an image, is using a background-image. For example, a logo on a website. Instead of embedding:

<a href="site.com" id="logo"><img src="https://via.placeholder.com/350x150" alt="Logo" /></a>

You gotta do CSS anyway, so why not streamline? Now the HTML and CSS can be much cleaner and you have more control over the image for media queries, right from the CSS (think about an SVG here, too!)

<a href="site.com" id="logo" title="Logo"></a>

a#logo{
background: url(https://via.placeholder.com/350x150) 0px 0px no-repeat;
background-size: contain;
width: 350px;
height: 150px;
}
@media screen and (max-width: 960px){
a#logo{
background-image: url(https://via.placeholder.com/125x75);
width: 175px;
height: 75px;
}
}

See Marriner, Perdue, Sugar, ThisIsPlastics. Is your full screen nav a different color? Just swap the logo with CSS. No need for complex HTML/JS!

Or for combining with border radius (it makes making new assets and having control over them at all sizes and interactions and keeping them for future use when you want that circle to be a rounded square)!

Also, multiple background images!

.grass-bg{
	background-image: url(/img/promotions/new-fresh/grass-left.png),url(/img/promotions/new-fresh/grass-right.png);
	background-repeat: repeat-y;
	background-position: left top, right top;
}

<div class="user-photo"><img src="https://via.placeholder.com/125x125"></div>

.user-photo{
width: 125px;
height: 125px;
overflow: hidden;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
img{
width: 125px;
height: 125px;
float: left;
position: relative;
margin: 0px 0px 0px 0px;
display: block;
}
}

See https://www.marriner.com/people/

or, just embed the image as a background image!

<div class="member-photo" style="background-image: url(https://www.sugar.org/wp-content/uploads/Kurt-Wickstrom-e1526333175280.jpg);"></div>

See https://www.sugar.org/about/board/
Bonus! Only hackers can steal your images now. 🙂

Shadows

You CAN do it in code and quite easily, so why waste KBs and time on doing it in an image (when possible)?

Use this handy generator: https://www.cssmatic.com/box-shadow

If you can code it, why not?

It provides much more control over the end-product and user experience. It also gives you the flexibility to change things easily in the future for maintenance and for easier asset creation.
wp-includes

metabox

This thing changed my life. Making wordpress plugins and modifying the admin area was a bit of a chore, but not so with meta box. Now it's super-easy to enhance custom posts, pages and built-in wordpress functionality with tons of advanced features, inputs and more. Take complete control of the CMS, make front-end programming easier and prevent user-input errors and make the client (and ultimately you who will have to maintain this thing) happy. Now you have no excuse to put EVERYTHING in the CMS!

There are tons of extensions and Marriner has access to them all. I'd probably trade my right-arm for this thing, well, maybe not the whole arm...but that's how I felt when this came out.

https://metabox.io/

Then they released a generator to easily generate the metaboxes that easily generate admin customizations! https://metabox.io/online-generator/

Gradients

All the cool kids were doing gradients in 2016, but we still can and we can do it directly in code. Now only if the accounts team and client would sign off on some creative gradient uses! 😉
http://www.colorzilla.com/gradient-editor/

Nested hovers

We covered this a bit earlier, but they work well and are high-performance and don't require JS.

Floats, Margins and more

Setting margins and floats and floating everything that's not fixed, static or absolute can give you 100% control over a layout. Change something? Chances are it won't break now. Wonder why that bug is happening? Chances are if everything was floated the items wouldn't be interacting expectantly. But hey, don't shoot the messenger. 🙂 Declare it all.

.class{
background: color url() 0px 0px no-repeat;
background-size: contain;
width: 100%;
height: 45px;
float: left;
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block; //or better yet, FLEX!
}

I've typed this out more times than one can probably count, but the more you specify, the more you know what's going on and the more control over pixel-perfect dev there is. Plus, if you need to go back and tweak something, you can tweak it. I know shorthand is nice and potentially it can save some kweight, but I think the benefits of long form far outweigh any potential time savings (since you won't have to go back and tweak things and if you do, you'll just change one property and not have to rewrite the shorthand) or KB savings. A few extra lines of CSS, especially since LESS shortens your CSS by a huge factor, is nothing in comparison to optimizing one image.

Consistency

On that note, putting properties in the same order, or close to it, every time, and grouped, goes a long way to quickly writing and maintaining code.

.consistency{
//backgrounds
//dimensions
//positioning
//absolute values when necessary
//margins
//pad
//font family
//font-size
//line height
//font-weight/style
//color
//other text parameters
//border
//display
//effects
//transitions
}

I'm not saying to do it exactly like this, but in a way that makes logical sense to you. Consistency is repeatability. Repeatability saves time and effort...and I prefer having more time and less effort!

Be Dynamic

Put it in the CMS if you can. If you can't, use variables, arrays and more in your dynamic code

[PHP, .NET, etc]

Writing a for loop simplifies things and makes your time writing code and maintaining it easier. Is there a change? An update? Now you don't have to edit ten identical divs. You just update the values in an array or change one line in the loop instead of changing that one line 10 times.

$RecipeTitles = array("Chicken Pot Pie", "Chicken Cordon Blue", "Chicken Noodle Soup");

for($i=0; $i<count($RecipeTitles); $i++){
echo '<div class="recipe';
if($RecipeTitles[$i]=="Chicken Cordon Blue"){
 echo ' blue';
}
echo '">'.$RecipeTitles[$i];
echo '</div>';
}

<div class="recipe">Chicken Pot Pie</div>
<div class="recipe blue">Chicken Cordon Blue</div>
<div class="recipe">Chicken Noodle Soup</div>

pseudointellectual

I used to hate the thought of pseudo classes...but wow, are they powerful. No need for extra divs. Easily change content through CSS (JS is a good way sometimes, too), and quickly change styles from desktop to mobile. See the "bullets" and the ribbon edges in the nav and footer of Perdue. http://perdue-fresh.marriner.com/

	#secondary-nav{
		background: @bright-blue-lighter;
		height: 35px;
		padding: 0px 15px 0px 15px;
		position: absolute;
		left: ~"calc(50% - 85px)";
		top: 10px;
		
			z-index: 1000001;
		-webkit-transition: @transitionNavAllFast;
		transition: @transitionNavAllFast;
		&:before{
			content: ' ';
			background: url(../img/nav/fresh/ribbon-left.png) right center no-repeat;
			width: 10px;
			height: 35px;
			position: absolute;
			left: -10px;
			top: 0px;
			display: block;
		-webkit-transition: @transitionNavAllFast;
		transition: @transitionNavAllFast;
		}
		&:after{
			content: ' ';
			background: url(../img/nav/fresh/ribbon-right.png) left center no-repeat;
			width: 10px;
			height: 35px;
			position: absolute;
			right: -10px;
			top: 0px;
			display: block;
			-webkit-transition: @transitionNavAllFast;
			transition: @transitionNavAllFast;
		}
		a:link, a:visited{
			height: 35px;
			float: left;
			position: relative;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 10px;
			display: block;
			text-decoration: none;
			font-size: 21px;
			line-height: 37px;
			color: #fff;
			font-weight: 500;
			font-family: @Populaire;
			
			-webkit-transition: @transitionNavAllFast;
			transition: @transitionNavAllFast;
			&:hover{
				color: @yellow;
			}
			&:after{
				content: '\2022';
				color: @yellow;
				padding-left: 10px;
			}
			&:first-child{
				padding-left: 0px;
			}
			&:last-child{
				&:after{
					display: none !important;
				}
			}
		}
		//
	}

//utility...
a:link, a:visited{
			height: 30px;
 		 	float: right;
  			position: relative;
			padding-left: 10px;
			font-family: @NexaRustSans;
			font-size: 10px;
			line-height: 30px;
			color: @bright-blue-lighter;
			text-transform: uppercase;
			font-weight: 900;
			-webkit-transition: @transitionNavColor;
			transition: @transitionNavColor;
			&:after{
				content: '\2022';
				color: @light-blue;
				padding-left: 10px;
			}
			&:hover{
				color: @green;
			}
		}


#footer{
	
	&:before{
		background: url(../img/nav/fresh/wavy-edge-light-blue-lighter.png) center bottom repeat-x;
		content: " ";
		width: 100%;
		height: 11px;
		position: absolute;
		left: 0px;
		top: -11px;
	}
}

Singular Codebase

With modern CSS there's virtually no more need for mobile and desktop versions of elements. Say goodbye to duplicate menus, divs, etc. You can do both with just one set of HTML components with the right implementation of CSS and JS with a little creative thinking.

height and max height

Sometimes with CSS and JS element auto heights don't work when you're animating. The trick? Set the height to auto and animate the max height. You can set the max height to be a rediculous number and since it'll never be that big, it will animate out to the right height. However, you want to be relatively close to the right number to the animation timing and easing doesn't go too fast or vary between elements.

.just_say_no_to_accordions{
 height: auto;
 max-height: 40px;
//transition options
 &.open{
max-height: 400px;
}
}

Superscripts and Subscripts vs. Line Height

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

css tricks

*not hacks