CSS Framework

[Dave South]

Just curious if anyone has tried a CSS framework like Blueprint, YUI, are YAML CSS? What did you think? Are they worth trying out?

Dave

[Mike Spackman]

We have tried blueprint and have liked it for the most part with the Byways project.  They do offer a very good spring board to get up and running with a clean grid layout.  Just don''t get too locked into the framework.  I really liked this article: http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/

Mike

On Thu, Apr 1, 2010 at 12:48 PM, Dave South <da...@neotribune.com> wrote:

Just curious if anyone has tried a CSS framework like Blueprint, YUI, are YAML CSS? What did you think? Are they worth trying out?

Dave

--
You received this message because you are subscribed to the Google Groups "Logan Developers" group.
To post to this group, send email to loga...@googlegroups.com.
To unsubscribe from this group, send email to loganDev+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/loganDev?hl=en.

[David Densley]

I haven't used any of those frameworks, but this is a great article on all the little idiosyncrasies with CSS. 

http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

Dave D

On Thu, Apr 1, 2010 at 12:48 PM, Dave South <da...@neotribune.com> wrote:

Just curious if anyone has tried a CSS framework like Blueprint, YUI, are YAML CSS? What did you think? Are they worth trying out?

Dave

[Ryan Shaw]

yea I like blueprint, and I really like the idea of laying your page out on a grid.  It makes things look cleaner.  also look at 960.gs  

blueprint and friends are super great for fast prototyping, but as you move to finished product, I find I end up not using the grid stuff they provide as much.

If you are into SASS, as I am, then you should for sure look at compass http://compass-style.org/ 

the thing I like most about compass is its mixins. here are some examples of actual sass (with compass) code I am using in instructure with it:

/* this selector does a lot of things, it uses a global variable that I have set up (!right_side_width) to set the width (that is handy because I use that variable to calculate other widths and stuff for other elements on the page), it uses mixins to handle all of the browser specific things you need for things like border-radius, opacity, and box-shadow. */

#right-side

  width = !right_side_width

  margin-bottom: 1em

  +box-shadow(-3px, 3px, 32px, !drop_shadow_color)

  +border-bottom-left-radius(5px)

  +opacity(0.5)

it is a lot prettier than the css you would need to maintain to do the same thing:

#right-side {
  width: 300px;
  margin-bottom: 1em;
  /* Webkit (Safari, Chrome) */
  -webkit-box-shadow: -3px 3px 32px #e8e8e8;
  /* Gecko (Firefox, Camino) */
  -moz-box-shadow: -3px 3px 32px #e8e8e8;
  /* CSS3 */
  box-shadow: -3px 3px 32px #e8e8e8;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;

  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);

}

/* an example of using variables to do aritmatic */

body.with-right-side.with-left-side

  min-width = !right_side_width + !left_side_width + !min_main_width

/* this sets up all kinds of magic so that the text on this line will automatically get elipses at the end if it would otherwise need to wrap to a new line, */ 

.ellipsis

  +ellipsis

On Thu, Apr 1, 2010 at 12:48 PM, Dave South <da...@neotribune.com> wrote:

Just curious if anyone has tried a CSS framework like Blueprint, YUI, are YAML CSS? What did you think? Are they worth trying out?

Dave