Skeleton Instead Of Blueprint (Self-Rejected)

Archives Feature Requests
1

It is time - time to change to HTML5, CSS3 and all the goodness which that brings.

By means of html5 shiv - or other js - we can emulate html5 and css3 features in lesser browsers, so there’s no reason to not use it today.

The HTML5 Boilerplate starting point is extremely popular.

Responsive webdesign is the new black these days - design once and your web app can run on phones, tablets, whatever.

IMO, the most promising project is Skeleton.

It is based on HTML5 boilerplate - it’s the project of a boilerplate team member - and combines the boilerplate with a responsive grid (based on 960gs).

I guess you’ve heard of the Twitter Bootstrap framework.

One of the authors is the boss of the author of Skeleton, so it sort of comes from Twitter as well.

The difference is that Bootstrap is not responsive and it’s already styled.

Skeleton, on the other hand, is lightly styled and a good starting point for responsive sites.

BluePrint is good, but the times have changed - not even the BluePrint author uses it now.

Check out Skeleton here:

http://www.getskeleton.com/

And this topic - for reference:

http://www.yiiframew…post__p__118420

Then come back and vote for it. :)

If you like the looks of Bootstrap, know that it’s fairly easy to combine it with Skeleton.

<edit>

I did evaluate a whole lot of options - and settled on Skeleton because it’s not intrusive and because it’s responsive.

1140 grid is also nice, but it doesn’t play well with html5 boilerplate unfortunately.

If it did, it would have been my choice number one.

Less CSS framework is awesome, but probably a bit too heavy to ship with Yii generated apps by default.

Compass - same as Less.

Skeleton is made by a guy which is a team member of the boilerplate project, and an employee of one of the Twitter Bootstrap maintainers.

It has gotten a lot of positive press, even if it’s brand new.

Responsive design is the new black.

Get used to it. :)

</edit>

2

I put this in Feature Requests, as it does not need to wait for Yii 2 - it can be put into the next Yii 1.x release IMO.

All depending on Yii team and Yii community, of course.

The main point is to be able to create reponsive, modern web apps which runs on handhelds, phones and regular screens, using media queries and adaptive layout.

It would definitely increase both the coolness factor, but also the usefulness factor of ‘vanilla’ Yii applications.

3

good point. another small enhancement which would be good for the framework is to add the HTML5 new form tags to the CActiveForm. I would do that but I am not too familiar how to contribute via Google Code.

4

Just when I settled on Skeleton, a new option crops up - a potentially much better solution:

320 and Up

It can be used on top of HTML5 Boilerplate. (Check)

It is based on Less. (Check)

It has some good extras, like Emarcottes image resizer. (Bonus!)

It starts with the lowest resolution and works it’s way up, so that smaller devices doesn’t try to download resources for larger versions. (Awesome!)

I’ll take it for a spin.

Any comments?

Or are you happy to let Yii ship with BluePrint?

<don’t be shy!>

Even if you do not really care, you can share your experiences.

5

What about twitter’s bootstrap? website

6

I already mentioned Bootstrap and why it’s not a number one choice in the first post.

It’s great if you like how it looks.

Skeleton, on the other hand, is much easier to style to your liking, and it’s responsive. Bootstrap is not.

7

Hi Jacmoe,

this is a very seducing idea…and Blueprint seems indeed a little “old” sometimes ;)

A question regarding Yii markup : I rely a lot on HTML markup generated automatically by Yii. Frist the webapp command (of course), to create the Yii skeleton app, and later on, Forms created by Gii, or core widgets (like CGridView). All these come with a specific HTML markup and CSS class right ? … now if I today I switch from blueprint, to Skeleton (for instance) I will have to “adapt” default Yii markup to Skeleton requirements. In the best case, small changes to some CSS class will be enough … but it can be more complicated, and maybe not possible without modifying the HTML structure … So if I’m not wrong, changing from BluePrint to Skeleton would imply that HTML generated by Yii may also have to change.

Is this correct ? … and if yes, wouldn’t it be possible to provide the Skeleton support as an extension+theme, that would includes required changes so the default Yii markup would be compatible with Skeleton?

(I hope my concern is clear to you. As you may have guessed, English is not my native language)

B)

8

It would be nice if Yii could integrate twitter’s bootstrap. :)

9

Fortunately, there are two extensions for bootstrap in the repository. :)

@Raoul:

You could take a look at the bootstrap extensions; they feature both a theme and gii generators - perhaps the same could be done for skeleton?

10

Yeah, and that’s what I was thinking : provide a complete Skeleton (or other) package that would include

  • a theme (for css and default layout)
  • a set of widgets (for the js parts)
  • Gii generators (for the markup),

