All Posts By

Matt Kurvin

Matt Kurvin

Matt has been involved in the arts his entire life. Attending art schools since he was 5, it was only natural that his career be surrounded by the creative. From layout, illustration, concept design, to photography and animation, he strives to keep on the cutting edge of contemporary design. Matt's specialties are in Web Design, User Interface Design, and Usability Design, implementing a full spectrum of software and programming languages including Html, CSS, JavaScript, jQuery, Adobe Suite, Sitefinity, and many others. Matt's passions include surfing, photography , playing music, world travel, and new experiences.

Articles

Using The “Hide Content” Feature in Sitefinity for Responsive Design

By | Sitefinity | No Comments

When working with responsive websites, one often needs to hide certain content depending on which device the site will be seen on. For example certain content may be accurately viewed on a laptop, but not on a tablet. Or content that looks good on a laptop and tablet, may not display correctly on a mobile device. Certain libraries like bootstrap handle these type of queries, but did you know this is also available in Sitefinity? It is pretty simple to set up. First make sure that your site is set up for responsive design through the Sitefinity admin, you can…

Read More

Custom Sitefinity Layouts Using Bootstrap (Or Any Other Grid System)

By | Uncategorized | No Comments

Today I am going to show you how to have your cake, and eat it too. Sitefinity’s layout system is great most of the time, but what if you want to use a custom grid system like Bootstrap along with it, while still using Sitefinity’s drag and drop layouts? Well you can, Sitefinity allows you to add to, or replace their existing classes. For example if you used the 4 column system, Sitefinity would automatically add classes like below: If we wanted to use a common 4 column Bootstrap layout, we would use the code below: <div class=”row-fluid”> <div class=”span3″>…</div>…

Read More

Hover Over Info for An Image Thumbnail

By | Uncategorized | No Comments

Today we are going to create a nice animated hover over to display information over an image. You can download the source code here. To start, let’s look at the code below: <div class=”wrapper”> <ul> <li> <div class=”image-wrapper”> <a href=”#”><img src=”images/1.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a> </div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/2.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a></div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/3.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a></div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/4.jpg” />…

Read More

Create a Responsive Table Layout with Unordered Lists and Divs

By | Uncategorized | No Comments

This post is an extension of a previous post I wrote on responsive layouts, you can read that post here. Today we are going to create a responsive table using unordered lists and divs. I am going to use an example from our site, it is the agenda for FalafelCon 2013. You can download the source files here. To start we are going to use an unordered list for the rows: Then we will use divs inside the lists for the columns: We want to set the main container width, and then override it for the specific devices we are…

Read More

Downloading resources in HTML5

By | Uncategorized | No Comments

Here is a nice little feature that allows you to download a resource by simply adding a download attribute to an a element, as shown below. In this case, since the download is added, the file will be downloaded instead of navigating to the href. Keep in mind this only currently works in Chrome, but will hopefully be added to other modern browsers in the near future.

Read More

Gettin’ Funky with Google Fonts

By | Uncategorized | No Comments

One great way to add a unique look to your website is by using custom fonts. There are many ways to do this by using images, javascript, etc… Google Fonts is an easy way to add custom fonts to your site. The Google Fonts API is compatible with the following browsers: Google Chrome: version 4.249.4+ Mozilla Firefox: version: 3.5+ Apple Safari: version 3.1+ Opera: version 10.5+ Microsoft Internet Explorer: version 6+ To get started, navigate to www.google.com/fonts/. Once on the page, you’ll notice filtering features on the left. You can filter by thickness, slant, width, Serif, Sans Serif, and Handwriting…

Read More

Create a Responsive Layout Using Media Queries

By | Uncategorized | No Comments

Today we are going to create a responsive layout using media queries, you can download the source files here. While there are many ways to go about doing this, I am going to focus on 4 distinct layouts. One for desktop and Tablet Landscape One for Tablet Portrait One for Mobile Landscape One for Mobile Portrait To begin we are going to create a wrapper and give it a width of 1000px, this will be the default size for Desktop and Tablet Landscape. .wrapper { background: none repeat scroll 0 0 #efefef; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);…

Read More

Enable Styling of HTML5 Elements in Early Versions of Internet Explorer using HTML5 Shiv

By | Uncategorized | No Comments

Today we are going to look into how we can enable styling of HTML5 elements in early versions of Internet Explorer by using HTML5 Shiv. What is HTML5 Shiv According to Wikipedia, “HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript.” How does it work First we need to target Internet Explorer borwsers before version 9. To do this, copy the code below, and place it in the head tag of your page. We…

Read More

Creating a “Back to Top” animation with jQuery

By | Uncategorized | No Comments

Today I am going to show you a simple way to bring a viewer to your web site back to the top of a page, with an animation, using jQuery. You can download the source files, here. To start make sure your page is loading jQuery, you can do this via a local file or use one of many hosted jQuery files. In this example we are linking to a file hosted by jQuery.com. <script src=”http://code.jquery.com/jquery-latest.js”></script> The second piece of code you will need is a link with a little bit of JavaScript in it, shown below: You can choose…

Read More

Making Rounded Social Icons with CSS

By | Uncategorized | No Comments

Today I am going to show you how to make rounded social icons with css. You can download the source files here. I have set this project up so that you can create many different icon sizes, border sizes, border colors, backgrounds images, background colors, and light/dark themes. Let’s start with the first large Icon: Here is the mark-up <div class=”circle-container extra-large”> <div class=”box-1 stripe-2 blue-1 border-dark-grey border-10 shadow”> <img src=”images/facebook-white.png” /> </div> <p>Facebook</p> </div> Here are the styles in detail. */ =========== Floats the container =========== /* .circle-container {     float: left; } */ =========== Adds the border, you can also…

Read More

How to Create and Register a Theme in Sitefinity.

By | Uncategorized | One Comment

Here is a simple step by step tutorial on how to create and register a theme in Sitefinity. First go to: Administration > Settings Then click on : Advanced Next go to: Appearance > Frontend themes. Then, name your new theme and enter the path. If you don’t know the path you can copy the path of another theme in your project and replace the last part: Save Changes Now you can create the theme, got to: Administration > File structure. Next, navigate to your App_Themes folder: Create a new folder, and name your theme. Inside your new theme folder…

Read More

How to Convert an Inline Navigation to a Mobile Navigation

By | Uncategorized | No Comments

Today I am going to demonstrate one way to convert an inline navigation to a mobile navigation using media queries. View an example here. Or from this: To this: We start with a basic unordered list. <ul class=”falafelConNav”> <li><a href=”#”> About </a></li> <li><a href=”#”> Agenda </a></li> <li><a href=”#”> Sessions </a></li> <li><a href=”#”> Speakers</a></li> <li><a href=”#”> Sponsors</a></li> <li><a href=”#”> Venue</a></li> <li><a href=”#”> Register</a> </li> </ul> The idea is to change the css when the screen reaches a certain size, in this case 480px. to do this we use a media query like the one below: @media (max-width: 480px) { .falafelConNav {…

Read More