A CSS framework that aims to cut down on your CSS development time

using blueprint css within a jquery ui tab

I'm using blueprint to do a complex form layout that involves jquery-ui tabs, but when I try to use the blueprint span-x divs within the jquery-ui tabs, the formatting gets all screwy....

<div id="tabs">
    <li><a rel='nofollow' href="#blahblah"><span>blah blah</span></a></li>
    <li><a rel='nofollow' href="#blahblahblah"><span>blah blah blah</span></a></li>
  <div id="blahblah">
    <div "class="span-8 last">
       <!--some input boxes-->

If i take the "class-span-8 last" out, the page works as expected. Any help / ideas would be much appreciated!

Source: (StackOverflow)

How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

Not sure that the title is really describing what I am trying to do. Actually, this is quite simple and widespread usage over the internet :

I want in the background some liquid/full width of stripes (with the same height of some div of the design) while my content is using a Blueprint fixed-grid.

For instance, this website : intient.com is doing exactly what I am looking for. A background stripe in black (and another one in grey) that is liquid width and the content using a grid (but not Blueprint after having a look at the CSS)

I am using a Blueprint fixed-width grid (950px) for displaying any content. Do you know how I can do that? With Blueprint? And without a static background image...


Source: (StackOverflow)

How do I organize imports in Compass/Blueprint?

I have researched SASS and Blueprint seperately, and think I understand how they work, and I have set up my project directory using the compass CLI tool, but I am at a loss as to the correct way to organize my project.

After initializing my project with

$ compass create my_project --using blueprint/semantic

...I was told to link the generated CSS files in my HTML with these lines

<link rel='nofollow' href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link rel='nofollow' href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />

...but where should I put my own application-specific .scssfiles and how should I include the appropriate blueprint files?

It seems to me that I should not be including the generated print.css and screen.css directly into my HTML but instead doing something like:

@import "screen";