… just like the bootstrap extension… but in this case we are no talking about eplacing blueprint anymore right ?

The point it I would like to use these new frameworks (actually I’m using bootstrap ;) ) with minimum additional work, and of course, if one of them is included in Yii as a Blueprint replacement, that would be nice. However, this would ‘force’ others to use the same framework (or work some more to use another one).

Consequently I think that the "extension" option may be the best : leave the easy to use Blueprint framework as part of yii and pray that some brave developer out there will publish the Skeleton Extension … or create one myself !

B)

11

I’d also prefer bootstrap and LESS as basis. The design for bootstrap is not really the key element there, it’s more related to the grid system etc. So I do not think the styling is that much of a problem, but more a good base to build on.

12

Personally, I prefer Sass over Less.

Because of the concise syntax without braces - but Sass also features a CSS-like format - but also because of Compass, a great designer framework for Sass.

And there are far more things for Sass/Compass than there is for Less.

However, I would not choose Twitter Bootstrap for it’s grid, as it’s really limited.

If you fancy Less, pick the Semantic Grid instead:

http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

You get everything in one package, and it’s semantic.

Meaning that you don’t have to litter your HTML with classes.

And you can switch the grid on the fly, without changing your HTML. :)

I use Sass/Compass, and am currently using Susy for grid’ing.

It’s similar to Semantic Grid (which is also available for Sass btw).

Another reason for choosing Sass/Compass is that Compass was made a central feature of Rails 3.1 (IIRC), and therefore it’s going to receive a lot of attention / make further progress / be more widely adopted.

Bottom line is:

Do not choose Twitter Bootstrap for the grid.

You are missing out if you do. ;)

13

http://stuffandnonsense.co.uk/projects/320andup/

"480, 600, 768, 992 and 1382px"

No fluid layout?

14

If you take Susy (based on Compass/Sass) as an example, you can configure it as elastic (default), fluid or static.

The same goes for the semantic grid system I guess.

( https://gist.github.com/1163463 )

You don’t really need a fluid grid if you use media queries.

Elastic is much better IMO as it keeps the layout the way you want it. :)

As you resize the browser window, the media queries makes sure that the layout adjusts accordingly. Best of all worlds.

<edit>

Visit my blog and resize the window and you’ll see.

I am going to rewrite it using Sass/Compass/Susy, but the principle is the same.

The layout is elastic, not fluid.

http://www.jacmoe.dk/

</edit>

15

Elastic is based on the browser’s font size, isn’t it? Personally I prefer fluid over elastic.

16

Personally I would like yii to generate absolutely minimum. Just directories, controller with index action, simple layout and nothing else. Blog demo is ok if I want to show someone what yii can do, but in real life it’s redundant because I usually remove most of it anyway. I really liked 1140 grid though. It makes layouting really easy yet it’s very small without any styles, javascript or things I may or may not use in different projects. Therefore I vote for minimal application with 1140 grid only.

17

Actually, after thinking about this a bit more - and using Sass/Compass - I agree that Yii should spit out minimal HTML5 semantic code. Not tied to any css grid/framework.

If you use Sass or Less, then you have total freedom to hook it up with a grid from the CSS and keep the HTML semantic.

Would be far better if Yii shipped with a HTML5 Boilerplate compatible template.

So this feature request is void from my side. :)

It should be called: HTML5 handheld ready template.

18

In the current version of Yii, blueprint’s forms.css is not included, it has some conflicts with yii’s form.css, regarding of naming css classes (.error, .success, …).

To provide more flexibility it is nice to have configurable theme for gii, then add it to gii config

Desired example,




    'gii'=>array(

      'class'=>'system.gii.GiiModule',

      'theme' => 'custom',
19

I’m trying some “responsive” layouts like Skeleton and 320andup.

Well…

Skeleton is nice, maybe imgsizer.js and selectvizr.js could be added. However if I try to resize the window, sometimes I can see the horizontal scrollbar… it’s not really refined. Also, 960px is not so good on a 1920px screen. 320andup supports layouts larger than 960px… yeah… 1382px… wtf??? In a world where there are a lot of 1366px laptops, wtf is 1382px??? It’s a complete non-sense. And if it is for 1920 screens, then it’s still too less.

A fluid, responsive layout would be interesting… so you have a fluid layout but you can rearrange objects for smaller screens. Indeed…

"Responsive web design“, as defined by its coiner, Ethan Marcotte, consists of three components: a fluid grid, fluid media, and media queries.

20

This looks like a nice Bootstrap alternative http://foundation.zurb.com/docs/index.php