CSS Archives - Falafel Software Blog

Is an 80 Character Code Line Length Still Relevant?

By | C#, CSS, JavaScript, TypeScript, Visual Studio | One Comment

If you’ve spent any time reading about coding standards on the internet, you’ve probably come across the suggestion to limit lines of code to 80 characters and wondered if it’s still relevant today. The advise to limit lines to 80 characters is often connected to the historical limit of 80 characters in terminal windows. But what if your team is not subject to this constraint? Are there still any benefits to adopting this limitation? I tried living with it for a while and here are my takeaways. Growing pains Indentation When I first set out to try this style out,…

Read More

Kendo UI Customization with CSS

By | CSS, HTML5, Kendo UI | One Comment

I’ve been using Kendo UI for many years now and I continue to be impressed with the many ways it can be extended and customized. Recently, I had a client request a Kendo Grid customization that at first glance seemed like it might require some code changes, but in the end, it could all be done purely with CSS. Here is the scenario as a CSS customization example: by default, the Kendo Grid shows the sort icon immediately after the header text and when using the column menu with a filter applied, it highlights the border around the column menu…

Read More

Stop the Shake When Adding a Border on Hover

By | CSS, HTML5, Web | 4 Comments

A common scenario on a web page is to add a border around a clickable element when it is given focus.  Unfortunately this can cause a visible “shake” of the element and of any content below it when the border is displayed and when it is removed. Here is an example: Luckily there is an easy fix for this which is to include a transparent border on the element from the start. Here are the resulting CSS classes:

And now hovering over the image doesn’t “shake” the layout at all.

Read More

Kendo Grid Hierarchy with Shared Column Headers

By | Kendo UI, Web | 5 Comments

The Kendo Grid is one of the most complex and configurable widgets in the Kendo framework.  One of the options is to use a hierarchical grid which allows you to display data in a master/detail or parent/child configuration.  The default layout will give you an expand/collapse button with a child grid that has its own columns and headers, as displayed in the Hierarchy Grid Demo: But what if your parent and child grids have the same columns and you want to show the child columns in line with the parent row?  Fortunately, we can do this with a little JavaScript and…

Read More

Chrome Developer Tools: FalafelCON Notes and Resources

By | FalafelCON, Web | One Comment

FalafelCON 2014 was an excellent weekend and it was fun presenting on Chrome Developer Tools and walking through all the ways DevTools allows you to inspect, debug, and tune your web sites. If you attended the talk, you know that we spent all of our time in Dev Tools with very few slides, but here is the outline and notes for the talk along with resources that you can use to review all the topics and steps we covered: The Web Developers Toolbox – Chrome Dev Tools Outline

Read More

Loading JavaScript and CSS Resources from Nested ASP.NET Partial Views

By | .NET, ASP.NET, News, Web | One Comment

The Problem When ASP.NET v4 was released, a cool feature from the beta was lost: the AssetsHelper class. Brock Allen has a great blog post explaining it and noting that it doesn’t exist in the RTM version. Basically, this helper class would allow you to emit some scripts and stylesheets from a partial view and have them bubble all the way up the tree of view elements to the layout where they would be displayed with all the other js and css files emitted by other parts of the view. For example, this partial view can render to assets:

And those assets can be…

Read More

Image Sprites made easy with Web Essentials

By | ASP.NET, Web | 2 Comments

In one of my previous posts, I showed you how to keep your Visual Studio Web Essentials settings in sync with the rest of your team. Today I’ll demonstrate one of the hidden gems in this great Visual Studio extension: creating image sprites. Image sprites will allow web browsers to load images dramatically faster and with Web Essentials, they can be created without much effort!

Read More

Best Adobe Brackets IDE Extensions

By | Web | 7 Comments

I’m a big fan of Sublime Text, but the project has become stagnant and fragmented when version 3 was introduced. Its neglect and lack of vision for version 3 stunted its potential. However, the upside is that this forced web developers to pay attention to other, more modern IDE’s, such Atom and Brackets. Brackets has been around for awhile. It is open source, backed by Adobe, and has an active community. The great thing about these modern IDE’s is that they are light and geared towards web development. Things like live HTML development and JavaScript debugging are built right in. Brackets is built…

Read More

Behold, the Kendo Checkbox

