Todd Santoro Designs

Fixing Bootstrap’s irregular column stacking

Todd Santoro — Wed, 13 Apr 2016 18:20:43 +0000

I had a problem when displaying an unspecified number of logos on a site I was building using Bootstrap. The issue was on a smaller responsive screen I couldn’t use rows to clear the float and because some logos were taller than others sometimes there would be a “stair” effect going on. See in row two there are only two logos? This is caused because the first logo in row one is taller than the other two in that row.

The Bootstrap Fix

I thought for a minute and decided to add a

tag to every 3rd element on small screens and every 4th element on larger screens with the Bootstrap .clearfix class. I then added .visable-xs and .visable-sm, .visable-md and .visable-lg on the respective

tags to make them appear and disappear depending on the media query.

Check out the JSFiddle

SHould you have another solution or a way to make this solution better please leave a comment below.

The post Fixing Bootstrap’s irregular column stacking appeared first on Todd Santoro Designs.

A new codepen.io snippet to create an abstract CSS3 background

Todd Santoro — Tue, 10 Nov 2015 14:29:14 +0000

I recently needed a seamless abstract background for a client project. I searched high and low to find something for my needs. I came across a CSS3 background site that gave me some inspiration. After some tinkering I became an expert in CSS3 background-image gradients so I will share with you my abstract CSS3 gradient background on codepen.

I hope this helps someone with their project because it saved me a ton of bandwidth and an HTTP call:)

Here is the CSS3

.abstract {
  background-color: #8ac8d5;
  background-image:
  radial-gradient(rgba(76,139,152,1), rgba(138,201,214,.05) 200px, transparent 400px),
  radial-gradient(rgba(76,139,152,1), rgba(255,255,255,.1) 300px, transparent 400px),
  radial-gradient(rgba(76,139,152,1), rgba(138,201,214,.1) 400px, transparent 400px);
  background-size: 1000px 500px, 700px 500px, 700px 500px; 
  background-position: 0 -200px, 300px -100px, 700px -200px;
  height: 500px;
}

And the HTML

The post A new codepen.io snippet to create an abstract CSS3 background appeared first on Todd Santoro Designs.

Dribbble Shots From ToddSantoro.com Designs

Todd Santoro — Mon, 13 Apr 2015 15:23:36 +0000

I recently was drafted as a player on Dribbble and have uploaded several shots. As a web designer it was important for me to be part of this community to showcase my talents. Should you find yourself in need of a Dribbble invite please make a comment on this post with a link to your portfolio and follow me on Dribble.

Here are a few of my shots that I think you will like. One of my favorite’s is “Cayo Heuso” for the Key West Tourism Board. Cayo Heuso translates to bone island and better known as Key West, Florida in the Florida Keys.

The post Dribbble Shots From ToddSantoro.com Designs appeared first on Todd Santoro Designs.

Mobile-friendly sites and Google SEO

Todd Santoro — Wed, 25 Mar 2015 17:03:09 +0000

Get ready web site owners, on April 21st, 2015 Google will start favoring mobile-friendly sites much more. In this post by Google concerning mobile-friendly search results Takaki Makino, Chaesang Jung, and Doantam Phan explain that mobile user’s search results will be ranked by how mobile-friendly a site is. You can view the guide to mobile friendly sites and how to get your SEO in order.

While getting my sites in order I found this tool in Webmaster Tools to be very handy. It allows you to see if a page is mobile device friendly and what it looks like to Google. You can also get a full mobile report inside Webmaster Tools.

Make sure to make your web site responsive and use the tools inside Webmaster Tools so you can optimize and get better organic SEO results. Should you need help with this in Key West to Columbus and beyond please contact ToddSantoro.com Designs at 650.416.6285

The post Mobile-friendly sites and Google SEO appeared first on Todd Santoro Designs.

Responsive Web Design sketchbook

Todd Santoro — Fri, 18 Apr 2014 16:28:11 +0000

ToddSantoro.com Designs has released a Responsive Web Design Sketchbook under the Creative Commons License for web designers to use or improve. Leave us a message or tweet out the link if you find it useful.

Download your free copy of Responsive Web Site Design Sketchbook by ToddSantoro.com Designs.

The post Responsive Web Design sketchbook appeared first on Todd Santoro Designs.

An SVG fallback for your HTML5 and CSS3 responsive web site designs using Modernizer

Todd Santoro — Wed, 18 Dec 2013 19:31:27 +0000

There are still some browsers out in the wild that do not support the .svg file format. Some browsers will support in-line images and not in a CSS background image.

Browsers that do not support in-line .svg images are:

ie6 – ie8
Android 2.1 – 2.3
Safari 3.1
Firefox 2.0

