Solution Items

I recently discovered that you can right click on the solution in Visual Studio in the solution explorer panel, you can add items that will be kept in the root directory. So in my case, I have an application which will consist of a questionnaire and a tracking application. I removed the web.config from each project and instead added one config to the solution items. My directory now has the main Root folder (let's call it ResearchStudyName) inside which is the config, and a generic error page I added called error.htm, and inside ResearchStudyName are 2 directories, Questionnaire and Tracking.

Now in order for the needed files to be there upon publish, I add them as linked files to each project by using Add > Existing Items whereupon I navigate to the files in the root dir, and drop down the Add button to change it to Add as Link.

All done!

Blueprint CSS Framework

I have been hearing a lot of great things about Blueprint and after reading more into, I think we could use it. Basically Blueprint is a CSS grid framework. Layout grids have been primarily used in publishing to help achieve page layout and design but have become very popular in website design, especially WordPress blog themes. Blueprint does not only provide a foundation to build grid layouts, it also includes css for print/screen, typography, and forms.

There are a few areas that I think Blueprint could really help us out.

1) it will cut down dramatically on development time
2) it ensures cross-browser compatibility
3) blueprint has a lot of tutorials and extra plugins that you could use for added design
4) The css files used are relatively small so they wont slow down our page loads

**By default, blueprint is a fixed layout but there is a plugin for liquid.

If this interests anyone, you could download the framework from blueprint's website below and the second link is a pretty good tutorial for beginners.

blueprint website:
http://www.blueprintcss.org/

Tutorial:
http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

CSS example: 100% height, fluid/min width layout

I was starting a new project and thinking about the CSS. I'll often copy from some old project but it bothered me that I didn't comment my old projects enough to remember the various sources I used to cobble together the layout in the first place, or what the basic layout had.

So I thought it would be good to throw some basic samples up here for future reference. I'll use the tag CSSlayout so that they can all be pulled up together.

Example 1:

This layout has:

1. centered content
   
2. a main div that has a fluid width, but also a min-width so it will expand but not shrink past a certain size; NOTE min-width breaks on IE < 7
   
3. you can make a faux 100% height left col (easily made right if you want, but why would you?) by adding an image
   
4. optionally this left col can go past the footer, so the footer appears to be only in the main content
5. 100% height so when there's very little content the screen will still be filled

code:

/* commented backslash hack \*/ 
body {text-align:center}/* centre for ie5.+*/
html, body{
 height:100%;
 background: #8b2d47;
 font: 0.9em georgia;
 color:green;
 } 
/* end hack */
body {min-width:916px;}
* {margin:0;padding:0}
#outer{
 min-height:100%;
 height:auto;
 background:#f3f7ff; /* url(bg.gif) repeat-y 0 0 <-- for faux 100% high column */
 width:78%;
 margin:0 auto;
 min-height:100%;
 position:relative;
 text-align:left;
 }
 
* html #outer{
 height:100%;
 width:74%;
}

#header {
 height:90px;
 background:#fff;
 }

#clearfooter{clear:both;height:50px;width:100%}

#footer {
 width:100%;
 position:absolute;
 bottom:0;
 left:0; 
 height:50px;
 background:pink; /* url(bg.gif) repeat-y 0 0  <--- add this in and you'll extend the left col vertically over the footer */
}

#footer p {
 margin:0 0 0 230px;
 padding:0.3em 0.5em 11px 50px;
 border-top:1px solid #b99032;
 background:#f3f7ff url(../images/logo_pitt.gif) no-repeat 3px 3px;
 }
#content {
 padding-top:12px;
 margin-left:200px; /* assumes left col */
 font-size:0.9em;
 }

LESS for CSS

Have you heard of this CSS tool called ‘LESS’? http://lesscss.org/index.html

It seems to be a good tool to organize CSS rules. It’s very easy to install if you have Mac OS X. For Windows, you need to install ruby first.