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?
When I first encountered Compass, I knew neither Compass nor Blueprint. I started out by watching the Compass screencast and then by trying to use it. As Sass is similar to CSS (CSS on steroids ;-)), I was able to get working real soon. Having the Blueprint CSS cheat sheet helped a lot. Thus, I recommend learning Compass first and then learning Blueprint on the way.
Also have a look at the GitHub wiki pages for Compass.
It is easy to use Compass with any language/framework combination.
Compass comes with its own version of Blueprint, so I'd say just learn Compass.
Blueprint is just predefined plain set of css. so you can use it on any frameworks or programming languages.
I my self using blueprint for both php and java project. for php i am using codeigniter, joomla and even wordpress ;)
Related
I have been doing UI research and have come across admin templates at http://themeforest.net/. I was wondering how do you apply these onto a web app built on Rails. These templates look very similar to wordpress themes. Are they that easy to configure? Is it just as simple as setting up a link to the database to make the fields form capture data? I've been looking at this theme.
For admin templates I recommend using Active Admin. It's relatively easy to implement and gives you great admin screens with little effort.
Yes, You can. I'm trying to solve the same problem and so far I have a couple options:
1.) do it by hand, I've done this before, it works but takes a lot of time to truly understand how your theme is put together. First I would recommend using the included themes assets exactly as they are bundled with the theme. Don't assume that just because you have twitter-bootstrap-rails gem that the bootstrap classes in the theme will work. Link the assets statically and slowly extract out the static assets and replace them in the asset pipeline once you know they work.
2.) Use the strategy suggested in the install_theme gem (http://drnicwilliams.com/2009/10/06/install-any-html-themetemplate-into-your-rails-app/) the gem itself is not maintained any longer (i'm not sure about any forks), but the strategy is sound. Extract the core parts of the template into partials.
The short answer is yes, but there is no straight forward way to "import to rails"
I've been searching for a working solution for Rails 3.1.x to add HTML5 Boilerplate, Haml, Compass and 960.gs support in a canonical manner (i.e. in a way that fits into the new asset pipeline structure). This used to be fairly easy to achieve in Rails 3.0.x by using the following gems:
haml-rails
compass
html5-boilerplate
compass-960-plugin
I've looked at several questions / answers both here and elsewhere. However, I haven't been able to find any solid information, and the ways I've tried to piece it together have seemed "hacked together" (in the bad sense) at best. I'd appreciate any clear insight on how to accomplish this.
The html5-rails gem ? https://github.com/sporkd/html5-rails
the rails html5 boilerplate is available: https://github.com/russfrisch/h5bp-rails
here is a gist for compass on rails 3.1.* https://gist.github.com/1184843
Here is a rails 3.1 template that includes 960 and boilerplate: https://github.com/scholarslab/rails31-template
http://compass.handlino.com/
This little app could be useful at least with three of the listed features.
May I ask you how to make rails web design more efficient?
Is compass plus blueprint the perfect match?
Is the current version of compass support rails3.1
Are there any other frameworks that will make rails web deign easier?
Thanks
Definitely a framework like compass is awesome, it includes a lot of helpers, and provides a good solid base.
For form-styling I would recommend using a gem like [formtastic][1], which not only greatly simplifies making forms, but also provides a standard css file. So all needed tags are then known (and can be overwritten if needed).
There a few alternatives to kickstart your application's layout:
twitter-bootstrap: it is plainly awesome and provides a great start (it does not play nice with formtastic, but works perfectly well with simple_form).
web-app-theme provides generators, and a set of templates to style your application quickly
activo is a template that is contained in web-app-theme, but can also be used standalone
Hope this helps.
Which framework do you use in Rails 3.1?
I basically want to have a standard set of mixins like gradient and rounded corner etc, but maybe there are other advantages of certain frameworks that I am not aware of.
Can you please recommend a framework to use with Rails 3.1 to cover most of what I will need to simplify and standardize my stylesheet development
Bourbon - a set of Sass mixins using SCSS syntax, is a popular (500+ watchers) tool made by thoughtbot.
The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
It can help with use:
Animation
Background-image
Border Radius
Box Shadow
Box Sizing
and other
See the readme on the official page on github
I think that any current CSS framework can accomplish what you want.
Have you give LESS a look? I believe it meets all your criteria.
I haven't personally tried out compass, but it's been generating alot of buzz, so it is certainly worth a look.
Twitter also released Bootstrap which I've been trying out and I've been fairly impressed so far!
For me, a framework doesn't seem to be to be considered here. You can easaly do it yourself.
For my part, I use sass and I write a _macros.scss with all the appropriate mixins and default variables, and I put an #import "macros" at the beginning of each main scss files.
I've got some experience using haml (+sass) on rails projects. I recently started using them with blueprintcss - the only thing I did was transform blueprint.css into a sass file, and started coding from there. I even have a rails generator that includes all this by default.
It seems that Compass does what I do, and other things. I'm trying to understand what those other things are - but the documentation/tutorials weren't very clear.
These are my conclusions:
Compass comes with built-in sass mixins that implement common CSS idioms, such as links with icons or horizontal lists. My solution doesn't provide anything like that. (1 point for Compass).
Compass has several command-line options: you can create a rails project, but you can also "install" it on an existing rails project. A rails generator could be personalized to do the same thing, I guess. (Tie).
Compass has two modes of working with blueprint: "basic" and "semantic" usage. I'm not clear about the differences between those. With my rails generator I only have one mode, but it seems enough. (Tie)
Apparently, Compass is prepared to use other frameworks, besides blueprint (e.g. YUI). I could not find much documentation about this, and I'm not interested on it anyway - blueprint is ok for me (Tie).
Compass' learning curve seems a bit stiff and the documentation seems sparse. Learning could be a bit difficult. On the other hand, I know the ins and outs of my own system and can use it right away. (1 point for my system).
With this analysis, I'm hesitant to give Compass a try.
Is my analysis correct? Are Am I missing any key points, or have I evaluated any of these points wrongly?
The ideal goal is separation of style and content: it's not always possible 100%, but it can be done reasonably well by using semantic markup. Blueprint and other CSS frameworks utterly fail at this.
The original idea behind Compass was to avoid polluting HTML with the visual markup that Blueprint generates: if you're writing class="column-4" in your markup, then you might as well put style="width:160px" in there instead. Semantically it's the same meaning, and the same amount of repetition to maintain.
Compass turns a Blueprint class like .column-4 into a mixin which you can apply to a meaningful selector:
#sidebar
+column(4)
This way, you only need to maintain it in the stylesheet, not across a number of templates and HTML files.
Compass is project-aware. It will handle compiling your whole tree of stylesheets, even automatically on save when you run compass watch.
There are some very helpful functions provided by compass, for example:
image_url is a configurable function that can handle relative or absolute paths or even set up rotating asset hosts if you need to.
The CSS3 module takes care of all the browser-specific style rules for rounded corners, shadows, etc.
General utilities provide helpers for the stuff you do all the time, but with less repetition (especially for the cross-browser issues). These are some basic ones I use a lot:
+clearfix and +pie-clearfix (cross-browser clearing methods)
+float ensures you don't forget display:inline in front of it for IE... (if the time comes to drop the old IEs, it's one single change.)
+replace-text hides text and positions an image replacement background.
+hover-link adds the :hover underline rule to a base link style
You can check these out on the new docs site for Compass.
Then, Compass provides the facilities for a number of other style frameworks in addition to the built-in Blueprint. Do check out Susy for example, which is a Sass-native layout framework, not just a CSS port. It specializes in flexible and fluid grids.
'Semantic mode' refers to the possibility to use more semantic class names than the ones css frameworks ship with: .article vs .grid_1. which i personally think is a big +.
I'm not sure if these resources have only shown up recently, but have you seen the Compass CSS3 helpers and the General utilities - (both well documented in my opinion) - they've really sped up my interface builds a great deal.
Another great resource is the Compass plugins page.
Personally I like to copy these utility Sass files out the rubygem and manually include them in my project's Sass files as it feels pretty weird referencing Sass which is stored out of the project.
Compass looked like a great solution for me as well, but after trying it on a project I didn't really see the great advantage of using it for me. Like you, I'm just fine with blueprint, and I didn't see the need to add yet another layer on top of haml/sass.
I eventually stripped the compass from that project and just go with a sass version of the blueprint CSS files, and go from there. I store any custom/additional styles in a separate sass file and that's it. No need for compass or anything like that if you just want to keep it simple.