Jump to content

Blog Profile


ryan

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 7
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 7
Link to comment
Share on other sites

Okay, so I've only just read this thread (I've been busy elsewhere :P) 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!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...