By | JavaScript, Kendo UI | One Comment

Telerik’s Kendo UI offers an extensive collection of UI widgets for your HTML5 applications. One widget that seems to be missing is a Kendo Checkbox. Technically, we don’t really need one because we can use Kendo’s MVVM binding on any HTML element, including inputs with type=”checkbox” so we can bind the enabled, checked, and label values. But there is certainly a place for a checkbox widget that is styled the same and offers the ease of Kendo’s declarative initialization. We are going to use a combination of Kendo’s Widget.extend() and CSS to create a custom Kendo Checkbox that has a custom look to match our application.

Read More

Include CSS and JavaScript Resources in Sitefinity MVC Widgets

By | Sitefinity | 3 Comments

When Sitefinity added MVC in version 5.1, it was a real pleasure to create widgets the “new way” via MVC. What made it so unique is that Web Forms was still offered in the platform for developers to use as an alternative or hybrid approach, so you can mix Web Form and MVC controls on the same page. After the honeymoon stage was over, the community started to realize there was some serious limitations to the MVC implementation that made it nearly impossible to create pure MVC pages in the real world. Some examples were not being able to use your own…

Read More

Embedding Youtube Videos responsively

By | Sitefinity, Web | One Comment

Embedding external content into your website is one of the most common scenarios now a days. In this post, I will walk you through how you can embed Youtube URLs responsively. Step 1: Get the youtube embed source To get the Youtube embed source, simply go to Youtube.com and browse to your video and click share and embed. You will see embed code, typically, in an iframe like below Copy that code and paste in your HTML. Step 2: Wrap the iframe with a div Now lets wrap the iframe code we pasted in step 1 with a div so…

Read More

Don’t let those fixed position headers bother you

By | Sitefinity, Web | No Comments

What are fixed position headers? A common navigation paradigm now a days, thanks to Bootstrap, is “fixed navigation headers”. In this paradigm the navigation elements of the website are in a fixed position generally fixed to the top of the browser screen. See below for an illustration – See the header above and the content starts after that. And when you scroll to see more content The content scrolls but header stays where it is. Why is it a problem in Sitefinity’s context? Now this presents a tricky problem when dealing with templates in Sitefinity. If I were use this…

Read More

Getting Started with Web Components

By | Uncategorized | 4 Comments

If you’re a web developer, have I got a treat for you! What if I told you that copying & pasting large chunks of HTML to your page or mutating the DOM via jQuery plugins is a thing of the past? What if I told you that those techniques are nothing but web hacks we have been programmed to accept for all these years? I imagine that right now you’re feeling a bit like Alice. Tumbling down the rabbit hole? “You felt it your entire life. That there’s something wrong with the web. You don’t know what it is, but it’s…

Read More

Add Page Names as HTML Classes

By | Uncategorized | One Comment

Wouldn’t it be great if you can specify different styles per page all from the stylesheet? For example, your home page may have a larger header section than the rest of your pages. The solution would be to add a different class on each page so you can do something like this: .header {   height: 30px; }   .home .header {   height: 100px; } Only problem with this is most of the time your pages are generated by a content management system or web application. That means, you would have to hook into the page lifecycle and add the page…

Read More

Fluid Column Layout with HTML and CSS

By | Web | No Comments

I recently needed to lay out content in columns that had variable height, yet still have every row line up evenly.  While it is possible to achieve this using display: table-cell; but I am building my content dynamically and I don’t necessarily know how many items will be displayed. The best solution for this is typically to use float: left; on each element that needs to be placed in columns and while I could set a specific width to have uniform columns, if the height of one of the cells was different, the items would start to stack on top…

Read More

Two Falafels Named Icenium Insiders

By | News | No Comments

Today, two Falafel Software consultants were invited to participate in the new Icenium Insider program. As Icenium insiders, Jonathan “J” Tower and Daniel Plomp will have early access to draft product road maps and experimental new features. As new features are tested and roadmaps are unveiled, our new insiders will be able to share their ideas and feedback directly with the Icenium team. For those unfamiliar with Telerik’s Icenium product, the application enables developers to build cross-platform mobile apps using HTML, CSS and JavaScript in a locally installed or browser based IDE. Daniel began building cross platform mobile applications with…

Read More

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

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