Archive for the ‘CSS’ category

Need a simple CSS layout for messages?

February 12th, 2013

I am working on a phonegap side project and I have a need to display a list of messages that users will be entering into a system and I couldn’t really find a good example online so I wrote one using pure CSS and Javascript. All you need to do now is hook it into a templating library and you got what you need, enjoy!!

Dynamically assigning css properties within the razor syntax.

February 9th, 2013

You may already know this, but I thought I would share anyways.  When you are writing webpages and you are loading the data dynamically through the razor syntax, it isn’t enough to just wrap your logic inside a <div> that has a class applied to it, you need to assign the css class within in the razor syntax.  The snippet below is an example of how you can assign a css class within the razor syntax:

@Html.CheckBoxFor(x => data.Selected, new { @class = "checkbox" })

The thing to focus on is the end of the snippet, the “, new { @class = “checkbox” }”  in that example I am setting the class name of the checkbox to a css class I have that styles the checkbox the way I want it to.  I couldn’t really locate an extensive list of these HTMLAttributes, so if you know of anything, please send me a link and I will update this article, thanks!!


If you are a Web Developer, JSFiddle is your friend!!

November 9th, 2012

If you surf around on the web much, I am sure you have come across a JSFiddle, or basically a code example online, here is an example of one I have been working on, I have been putting off using it for the longest time but last night I sat down and created an account and I can’t believe I didn’t use this tool long ago. You can pretty much do anything you want if you want to mock up web UI’s. If you need js libraries, just include them on the left using the “Manage Resources” link, you just reference the js library you want and it will include it and start using it with your code. This is a great tool to mock stuff up and send to co-workers or just place on blogs like this one. It has all the popular frameworks already included, all you have to do is check them off and it will start using em. It look like it will even simulate calls to the server, which I have yet to use but I will probably be testing that out in the future. So go ahead and create an account, its free and apparently accounts are limited, so you may want to hurry up, happy coding!!

Add GZip compression to your site

November 5th, 2012

I have been recently looking at ways to speed up performance on my website and I came across GZip compression, which is a great way to compress your javascript and css files before they come down to your system. A few of the benefits of this method are:

You can control what files are compressed.
Bots / SE spiders will crawl your pages faster than before
Decrease Bandwidth

Of course there is the drawback of the performance hit your server will take by running the compression on your files as they are being served, so you have to weight that into consideration as well. I have put below the code you have to add to your web.config file to get it going with, it goes in the section, enjoy:

<httpCompression directory="%SystemDrive%inetpubtempIIS Temporary Compressed Files">
      <scheme name="gzip" dll="%Windir%system32inetsrvgzip.dll"/>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="message/*" enabled="true"/>
        <add mimeType="application/javascript" enabled="true"/>
        <add mimeType="*/*" enabled="false"/>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="message/*" enabled="true"/>
        <add mimeType="application/javascript" enabled="true"/>
        <add mimeType="*/*" enabled="false"/>
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />

Are you writing LESS CSS?

September 11th, 2012

If you are a web developer and you write a lot of CSS, which chances are you do, then you need to be writing it using LESS.  The website to download LESS is here: and using it is really simple,  just include it in your site like so:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

And the Less Compiler will do the rest for you.  When you have all of that in place, you can starting writing your LESS CSS.

Less Files have a .less extension and you just include them in the same directory that you have your css files in.  The beauty of using LESS is that you can mix it with standard CSS, it will recognize both, so you can refactor your CSS alongside the LESS syntax, it doesn’t care!!

You can read all about it over on the link I have provided but basically you can create Variables, Mixins, Nested Rules, and even have operations on things like color and height and widths, basically a simple programming language for CSS, pretty sweet huh?

If you need a starting point to get going with LESS, I recommend going over and downloading the ELEMENTS.less file here:  It is basically a generified LESS file that takes a lot of the standard things you would do in LESS and puts them into a file to save you time.  I am also linking here my edited version of my elements file where I added a few more things if you would like something a little more robust:

Dynamically assign class name to HTML in razor syntax

August 1st, 2012

IF you are struggling with getting your html formatted correctly in like I am here is a little tip I found to set your html based on css classes you have in your css file.

@Html.CheckBoxFor(x => data.Selected, new { @class = "checkbox" })

I tried just wrapping the asp syntax in a div and that didn’t give me the results that I was looking for and besides, this syntax is a lot cleaner. There are other HTML options in the razor syntax but I couldn’t locate a good list anywhere, if you know of one, don’t hesitate to leave me a message and I will get this post updated with that information, thanks.