Blog Profile

[renobird]

Also an update about the profile: the next version is going to be running on the Skeleton responsive framework instead. I'm just finding that framework to be a little better for the blog profile. However, I'll still include the Foundation template and CSS file as optional, so that you can still use the Foundation version if you prefer it.

That's great! I've used skeleton a few times now, and it's really solid. There is also an offshoot of skeleton on github that is essentially the same thing, but also includes a 12 column grid instead of just the 16. I find that I use both depending on the project.

[ryan]

Here's the new blog profile that's built up from the Skeleton CSS framework: http://processwire.com/blogtest/

As Skeleton doesn't come with any real design elements, it's much more of a blank slate than Foundation. So I put a little design time into this one and the profile is much more custom than the Foundation one. I think it looks a lot better than before. Of course, it could use some color and perhaps icons and imagery, but thought it might be a much better starting point than before. I'm thinking we'll make colors configurable via Soma's color picker Fieldtype/Inputfield.

I've also added a 1200px view (something that Skeleton doesn't come with) so that this profile has a nice "wide" view, in addition to a normal desktop, tablet and mobile view.

Beyond a change from Foundation to Skeleton, this one also includes a lot of improvements and tweaks to the profile itself. Since this is still a work in progress, I won't post an updated ZIP yet, but just wanted to post this preview to the latest version.

[WillyC]

hello., srch result.page u shuld use.right quote ex. “quote” no "quote"

is typo.graphe lookit up

[AnotherAndrew]

Ryan, this looks great! I will have to give it a test soon! What about having required fields on the comments section? And yes a color picker would be key. Thanks for your great start!

[ryan]

Thanks for the feedback. All 3 fields are required on comments, as they've always been, so didn't think there was a need to designate required vs. non-required, since they are well, well… required. But I think you may have a sixth sense because I'm adding an optional 'website' field, which brings the required vs. non-required designation into play. So expect to see it before this blog profile is considered final.

[renobird]

Ryan,

This looks awesome! I could see myself using this right out of the box.

[diogo]

I do prefer this one

But:

• I think the search box doesn't fit the theme.
  
• On the 1000px media query break, the right column could go under the left column, to prevent both, the text from the sidebar and main text, to become too short.
  
• I would give the option, not only to choose the color, but also to remove the 1px vertical borders. It's amazing how this simple change can turn it into a different theme.
  

[DaveP]

Ryan, just as a matter of interest, do you have any plans for the look of the admin area?

[ryan]

On the 1000px media query break, the right column could go under the left column, to prevent both, the text from the sidebar and main text, to become too short.

At the 960px to 1199px width, we're at our ideal line lengths (12 words per line on center column). Right sidebar is about the same as the one on this site. Do you mean the one that appears in the 768px and 959px (i.e. tablet/iPad view)? I'm thinking about throwing down the right column on this view, but not yet sure.

I would give the option, not only to choose the color, but also to remove the 1px vertical borders. It's amazing how this simple change can turn it into a different theme.

I can make the border color there configurable (vertical vs. horiz) so someone could make it the same as the background color, making it invisible.

I'm going to use a repeater for the color configuration. Two fields in there: CSS selector and color picker. Kind of a fun use of a repeater.

Ryan, just as a matter of interest, do you have any plans for the look of the admin area?

The admin will remain configurable by it's own themes as it is now.

[diogo]

Do you mean the one that appears in the 768px and 959px

Ya, I meant those. 1000px was a rough guess

I can make the border color there configurable

Perfect!

I'm going to use a repeater for the color configuration. Two fields in there: CSS selector and color picker

Hm... don't forget that this is targeted also at non designers or developers, and also that too much customization can potentially turn the theme into an horrible explosion of colors.

[ryan]

Hm... don't forget that this is targeted also at non designers or developers, and also that too much customization can potentially turn the theme into an horrible explosion of colors.

That's why it's going to come with defaults already populated and identified. So to be more clear, there will be a title, CSS selector and color picker. The title says what it's for (i.e. "Vertical borders") and the CSS selector targets them. The only thing the typical user will change is the color picker value. If someone wants to take it further and add their own extra repeater items to customize further, that's up to them. But I don't see or expect the non-developers to do that.

Also, I fully expect people to make a horrible explosion of colors. Put even a single color picker into the hands of a non-designer and the results won't be pretty. But I'm not responsible for other people's color choices. Honestly, if there aren't a few explosions, then we're not making things configurable enough.

[diogo]

Ok, I'm convinced

Honestly, if there aren't a few explosions, then we're not making things configurable enough.

Gosh*

[SiNNuT]

Looking good! One thing i noticed: In the mobile view the main nav and categories nav are turned into dropdown lists which is nice; the only thing that could be slightly confusing is that the main nav dropdown doesn't have a heading to give a clue to what that dropdown exactly is, whereas the categories dropdown below has.

[slkwrm]

Looks very clean and tidy. Seems like a good start to make some color explosions One thing that I noticed is when I resize my Firefox to the most narrow view (Mobile Portrait Size) the last links of pagination slide down.

Hmmm. Got to have a closer look at Skeleton.