Browsers that do not support .svg CSS background images:

ie6 – ie8
Android 2.1 – 2.3
Safari 3.1
Firefox 2.0 – 3.6
Opera 9.0

Some browser versions support them but display them a bit pixelated when scaled. Have a look at this chart to see what browser versions are partially supported using CSS and this chart for in-line images.

So we need a fallback to make sure every user gets the same UX – User Experience. We will be relying on Modernizer.js to help us out. You can follow these instructions on how to install modernizer and get started.

Once you get Modernizer installed you can add the following jQuery snippet to change all of your inline .svg images to .pdf images in browsers that do not support .svg.

$( document ).ready(function() {
	$(function() {
		/*SVG to PNG if browser does not support it*/
		if(!Modernizr.svg) {
			$('img[src*="svg"]').attr('src', function() {
				return $(this).attr('src').replace('.svg', '.png');
			});
		}
		/*eof SVG to PNG*/
	});

});

Next we will tackle the CSS background images. This one is simple because you only have to make a no-svg class for your background image.

.image { background:url(img/some-image.svg) center center no-repeat; }
.no-svg .image { background:url(img/some-image.png) center center no-repeat; }

When Modernizer runs on the page it adds a bunch of classes to the tag and one of those classes is either svg or no-svg so all we have to do is target the no-svg class like I did above in the CSS and display the .png image. give it a try!

The post An SVG fallback for your HTML5 and CSS3 responsive web site designs using Modernizer appeared first on Todd Santoro Designs.

Key West Lorem Ipsum Generator

Todd Santoro — Thu, 12 Dec 2013 20:31:27 +0000

Key West lorem ipsum ocean conch beach sun, beer conch fritters…

Introducing Key West Lorem Ipsum Generator

As a web designer I was sick and tired of using the standard lorem ipsum. Then I came across Bacon Ipsum. I was amused enough to develop a Key West Lorem Ipsum version of the project for web designers and copy writers to use. I created mine from scratch in WordPress and using a database table to house my data. As of this writing there are 161 Key West words used to create the Lorem Ipsum paragraphs.

I have also built a RESTful JSON API for everyone to use. Once I get the documentation together I will make another post and link it here with all of the parameters that you can use.

Here are all of the words that comprise Key West Lorem Ipsum Generator:

fish, dolphin, palm tree, Duval street, Jimmy Buffet, margarita, boat, star fish, southernmost city, cuba, 90 miles, Fort Zachary, Fort Jefferson, Sloppy Joe’s, Captain Tony, Captain Eric, laid back, hammock, sand, Thomas Edison, Lou Gehrig, Harry Truman, and Tennessee Williams, Ernest Hemingway, Henry Flagler, Over-Sea Railroad, Florida Keys, island, snorkel, dive, sun tan, sunset, Key West, bicycle, fishing, sailfish, Blue Heaven, Green Parrot, gay, lesbian, one human family, cuban, cigar, old town, bahama village, new town, harbor, bight, dingy, eco-tourism, shrimp, lobster, watersports, dry tortugas, schooner wharf, higgs beach, west martillo, east martillo, golf, mallory square, rest beach, smathers beach, glass beach, mel fisher, turtle, kayak, eagle, osprey, reef, mangroves, channel, port, bow, starboard, stern, cleat, Key West Pink Shrimp, yellow tail, sharks, sailing, treasure, power boat races, fantasy fest, conch republic, queen conch, US 1, Over-Seas Highway, ocean, conch, beach, sun, beer, conch fritters, key deer, gecko, mosquitos, florida straights, ship wreck, western union schooner, art, coast guard, navy, cayo hueso, hurricane, Spanish galleon Santa Margarita, atocha, stock island, tank island, fleming key, dredgers key, sunset key, tank island, christmas tree island, mooring, mile zero, little white house, bone cay, Matthew C. Perry, Truman Annex, wisteria island, cuban chug, square grouper, gulf of mexico, cow key, sub-tropical, buoy, parrot heads, simonton, sand key, western dry rocks, eastern dry rocks, snuba, cafe con leche, cuban mix, swim, sightsee, slosh ball, boca grand, key lime, lighthouse, custom house, shipwreck, salvage, chickens, roosters, music, civil war, cuban missile crisis, homeless, coconut trees, banana trees, sunset celebration

The post Key West Lorem Ipsum Generator appeared first on Todd Santoro Designs.

jQuery + WordPress 3.3 may = problems

Todd Santoro — Mon, 30 Jan 2012 05:42:55 +0000

If you have recently upgraded WordPress and found your theme a bit under the weather then you may have been a victim of “jQuery update”. This is what I am calling it. The simple solution it to look for all of the “$” DOLLAR signs within the