Close

CSS Snippets

The One-Line Difference Between Ugly and Amazing Websites

Forget personal taste.

I’m telling you as sure as I’m sitting here… whatever your personal thoughts about the differences between this before and after… one will get you, “Um well… something just feels off.”

And, the other: “Wow! Clean, fresh. Amazing!”

It’s just how people are.

Anyway, here’s the before:

And, here’s the after:


This is a template I’m working on for a new course I’m doing. And, the difference is a single CSS declaration, but it’s light-years in terms of how it looks and how clients will react to it.

The code?

body, p, h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}

Yup, that’s it.

Making the font-weight thin.

As I was building this, something just didn’t seem right. And, it was annoying the hell outta me. So, I started playing around with the fonts and voila… that was the trick. Suddenly, all was right in devtopia once again!

Of course, this won’t be the case in every situation.

Sometimes, thinning the text will make things worse.

It’s knowing when to and when not to.

That’s the difference between a gimmick or “hack”… and a fundamental.

And, it’s these subtle fundamentals that make all the difference.

I had a designer-friend of mine tell me that once.

It’s true.

And, it’s stacking up all these seemingly small things that makes the difference between a successful, celebrated and well-paid developer… and one who struggles, gets treated like dirt and has to scratch and claw for every penny.

Anyway, if you want to learn more stuff like this, check out my new HTML course. It’s all about the fundamentals and the simple stuff that makes a big impact. My guess is even if you’ve already learned some HTML…

You’ll find things you never knew…

That’ll make you a better developer.

Like Adolf Ezeribe, who just reviewed the course:

“An Excellent Refresher and HTML Primer for anyone.”

Anyhoo, up to you.

Link is here: https://skl.sh/2Lqhh1v

Later,

John

July 30, 2018

Responsive Web Design: Building a Responsive Menu

In this responsive web design tutorial, you’ll learn how to build a responsive menu. You’ll learn:

  • how to target different breakpoints with media queries
  • how to write the CSS to “flip” the menu from vertical to horizontal view at those breakpoints
  • how to use jQuery to create a responsive navigation icon that toggles the mobile menu

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background: #000;
overflow: hidden;
}
.header {
float: left;
color: #fff;
padding: 15px;
overflow: hidden;
}
.logo {
font-size: 24px;
}
.handle {
float: right;
background: #222;
color: #fff;
border: none;
font-size: 18px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
}
nav a {
text-decoration: none;
color: inherit;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
padding: 0;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
padding: 20px;
}
nav ul li:hover {
background-color: #222;
}
section {
box-sizing: border-box;
line-height: 1.5em;
width: 70%;
margin: 0 auto;
padding: 20px;
}
@media screen and (max-width: 767px) {
.header {
float: none;
}
nav ul {
background: #222;
max-height: 0;
width: 100%;
}
nav ul.show {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
.handle {
display: inline;
}
section {
width: 100%;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.handle').on('click', function(){
$('nav ul').toggleClass('show');
});
});
</script>
</head>
<body>
<nav>
<div class="header">
<a class="logo">Demo</a>
<button class="handle">
<i class="fa fa-bars"></i>
</button>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="content">
<h1>Responsive navigation is da bomb!</h1>
<p>Mobile users around the world thank you!</p>
</section>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

August 8, 2015

Pure HTML and CSS Dropdown Menu

Here’s how to create a pure HTML and CSS dropdown menu:

Here’s the code I used in the video:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Dropdown Navigation</title>
<style>
body, html {
margin: 0;
font-family: Arial, sans-serif;
font-size: 1em;
}

.navbar {
width: 100%;
background-color: #000;
height: 80px;
color: #fff;
}

.logo {
display: block;
color: #fff;
text-decoration: none;
float: left;
height: 50px;
padding: 15px 40px;
font-size: 1.5em;
line-height: 50px;
}

.navbar .nav {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}

.navbar .nav li.nav-item {
float: left;
}

.navbar .nav li.nav-item > a {
display: inline-block;
padding: 15px 20px;
height: 50px;
line-height: 50px;
color: #fff;
text-decoration: none;
}

.navbar .nav li.nav-item > a:hover {
background-color: #333;
}

.dropdown a:focus {
background-color: #333;
}

.dropdown a:focus ~ .dropdown-container {
max-height: 500px;
transition:max-height 0.5s ease-in;
-webkit-transition:max-height 0.5s ease-in;
-moz-transition:max-height 0.5s ease-in;
}

.dropdown-container {
position: absolute;
top: 80px;
max-height: 0;
overflow: hidden;
background: #000;
color: #fff;
}

.dropdown-container a {
color: #fff;
text-decoration: none;
}

.dropdown-menu {
margin: 0;
padding: 0;
list-style-type: none;
}

.dropdown-menu li a {
display: inline-block;
min-width: 200px;
padding: 15px 20px;
border-bottom: 1px solid #333;
}

.dropdown-menu li a:hover {
text-decoration: none;
background: #333;
}

.content {
padding: 40px;
}
</style>
</head>
<body>
<nav class="navbar">
<a class="logo" href="#">CSS Navigation</a>
<ul class="nav" id="primary-nav">
<li class="nav-item"><a href="">Home</a></li>
<li class="nav-item"><a href="">About</a></li>
<li class="nav-item dropdown">
<a href="#">Dropdown</a>
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item"><a href="#">Sub Item 1</a></li>
<li class="dropdown-menu-item"><a href="#">Sub Item 2</a></li>
<li class="dropdown-menu-item"><a href="#">Sub Item 3</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<div class="content">
<h1>Pure CSS Navigation Source Code</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus mauris risus, at fringilla ante tempor vel. Duis nec lectus velit. Morbi malesuada, nulla id imperdiet posuere, nulla diam tincidunt neque, ac facilisis lacus tellus vitae nibh. Fusce malesuada, ipsum eget luctus pulvinar, nulla neque ultrices dui, accumsan malesuada eros tortor sed nisl.</p>
<p>Phasellus imperdiet libero ipsum, sit amet facilisis leo dignissim ut. Nulla euismod, nibh nec ornare tristique, leo quam posuere metus, sed vestibulum quam odio pellentesque mi. Proin consectetur lectus non interdum congue. Fusce rhoncus suscipit laoreet. Ut elementum sit amet quam a lacinia.</p>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 10, 2015

Simple CSS Button Styles Tutorial and Code

Here’s how to create some simple CSS button styles:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>CSS Buttons</title>
<style>
.btn {
display: inline-block;
border: none;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 4px;
}

.btn-lg {
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}

.btn-sm {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}

.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
</style>
</head>
<body>
<p><button>Submit</button></p>
<p><button class="btn">Submit</button></p>
<p><button class="btn btn-sm">Submit</button></p>
<p><button class="btn btn-lg">Submit</button></p>
<p><button class="btn btn-success">Submit</button></p>
<p><button class="btn btn-success btn-sm">Submit</button></p>
<p><button class="btn btn-success btn-lg">Submit</button></p>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

June 4, 2015