CSS Snippets: Styling Breadcrumbs

In the famous old story of Hansel and Gretel, the children spread breadcrumbs behind them as they made their way into the woods. They left this trail of breadcrumbs so that they would always be able to find their way home. In web development, breadcrumbs are a navigational element that, much like Hansel and Gretel’s breadcrumbs, show you the path you took to get to the page you’re currently visiting, and allow you to retrace your steps, if you like. This helpful navigational element was actually named for the breadcrumbs in the old fairy tale.

While breadcrumbs are certainly a useful feature to add to any project, they’re often overlooked when it comes to adding style. Most of the time, they’re treated just like any other link in terms of style. If you want to add some flair to your breadcrumbs, check out the snippet below.

The HTML

Here’s the easy part. For the purposes of this example, we’ll just use static HTML to create our breadcrumbs, which will be <li> elements within a <ul> tag.

<ul id="breadcrumb">
 <li><a href="#"><i class="fa fa-home"></i></a></li>
 <li><a href="#">Crumb 1</a></li>
 <li><a href="#">Crumb 2</a></li>
 <li><a href="#">Crumb 3</a></li>
 <li><a href="#">Crumb 4</a></li>
 </ul>

Here’s how it looks so far:

Screen Shot 2016-12-13 at 5.23.21 PM

As you might be able to tell, we used a Font Awesome icon to indicate the home page. If you plan on using Font Awesome too, make sure you link to their library somewhere in the <head> section of your code. Here’s the link to their library:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The CSS

In the CSS, we’re going to give the breadcrumbs a nice arrow shape. This effect is achieved by utilizing the :before and :after pseudo-selectors (if you take a look at the code, you’ll see that all of the shaping of the breadcrumbs happens within the #breadcrumb li a:before and #breadcrumb li a:after selectors. If you’re interested in learning how to achieve that shaping, pay special attention to the uses of border and border-color within those selectors).

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
 font-family: 'Source Sans Pro';
 background-color: #d6fffb;
}

#breadcrumb{
 list-style-type: none;
 display: inline-block;
}

#breadcrumb li{
 float: left;
}

#breadcrumb li a{
 color: #fff;
 display: block;
 background: #f40c81;
 text-decoration: none;
 position: relative;
 height: 40px;
 line-height: 40px;
 padding: 0 10px 0 5px;
 text-align: center;
 margin-right: 23px;
}

#breadcrumb li:nth-child(even) a:before{
 border-left-color: transparent;
}

#breadcrumb li:first-child a{
 padding-left: 15px;
 border-radius: 4px 0 0 4px;
}

#breadcrumb li:first-child a:before{
 border: none;
}

#breadcrumb li:last-child a{
 padding-right: 15px;
 border-radius: 0 4px 4px 0;
}

#breadcrumb li:last-child a:after{
 border: none;
}

#breadcrumb li a:before, #breadcrumb li a:after{
 content: "";
 position: absolute;
 top: 0;
 border: 0 solid #f40c81;
 border-width: 20px 10px;
 width: 0;
 height: 0;
}

#breadcrumb li a:before{
 left: -20px;
 border-left-color: transparent;
}

#breadcrumb li a:after{
 left: 100%;
 border-color: transparent;
 border-left-color: #f40c81;
}

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

It’s a lot of CSS, but don’t worry, most of it is rather simple. Here’s what it looks like now:

Screen Shot 2016-12-13 at 5.04.23 PM

Finishing Touches

Let’s add some polish to this design by adding a cool hover effect that changes the background color from pink to green when the breadcrumbs are hovered upon. Because the #breadcrumb li a:before and #breadcrumb li a:after make up part of the background of the breadcrumbs, it’s important to remember to include hover effect style rules for them too, or else your breadcrumbs could end up looking a little funky when a user hovers upon them.

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

This is what your finished product should look like (notice that the hover effect is applied to Crumb 4).

Screen Shot 2016-12-13 at 5.04.30 PM

WordPress or Drupal: Which One is Right for You?