[ryan]

One thing i noticed: In the mobile view the main nav and categories nav are turned into dropdown lists which is nice; the only thing that could be slightly confusing is that the main nav dropdown doesn't have a heading to give a clue to what that dropdown exactly is, whereas the categories dropdown below has.

I was questioning this too, but couldn't decide what the headline should be? "Main" or "Top" or "Navigate!", it all just seems a little cheezy and unnecessary. But it would look good to have something there, just not sure what.

[Nico Knoll]

Looks pretty good. I guess I have to try it out if I'm back from vacations

[ryan]

More updates to the blog profile at http://processwire.com/blogtest/

Still not done with it, but lots of new tweaks. The biggest one is the addition of Tags, as well as an update to the InputfieldPageAutocomplete (committed today) that makes it work really well for tagging. Now when you are entering something in the autocomplete, if it doesn't match anything you can just hit enter and it adds it as a new page. This is assuming that you've configured the field to support that feature. Anyway, the point of this is that it's a very natural way of adding new pages with autocomplete.

[apeisa]

The biggest one is the addition of Tags, as well as an update to the InputfieldPageAutocomplete (committed today) that makes it work really well for tagging. Now when you are entering something in the autocomplete, if it doesn't match anything you can just hit enter and it adds it as a new page.

This is great, very welcome addition!

[slkwrm]

Thank you, Ryan! Great feature!

[SiNNuT]

Great stuff on the auto-complete field. So useful for many things!

[ryan]

Here's an update on the blog profile. It now supports themes. The first theme I've made for it is based on Nikola's Futura admin theme:

http://processwire.com/blogtest/?theme=futura

I've also made a ProcessWire theme, but I think it still needs work (a little too girly right now):

http://processwire.com/blogtest/?theme=processwire

I'll probably put in one or two more themes for the distribution version. You can select the theme from the homepage. It's just a page reference field where it lets you select from pages using the "theme" template. The "theme" template is nothing more than a files field with all of the theme's assets in it. Typically this would be a CSS file(s), JS file(s), and images or font files (if used). I also had color pickers for defining the themes colors, but backtracked on that. I want themes to be self contained so that can create a new "theme" page, drag a ZIP file into the page, and be done with it. Once color pickers get involved, it becomes much less portable. Though I may still provide the option for overriding theme colors, but I have a feeling most people would prefer to just edit the included CSS file and then drag it back in.

This version also is better optimized for mobile use. In addition to converting the top navigation to a <select> in mobile views, it now moves the search box and any other navigation to the bottom. That way people on mobile should still see the primary page headline and some of the copy without having to scroll.

[Pete]

Okay, so I've only just read this thread (I've been busy elsewhere ) so ryan is probably getting sick of the fact I've "liked" every other post in this thread in the last five minutes, but I do like it

For mobile testing, you might like to try this ryan:

Also, just my personal preference, but I've gone completely off Cufon in recent months and prefer to use the likes of FontSquirrel. I know it's down to personal preference from the designer's point of view, but it did occur to me that if you supported something like a standard site/templates/fonts folder then you could ship several fonts from fontsquirrel with the default theme (they're free) and even support dropping new fonts into that folder and have it tied in with a drop-down font selector in the admin area somehow.

Just a thought, but I think something simple like that could be reasonably easy to implement for the benefit of non-web-savvy users.

I love everything else about this and will be digging through the code at some point to see where I can use bits on some of my current sites, as well as using the whole thing for future sites.

Keep up the awesome work!

[diogo]

For mobile testing, you might like to try this ryan: http://processwire.c...mobile-devices/

I didn't know this. Thanks Pete!

[ryan]

Also, just my personal preference, but I've gone completely off Cufon in recent months and prefer to use the likes of FontSquirrel. I know it's down to personal preference from the designer's point of view, but it did occur to me that if you supported something like a standard site/templates/fonts folder then you could ship several fonts from fontsquirrel with the default theme (they're free) and even support dropping new fonts into that folder and have it tied in with a drop-down font selector in the admin area somehow.

Thanks Pete, I will check this out. Right now I'm just trying to keep it consistent with Nikola's Futura theme, so it's using the exact same assets (Cufon, in this case). I don't even know what exactly Cufon is to be honest, I just copied it from his admin theme. However, each theme can have it's own assets, so there is no connection or dependency of Cufon to the blog profile. We won't standardize on any particular font system for the blog profile just because it's theme specific rather than profile specific. But I will definitely look into bringing in FontSquirrel into the next theme I make for it. One negative that I did notice about Cufon is that the fonts look pretty soft on the retina display, relative to all the other text. Not sure if this is a problem with other font systems or not, but just observed this about Cufon.

I love everything else about this and will be digging through the code at some point to see where I can use bits on some of my current sites, as well as using the whole thing for future sites.

Hold off on digging through it, because I have to post the new version. The one currently posted is very old at this point.

[Pete]

Cufon essentially makes the words using a font as PNG images at runtime, whereas Fontsquirrel and others simply use actual font files, using CSS to present various file types depending on the browser being used.

Looking forward to the new version but no rush.