body {
    @include container;

...and then using only the file generated from the above in my HTML. Otherwise why would we have a line like this in screen.scss?:

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

I can't use mixins in my HTML.

I'm finding the docs to be very vague and contradictory, and any sort of short example illustrating the combination of:

  1. HTML
  2. SCSS files generated from compass command above
  3. SCSS files containing site-specific styling

would be very helpful for me and probably others.

Source: (StackOverflow)

Blueprint CSS framework (compress.rb) will not "compile" some changes

I use Sass to compose my CSS, and Blueprint as my framework. Since I'm using these tools for a Django application, my workflow is:

  1. Edit scss file in emacs while sass --watch is running

  2. Save the file and alt-tab to terminal to run ruby compress.rb -p project1

  3. Reset my local dev server

  4. View changes in the page

However recently I added some changes, and Blueprint will not include them in the compilation from typography/forms/grid/reset.css files to screen/print/ie.css. The scss files passed validation from Sass, and the changes are in the Sass-compiled CSS files. They are not, however, in the final screen.css file. How do I fix this? It's very frustrating.

Source: (StackOverflow)

Blueprint CSS, Ruby on Rails 3.1 and "CSS conditions"

I'm migrating my application to Rails 3.1 and I use the blueprint css framework. As seen in the setup instructions at blueprint's github page there's is a condition that needs to be true for the ie.css file to be included.

In rails 3.1 we place our stylesheet files (either .css or .scss) in app/assets/stylesheets. Application.css contains these two important lines:

 *= require_self
 *= require_tree . 

Which loads every .css or .scss file in the app/assets/stylesheets directory. This is what the setup instructions tells us to do:

<link rel="stylesheet" rel='nofollow' href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" rel='nofollow' href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" rel='nofollow' href="css/blueprint/ie.css" type="text/css" media="screen, projection">

How do I 'create' a condition like that in 3.1?

Source: (StackOverflow)

Hyperlinks showing URL with Blueprint

I just converted a site to Blueprint CSS today, and suddenly all my hyperlinks are showing their URL's in brackets, e.g.

This hyperlink

<a rel='nofollow' href="Products/List.aspx">Read more</a>

Renders like this

Read More (Products/List.aspx)

I wonder if this might be related to one of the bundled plug-ins in Blueprint?

ADDED: The link renders normally, i.e. the unwanted url part is being generated client-side. Folks have asked for source code, so here it is (irrelevant text removed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <link rel='nofollow' href="Styles/Blueprint/screen.css" rel="stylesheet" type="text/css" />
    <link rel='nofollow' href="Styles/Blueprint/print.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]><link rel="stylesheet" rel='nofollow' href="Styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <a rel='nofollow' href="Products/List.aspx">Read more</a>

SOLVED: By removing the 'print.css' sheet that all tutorials suggest including, I was able to solve the problem in this example and my whole site. I'm still very curious as to why the venerable 'print.css' is acting up like this.

Source: (StackOverflow)

how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

can anyone help me with what to do for css for IE (for blueprint css)

I have done

<?php $headlink = $this->headLink();        
    $headlink->appendStylesheet($this->baseUrl('css/blueprint/screen.css') , 'screen, projection')
        ->appendStylesheet($this->baseUrl('css/blueprint/ie.css'), 'screen, projection', "IE")
    echo $headlink;

and this code didn't work either

<?php $headlink = $this->headLink();        
    $headlink->appendStylesheet($this->baseUrl('css/blueprint/screen.css') , 'screen, projection')
        ->appendStylesheet($this->baseUrl('css/blueprint/ie.css'), 'screen, projection', true)
    echo $headlink;


it shoudl look like

<!--[if lt IE 8]><link rel="stylesheet" rel='nofollow' href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Source: (StackOverflow)

What's the point of gutters in CSS grid frameworks?

I'm diving into web development and I'm playing with the Blueprint CSS framework, which includes a grid system, and I have a few questions.

  1. What's the point of gutters? Surely they're not used to include space between the columns because you can just use the margin CSS property for that, right? Or are gutters just an elegant way to manage margins?
  2. I don't want any space between my columns and would like to generate a grid layout that doesn't include gutters, but all the generator tools prevent me from having zero-width gutters. Why is that?
  3. It appears the suggested Blueprint CSS generator is no longer supported. Can anyone suggest a Blueprint CSS generator for modifying the grid to include zero-width gutters?

Thanks so much for your wisdom!

Source: (StackOverflow)

Sass Mixin Error for IE specific filters like -ms-filter... need syntax help please

I'm trying to make a button mixin like this:

=default_button(!lighter, !darker) 
  :border= 1px !lighter solid
  :background-color #e3e3e3
  :background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e
  :background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 #d0581e
  :filter= progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')
  :-ms-filter= "progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')"
  :zoom 1
  :margin 0 0 0 0
  :width auto
  :padding 2px 14px 2px 14px
  :border-radius 10px
  :-webkit-border-radius 10px
  :-moz-border-radius 10px
  :color #FFF

When I compile the sass, i get this error for the lines beginning with -filter and -ms-filter:

SASS::SyntaxError: Expected rparen token, was single_eq token

I'm pretty sure it's my placement of the ='s, but I'm not exactly sure how to write it correctly. It works if I pass the hex values instead of !lighter, !darker, because then I can remove the = sign like so:

:filter progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')
:-ms-filter "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')"

Thanks in advance for your suggestions.

Source: (StackOverflow)

Sass import error in Rails 3 app - "File to import not found or unreadable: compass"

I have a Rails 3 app on which I successfully ran compass init rails ./ --using blueprint. I can @import files from the /stylesheets directory, but I get an error when I try to @import compass.

Right now the app has two simple sass files:


$body-background: blue;


@import "common";
//@import "compass";

body { 
  background: $body-background; 

With the @import "compass" line commented out, this works -- I get a blue background, so I know Sass is working.

If I uncomment the line, and try to import compass or blueprint or anything else, I get an error like this.

Syntax error: File to import not found or unreadable: compass.
              Load paths:

        on line 2 of /Users/eric/path/to/myrailsapp/app/stylesheets/main.scss

1: @import "common";
2: @import "compass";
4: body { 
5:  background: $body-background; 
6: }

I had through maybe I had to explicitly tell Sass where to find the Compass gem, so I added an add_import_path line to config/compass.rb:

require 'compass'
require 'html5-boilerplate'

project_type = :rails
project_path = RAILS_ROOT if defined?(RAILS_ROOT)
add_import_path "/Library/Ruby/Gems/1.8/gems/"  # unfortunately this has no effect

http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "app/stylesheets"
images_dir = "public/images"
javascripts_dir = "public/javascripts"
cache_dir = "tmp/sass-cache"

http_images_path = "/images"
http_stylesheets_path = "/stylesheets"
http_javascripts_path = "/javascripts"

I have been googling for two days, and can't determine why I'm having this problem with basic @import statements. How do I tell Sass where to find the Compass and Blueprint libraries?

Source: (StackOverflow)

How does one load a CSS framework in Rails 3.1?

I am trying to load a CSS framework, Blueprint, onto my Rails 3.1 application.

In Rails 3.0+, I would have something like this in my views/layouts/application.html.erb:

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>

However, Rails 3.1 now uses SASS. What would be the proper way to load these Blueprint CSS files?

Currently, I have the blueprint dir in app/assets/stylesheets/

My app/assets/stylesheets/application.css looks like:

 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 

Should I do something with application.css so that it loads the necessary Blueprint files? If so, how?

Second, how would I provide some kind of condition to check for IE8, to load blueprint/ie.css?


Hmmm, reloading the app's web page again. Rails 3.1 does include the Blueprint files. Even if the css files are in a folder (in this case: app/assets/stylesheets/blueprint.)

Which leaves me with two questions

  1. How should one apply the if lt IE 8 condition using SASS?
  2. How does one load a css file for the print format (i.e. <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) using SASS?

Source: (StackOverflow)

Blueprint CSS affecting appearance of jQuery datepicker

Does anyone have any pointers how to to fix the styling issue presented when using jquery ui's datepicker along side blueprint css framework? Specifically the table with the dates appears larger (wider) than the container it sits in.

Source: (StackOverflow)

Why does Blueprint-Css set the maximum grid width for a layout as 950px?

If you use the container class for a layout with blueprint-css, you end up with a maximum width of 950px. I have a layout that needs to exceed this so I'm wondering why Blueprint uses this default?

<div class="container">

Source: (StackOverflow)

Best way to learn how to combine Blueprintcss and Compass/Sass?

I would like to apply Blueprintcss and Compass/Sass to a Rails project.

Should I learn Blueprint first or Compass/Sass first or are there any guides on how to use the two of these together?

Also, does it make any difference that it's a Rails project? Could this combination of technologies be just as easily applied to, say, a Java project?

Source: (StackOverflow)

How to use a CSS Framework with Yesod?

I want to use the Blueprint CSS Framework with Yesod. Are there any best practices?

Because Yesod uses templates for CSS, it looks to me that I cannot use the .css-files directly? Do I have to rename them to .lucius-files?

How do I add the CSS to the defaultLayout?

Source: (StackOverflow)