WordPress and Drupal are both popular, powerful CMS platforms, and if you’re a web developer, chances are that you’re going to have to work with both of them at some point in your career. Most developers have their own preferences for which one they’d rather work with, and these preferences can sometimes be based on arbitrary things, like which platform you worked with first, or they can be based on more concrete reasoning, like your level of PHP skills.

The truth is, WordPress and Drupal, while both CMS platforms, are similar in the broadest of terms, but it many ways they are very, very different. Neither is better than the other, but each is definitely suited to different types of projects and different types of developers. If you’re not sure which is most suited to you and your project, read our analysis of the two CMS platforms below.

WordPress

The greatest thing about WordPress is that it’s super user-friendly. The install only takes five minutes, and once you have everything set up, you can jump right in using any of the default themes, which are all responsive and feature clean, modern designs. With WordPress, it’s possible for even the most inexperienced developers to get a site up and running in a very short time frame.

If you’re not into any of the default themes, you’re in luck, because there are thousands of free and premium WordPress themes available, both from WordPress’s theme directory and from third parties, so you can make your site look great without the need for a developer or designer.

The other great thing about WordPress are the plugins. There are almost 50,000 free plugins available to add to your site, and they can all be added using your WordPress dashboards, so technically you don’t need to have any coding skills or FTP experience to add the plugins to your server (although it probably helps). Plugins are used primarily to add functionalities to your site, so WordPress is a great CMS option for people who are tech-savvy but not necessarily coders.

WordPress also has a great support community in the form of forums. If you have a question, chances are it has already been asked and answered somewhere in the archive. For all of these reasons, WordPress is the better CMS platform for people who don’t code, or for people who are new to coding. For a lot of developers, WordPress is the first CMS they use, which might explain why so many people have a preference for it, and why it’s a lot more popular than Drupal.

Drupal

WordPress’s user-friendliness is limiting in a lot of ways. Drupal relies a lot more on code than WordPress does, and using the dashboard interface isn’t as intuitive for a beginner as using WordPress is — generally, when you’re using Drupal, you have to use a lot more PHP than when you’re working on WordPress. Because Drupal is a little more technical than WordPress, it’s also a lot more powerful and dynamic.

Drupal has a lot of free themes and plugins (in Drupal they’re called modules) available to download, but they often require a little more time and effort to get up and running than the ones on WordPress…the default theme in Drupal is neither beautiful or responsive. You can get some that are, but you’ll have to search for them on your own. Drupal’s capabilities, however, are greater than those of WordPress, and the performance of a Drupal site is usually better and faster than a WordPress one. Like WordPress, Drupal also has a great support community.

If you’re just learning to code, Drupal probably isn’t for you. You should know a decent amount of PHP before starting to work on a Drupal build. However, if you’ve got some PHP knowledge or a coding background and want to build a powerful, dynamic site, Drupal is probably the way to go.

Conclusion

Use WordPress if you’re a beginner, or if the person who’s going to be managing the site is a beginner or not a coder. WordPress is also a great platform to use if you’re an experienced coder but are building a blog, or a site for a business that doesn’t need many custom functionalities.

If you aren’t an absolute beginner and/or you want to create a dynamic site that can handle all different types of content and perform many custom functionalities, Drupal should be your CMS of choice.

 

Adding AMP Support to WordPress Sites

The Accelerated Mobile Pages (AMP) Project is one of the latest initiatives by developed by Google to enhance the quality of mobile browsing. AMPs are an open-source framework developed with a goal of making mobile web pages quicker to load, more lightweight, and simpler in terms of both design and code.

The reason AMP pages are so much quicker and simpler than standard web pages is that they’re limited to certain libraries and functionalities. Only a certain set of HTML tags are allowed to appear in AMPS, and this also applies to CSS and jQuery. In fact, AMP pages draw from their own streamlined CSS and JS libraries to make sure that the code is as lightweight as possible.

