GSkeleton2

[Timbow]

Uploaded to Extend
Demo Site Validated

The skeleton boilerplate and grid has been updated:
http://getskeleton.com/
This is the new version made ready for GetSimple and presented as a theme. all I have done is to add a nav menu and footer with minimal styling, and an editor css. it is meant to be a starting point for web development. Quite nice already as it is though.

It's a twelve column grid. A container contains everything, then rows inside the container and columns inside the rows. It is easy to learn and to see how it works. All the basic spacings and styles are there for lists, buttons, headings, tables, forms, quotes etc.
   

[datiswous]

Thanks. Might be interesting.

In the theme description:

...and added a css for the CKEditor

Where is that needed for?

[Timbow]

...and added a css for the CKEditor

Where is that needed for?

The default GS homepage in this theme:
   
Looks like this in the CKEditor
   
But with editor css you get:
   

So it's great. Complete with google font.

[hameau]

Thank Tim, good work.

There are many improvements over the original Skeleton and I heartily commend this revision.

The Raleway font used in the default css can also be found at Font Squirrel for those of us who don't want to link to a third-party (Google Fonts). Download the .ttf set and put the styles that you need through Font Squirrel's webfont-generator.

[datiswous]

The default GS homepage in this theme:

Looks like this in the CKEditor

But with editor css you get:

So it's great. Complete with google font.

Ah ok. Maybe Knacss should have that as well

[skyblue12]

So it's great

[hameau]

Complete with google font.

Hmm, not for me. Not in IE11 nor Firefox on Windows 7, nor Firefox on Linux.

Do you have the Raleway font installed locally? The only one of my sites that shows the correct @font-face font, is where I have that font installed locally. None of the others display the font, even where it is served from the same domain as the site (so I guess I can exclude a browser same-origin policy problem).

Update: The one site that works for me has more font formats than just woff2. Significant?

[Timbow]

Yes, when I test the demo site on Win7 in FF, IE11, Opera and Chrome I get the font correctly every time on the site but IE11 and FF don't display the font in the editor. Ho Hum. Maybe it isn't sufficient to just use the woff2 declaration.

[shawn_a]

Its probably a cross domain policy restriction,(remember cke is a frame) if not then there are some issues with woff and svg and quirks mode etc.

[Timbow]

Googlefonts gives you a link to put in your css, like for example:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
I just went to the link and copied what I found there but it turns out that link returns different declarations for different browsers so no wonder it only works in chrome.

Is this a job for one of those kind people wanting to have a go at plugin writing? A plugin to allow google fonts in the editor?

[hameau]

I just went to the link and copied what I found there but it turns out that link returns different declarations for different browsers so no wonder it only works in chrome.

CKEditor v3.x seems to only accept .ttf fonts. It works if the font file is provided by:
- include Raleway-Regular.ttf in the (e.g.) css folder;
- add this near the top of editor.css

Code:

@font-face {
    font-family: 'Raleway';
    src: url('css/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Limitations: editor doesn't show different font weights (e.g., bold, etc.). Don't know how to work around that as the @font-face rule includes the weight.

A plugin to allow google fonts in the editor?

There seems to be a nascent CKE v4 plugin to add Google fonts. (IMO, the editor is where the plugin belongs, not in GS.)

For many reasons, I prefer to host the fonts on the website, rather than pulling them from a third-party, so I'm happy to carry on with my method for the time being. It isn't worth doing too much for CKE v3, as v4 in GS is just around the corner ... ;-)

Incidentally, the Raleway font has an open licence (SIL), so it could be redistributed with a theme. The .ttf file is 90k in size (from the Font Squirrel generator), but could probably be reduced by sub-setting.

[Timbow]

I just went to the link and copied what I found there but it turns out that link returns different declarations for different browsers so no wonder it only works in chrome.

CKEditor v3.x seems to only accept .ttf fonts. It works if the font file is provided by:
- include Raleway-Regular.ttf in the (e.g.) css folder;
- add this near the top of editor.css

Code:

@font-face {
    font-family: 'Raleway';
    src: url('css/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Limitations: editor doesn't show different font weights (e.g., bold, etc.). Don't know how to work around that as the @font-face rule includes the weight.

A plugin to allow google fonts in the editor?

There seems to be a nascent CKE v4 plugin to add Google fonts. (IMO, the editor is where the plugin belongs, not in GS.)

For many reasons, I prefer to host the fonts on the website, rather than pulling them from a third-party, so I'm happy to carry on with my method for the time being. It isn't worth doing too much for CKE v3, as v4 in GS is just around the corner ... ;-)

Incidentally, the Raleway font has an open licence (SIL), so it could be redistributed with a theme. The .ttf file is 90k in size (from the Font Squirrel generator), but could probably be reduced by sub-setting.

You are total right I know. It has got to be more reliable to include the font in the theme.

[Timbow]

Version1.1 of the GS Theme updates the skeleton css to version 2.0.4.

There is an issue with the skeleton css displaying offset columns with odd spacings. The fixed css is included as an extra file in the theme but you will need to alter the link in the head section of the template if you want to use it. the issue is illustrated here:
http://sassmeister.com/gist/d4d0a9ea7135eb851b7c

Thanks to hameau for pointing this out and providing the extra file

[shawn_a]

odd that their docs say nothing about offsets either.

[Timbow]

Unlike bootstrap skeleton is unfunded and I think one bloke who is busy elsewhwere.
hameau pointed me to https://github.com/dhg/Skeleton/issues/247 but there is afaics no official fix or response.

[hameau]

odd that their docs say nothing about offsets either.

It took three years to get an update from v1.0 – you want docs too?

It's worth having a look through the css files as there are several hidden features. Definitely a framework for the experimenter, but absolutely great when you get the hang of it.

Better docs slated for v2.0.5 ...

[Timbow]

I am getting google font download failure with skeleton. The html has 

Code:

 <!-- FONT
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

putting http: in front of the url fixes it for me, but some people say just http, or https is needed. IDK and I am not sure I understand either.