Additionally, AMP pages are cached in the cloud to significantly reduce page load time and let users access their desired content almost immediately. The benefits of using AMP for your sites also go beyound giving your users a better UX on mobile, because it can also improve your search ranking — sites that use AMP are also more likely to be ranked higher on a Google search executed by a mobile device. Setting up AMP on your sites from scratch can be confusing and time-consuming, but if you’ve got a WordPress site, the install couldn’t be easier when using any of the following plugins:

AMP

Screen Shot 2016-11-14 at 3.27.58 PM

This plugin was developed by the people over at Automattic and is incredibly easy to use. Once it’s installed, it’s pretty much ready to go. To see the AMPs, you just need to install the plugin and then view any post with “/amp” appended to the end of the URL, so for example: www.mysite.com/mypost/amp. Once you view the page, you’ll see that the page has a clean design, the main focus of the page is the content, and that, of course, it’s quick to load.

AMP for WP – Accelerated Mobile Pages

Screen Shot 2016-11-14 at 3.33.28 PM

AMP for WP is a similar to the AMP plugin above, but with support for a few more WordPress features. This plugin has support for related posts, recent comments, Google AdSense, Google Analytics, color scheme customizations, social sharing buttons, social media embed support, and more. This plugin is a great option for those who want to benefit from using AMP without compromising too much of their site’s functionality, style, ad revenue, etc.

Facebook Instant Articles & Google Accelerated Mobile Pages by PageFrog

Screen Shot 2016-11-14 at 3.43.17 PM

This PageFrog Plugin is another popular plugin that will convert your posts into AMP format. A bonus of using this plugin is that it will also make your posts compatible with Facebook Instant Articles (FBIA), which is content that can be served to users from within Facebook’s mobile app, so if a user clicks on your link from within Facebook’s mobile app, they won’t be brought to an external browser, but can actually view your post within Facebook’s app. This plugin also gives you control over styling, branding, and theme customization, and allows you to run ads on the AMP and FBIA pages as well.

 

Guide to Creating CSS Toggle Switch

This guide will show you exactly the code you’ll need to create a cool toggle switch that sort of resembles the ones used on iOS devices. The toggle switch is interactive, so that when the user clicks on the switch, it actually changes positions (and reveals a color on the toggle bar that signifies whether or not the switch is “active”). The toggle is actually created by adding some serious styling to your average checkbox input HTML tag. To start building this effect, all you really need are a few lines of HTML.

The HTML

<div class="container">
 <input type="checkbox" name="toggle" id="toggle">
 <label for="toggle"></label>
</div>

As you can see, all we really need is a standard input tag to get the ball rolling. The real magic happens when we add the CSS, but make sure you don’t forget to include the label tag! See the CSS below to find out just how handy that label tag becomes.

The CSS

body{
 background-color: #d9d9d9;
}

input#toggle {
 max-height: 0;
 max-width: 0;
 opacity: 0;
}

input#toggle + label {
 display: block;
 position: relative;
 box-shadow: inset 0 0 0px 1px #a6a6a6;
 height: 30px;
 width: 50px;
 border-radius: 15px;
 margin: 100px auto;
 background-color: rgba(255, 255, 255, .3);
}

input#toggle + label:before {
 content: "";
 display: block;
 height: 30px;
 width: 30px;
 top: 0;
 left: 0;
 border-radius: 15px;
 background: rgba(172, 230, 0, 0);
 -moz-transition: .3s ease-in-out;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}

input#toggle + label:after {
 content: "";
 position: absolute;
 display: block;
 height: 30px;
 width: 30px;
 top: 0;
 left: 0px;
 border-radius: 15px;
 background: white;
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
 -moz-transition: .3s ease-in-out;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}

input#toggle:checked + label:before {
 width: 50px;
 background: #ace600;
}

input#toggle:checked + label:after {
 left: 20px;
 box-shadow: inset 0 0 0 1px rgba(172, 230, 0, 1), 0 2px 4px rgba(0, 0, 0, .2);
}

One little toggle switch takes about 60 lines of CSS to create, which is quite a lot, but once you see the final effect (image below), you’ll see that it’s totally worth it. Below is an image of the toggle switch in the “off” position.

Screen Shot 2016-11-07 at 5.44.31 PM

Some things of note in the CSS: the box-shadow property is one that is used often to create that 3D look. The border-radius property is used to give the input tag that oblong, rounded corner shape we’re so used to seeing on our mobile devices. The CSS also makes use of the label input and the :checked, :before and :after pseudo-selectors to create the toggle functionality and control the movements of the rounded “toggle”. See the image below of the toggle in the switched on position (this is the default).

Screen Shot 2016-11-07 at 5.44.24 PM

Best Mobile Analytics Solutions

Analytics are important, not only for tracking the amount of people visiting your site, but also to track their behavior once they’re on it. For mobile apps and mobile sites, popular analytic tools like Google Analytics don’t always work as well tracking behavior of app users as they do tracking the behavior of users on a desktop site. If you really want to analyze the behavior of your app users, you need to use analytic resources built specifically for mobile apps and sites. Take a look at the list below to see some of the best.

Flurry Analytics

flurry

Flurry Analytics can be used to easily and conveniently track the performance of your iOS and Android apps. You can track users’ actions and behaviors in order to learn about trends. It also gives you access to your users’ demographics and interests so as to really give you a feel for who your users are and what sort of content they may be interested in.

Countly

Screen Shot 2016-11-01 at 5.32.04 PM

Countly is a mobile app analytics tool that supports apps on iOS, Android, Windows Phone, and Blackberry. It features an easy to use dashboard and some great options for tracking and user interaction, including access to the habits and session details of your users, and the ability to interact with them using push notifications. Countly also gives you access to crash reports for all different OS builds of your apps, AND it allows you to track the effectiveness of your social media campaigns.

Localytics

Screen Shot 2016-11-01 at 5.44.00 PM

Localytics provides real-time analytics for your mobile apps, in addition to targeted, personalized messaging options for your users and marketing engagement and campaign tracking features. They also offer different pricing packages to scale with the size of your business.

Amplitude

Screen Shot 2016-11-01 at 5.49.49 PM

Amplitude lets you easily track user behavior across platforms so that you can easily compare behaviors on web, tablet, and mobile versions of your sites and applications. Amplitude also offers free options for using their service, as well as paid elite and enterprise options.

Answers

Screen Shot 2016-11-01 at 6.05.54 PM

Answers is a mobile app analytics platform that supports iOS and Android apps. The premise of the platform is that they give you the “answers” you’re looking for — performance metrics, user history and interests, trends — without you having to wade through a lot of data to figure out all of the “answers” on your own.

 

 

 

Best Resources to Learn to Code for Free

If you’ve ever wanted to learn how to code (or maybe you know some basics, but would like to learn more), now’s the time to do it. There are dozens of free code classes and bootcamp-type courses available to accommodate all levels and all schedules so that you can learn at your own pace. Whether you’ve never coded before in your life, or you’re an experienced coder looking to brush up their skills or learn a new language, there’s a good, free code course resource out there for you. Take a look at the list of free coding resources below to see if there’s something that suits you!

Free Code Camp

Free Code Camp is a unique resource in that it doesn’t just offer free code lessons, but it also allows its “students” to use their newly-acquired coding skills to work on real projects for non-profit organizations. Not only do you learn valuable coding skills, but you also get to start creating a portfolio that can be really helpful to you if your ultimate goal is to get a job in web development.

Codecademy

Codecademy is one of the most popular free coding resources, and has free interactive courses for several different languages, including HTML & CSS, JavaScript & jQuery, Python, Ruby, and PHP. In addition to teaching the fundamentals of these popular languages, they also offer courses in practical things, like website deployment, how to use Git, how to use SQL, how to learn Angular and Sass, etc. This resource is a great one for someone who’s interested in learning to code and wants to learn a little to see if it’s right for them.

Coursera

Coursera lets you take free coding classes from actual accredited schools and universities (schools like Hopkins, Duke, and Wesleyan, just to name a few, are among some of the ones offering free coding and computer science courses). While you will have to pay for some of the more advanced classes, it’s still a great research to receive some top notch education for free.

Udemy

Udemy is an online learning platform that offers over 40,000 courses in many different subjects, including coding and web development. Like Coursera, you’ll have to pay for some of the courses (especially the non-introductory ones), but if you’re looking to get a solid education in web development languages, this is the place to go.

HTML5 Rocks

HTML5 Rocks is a Google project that offers free tutorials and resources tailored to people who want to learn about code and tech. This site is an awesome resource for people who are already interested in web development or already know a little code, but are striving to learn more and be better informed.

Khan Academy

Like Udemy, Khan Academy offers courses in a variety of subjects, but their computer programming courses are known to be quite good. You can use Khan’s courses to teach yourself the basics of coding languages, and then you can also choose to take more advanced courses that will show you how to use the fundamentals to create projects to add to your portfolio.

Code Avengers

Code Avengers helps you to learn code interactively by letting you create web applications while learning new languages. When you’re done, you can add the projects to your portfolio to show off your skills and your coding knowledge.

 

A Guide to CSS Resets

CSS resets are a great tool that can be used to essentially reset some (or all, depending on the reset you use) of a particular browser’s default styling. Developers use resets to help ensure cross-browser compatibility, and to make it easier to style their HTML elements to match their design specs exactly without any default browser styling getting in the way. As a developer, you can choose to create your own custom reset or use one of the common reset snippets to reset browser styling. You can also modify any reset snippets you find to suit the needs of your projects.

The Universal Reset

This might be the simplest CSS rest of them all. The universal reset is used to set the margin and padding of every HTML element to zero. To use the reset, simply add this code to the top of your stylesheets:

*{
margin: 0;
padding: 0;
}

You’ll often see other properties added to this reset as well, like border: 0 and outline: 0, for example, but feel free too add any property you like. Just be very conscious of the fact that any property used with the * selector will be applied to all your HTML elements.

Eric Meyer’s CSS Reset

This is another common reset snippet that aims to eliminate browser inconsistencies. It’s inclusive of many different (but not all) HTML elements and resets margins, padding, and border values to 0, while also setting alignment to baseline. It also includes resetting rules for blockquotes. See the snippet below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

HTML5 Doctor’s Reset

The HTML5 Doctor’s Reset is essentially just a modified version of Eric Meyer’s reset, and was modified specifically with HTML5 and the HTML5 boilerplate template in mind. It includes specific resets for many more HTML elements than the Meyer reset, including input, table, hr, and a. This reset is a lot more in-depth than the other two and goes beyond just resetting the default — for many elements it creates a new, almost themed default setting. See the snippet below:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}

body {
 line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
 display:block;
}

nav ul {
 list-style:none;
}

blockquote, q {
 quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}

a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}

/* change colours to suit your needs */
ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
}

/* change colours to suit your needs */
mark {
 background-color:#ff9;
 color:#000; 
 font-style:italic;
 font-weight:bold;
}

del {
 text-decoration: line-through;
}

abbr[title], dfn[title] {
 border-bottom:1px dotted;
 cursor:help;
}

table {
 border-collapse:collapse;
 border-spacing:0;
}

/* change border colour to suit your needs */
hr {
 display:block;
 height:1px;
 border:0; 
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}

input, select {
 vertical-align:middle;
}

Conclusion

Resets can be a great tool to ensure cross-browser compatibility, to get rid of inconsistencies between browsers, and to determine new, custom default styling for your projects. However, resets can be a powerful tool — sometimes too powerful. If you’re not careful, your resets can end up changing the styling of something that you might not have wanted to alter (this is particularly true with the universal reset), so use them with caution.

Lastly, don’t forget that you can modify any rest snippet you like to reflect the needs of your project. The resets are open-source, so don’t be afraid to make changes. And if none of the resets above are really working for you, you can always write your own!