Jump to content

New post: New PW website ready

ryan

By ryan,
in News & Announcements

 Share

Recommended Posts

adrian Hero Member

adrian

Posted
Posted

Typos I've noticed:

http://processwire.com/newsite/docs/more/
The recommended debugging and development tool for the ProcessWire with 35+ custom tools designed for effective ProcessWire development.

http://processwire.com/newsite/about/what/
Simplicity often implies reduced capability, and but this is not the case with ProcessWire.

ProcessWire itself The ProcessWire CMS is a group of modules built on top of the ProcessWire content management framework.
Not sure about this change, but it seems weird to say that PW is built on top of PW, so I figure making the distinction between the CMS and CMF is important

Something we hear over and over is how much fun it is to develop websites in ProcessWire. It makes previously difficult projects easy, enjoyable and just plain fun. ProcessWire's API takes its inspiration from jQuery, providing a simple and fun 
I think there is a little too much fun in this blurb ?

 

Not a typo, but I noticed that the main API page is at http://processwire.com/newsite/api/ref/ instead of under Docs, eg http://processwire.com/newsite/docs/api/ref/ - not sure if this is intentional or not, but I would prefer it to be hierarchically correct.

Also, is the cheatsheet coming back? I think this is really important!! 

  • Like 4
Link to comment
Share on other sites
Craig Sr. Member

Craig

Posted
Posted
3 hours ago, Chris Bennett said:

I quite like sites that use the system font stack, with the exception of Segoe UI which doesn't really behave like the rest.

Ha ? Being a Windows user, I get Segoe UI when it's used, and I quite like it and prefer it over Arial. I have noticed some slight vertical alignment things but it doesn't bother me that much.

Link to comment
Share on other sites
gmclelland Hero Member

gmclelland

Posted
Posted

@Chris Bennett - is right.  The .blog-posts rule negative margin-left and margin-right on the home page are causing the horizontal scrollbars.  It happens when the blogposts go edge to edge at less than 1599px width.

Spoiler 

.blog-posts {
    margin-left:-41px;
    margin-right:-40px;
    padding-top: 4px;
}

@media screen and (min-width: 1600px) {
    .blog-posts {
        margin-left:0;
        margin-right: 0
    }
}

@media screen and (max-width: 959px) {
    .blog-posts {
        overflow:hidden
    }
}

@media screen and (max-width: 639px) {
    .blog-posts {
        margin-left:-14px;
        margin-right: -15px
    }
}

@media screen and (min-width: 640px) and (max-width:959px) {
    .blog-posts {
        margin-left:-29px;
        margin-right: -30px;
    }
}

 

Here is how I found out.  From https://css-tricks.com/findingfixing-unintended-body-overflow/  In chrome's dev console, run the following when you see the horizontal scrollbars.

Spoiler 

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

 

The console will print which html element causes the overflow.  Right click on it and choose "Reveal in Elements Panel" to see the offending element.

Another way to try to find this using the following css: 

* {
  outline: 1px red solid !important;
}

and look for the elements that have excessive width.

 

Here are some other items causing the horizontal scrollbar.

  • The .footer and the header the .pw-plug>div rule with width: 4%; is causing an overflow when viewing the site on small mobile viewports (444px width).
  • In the Processwire Showcase carousel left/right arrows using the .uk-slidenav rule with padding: 5px 10px is causing the right arrow to overflow the page at smaller breakpoints 908px.
  • In the Processwire Showcase carousel dots menu using the .uk-dotnav rule with margin-left: -12px; might cause a horizontal scrollbar.
  • .uk-slidenav rule with padding: 5px 10px; at 699px width might cause a horizontal scrollbar.

You probably could get around all these issues with overflow-x:hidden; rule on the html/body element, but it might be better to find out and fix what is causing the scrollbars so that it doesn't causes other bugs?

The overflowing elements might be the cause of the dropdown menus not positioning correctly.

Hope that helps

  • Like 2
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
  • Author
Posted
Quote

Have you thought about not using any webfonts at all, and instead use the native or system CSS font stack?

Actually I think I like this option best, thank you for mentioning it. I like how it looks on the Mac, but have no idea how it looks on Windows and Linux, so that's the only concern. I've switched https://processwire.com/newsite/ to use this font stack. If you guys on Windows and/or Linux have a moment, can you let me know how it looks or take a screenshot and post it? 

$pw-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

To view it using the previous font (Krub) just use this link: https://processwire.co/newsite/?font=krub

In addition, I have also added some additional font links. These are fonts at Typekit rather than Google fonts: 

https://processwire.com/newsite/?font=bio-sans
https://processwire.com/newsite/?font=supria-sans
https://processwire.com/newsite/?font=trade-gothic-next
https://processwire.com/newsite/?font=tablet-gothic
https://processwire.com/newsite/?font=tablet-gothic-wide
https://processwire.com/newsite/?font=adelle-sans
https://processwire.com/newsite/?font=benton-sans
https://processwire.com/newsite/?font=urw-din

Also several other updates just pushed to the development site as well. I'm planning on launching it today, so there's likely to be some other updates as I take care of some more details. 

  • Like 3
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
  • Author
Posted

All the screenshots in the iMac have now been replaced with PNG-8 versions, except maybe 3 of them that were nearly full screen photos, so they were kept as JPEGs, but with quality=60 rather than quality=10. 

@breezer Thanks for posting the screenshot. Looks good to me, but I see what @Chris Bennett was talking about with the alignment on buttons and that Segue font. I wonder if there's any way to solve that by targeting it with CSS... guessing not since we'd have to target a particular font, and I don't think there is a CSS selector for that sort of thing. 

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
  • Author
Posted
Quote

Not a typo, but I noticed that the main API page is at http://processwire.com/newsite/api/ref/ instead of under Docs, eg http://processwire.com/newsite/docs/api/ref/ - not sure if this is intentional or not, but I would prefer it to be hierarchically correct.

It should still show you as being in the Docs section, but I kept the URL prefix as /api/ because there are so many links to /api/ref/ and I didn't want to 301 them at this time, plus I just like the readability of /api/ref/ since it is the API ref(erence). I didn't keep the /api/ prefix for anything else though. The only way someone would notice it says /api/ rather than /docs/ is if they look in the URL address bar and compare it from another page in the docs section. 

Quote

Also, is the cheatsheet coming back? I think this is really important!! 

Yes it is, but currently it's too far out of date so I'm not showing it in the docs navigation at the moment. I'm hoping to get the cheatsheet connected to the API Explorer module so that it can always be up-to-date like the API Reference section. 

  • Like 3
Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Here's something tricky with the live search ? Notice the second/third time I click into the input, the entire thing disappears.

6gyAG1YCTL.thumb.gif.063277e3b232d4be9888fd60473032d3.gif

Also, maybe a small thing, but I find the search close button/ x icon is too far from the input field - can it be at the right side of the field instead of the entire screen, or can the input be floated right rather than center? Not sure which would be better.

Adding the ESC to blur would help a little in this regard too, but I think in general it needs to be as easy as possible to clear the search and get the menu back.

OR - maybe the menu doesn't need to be hidden when search is activated?

Link to comment
Share on other sites
matjazp Hero Member

matjazp

Posted
Posted

Testing on windows 8, IE11 and Chrome, segoe ui is fine here, on both browsers. From the list of other Typekit fonts I prefer benton-sans, but system fonts are good for me. On IE the logo (top left) is black (invert filter is not supported on IE).

  • Like 1
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
  • Author
Posted
Quote

 

On IE the logo (top left) is black (invert filter is not supported on IE).

 

@matjazp or anyone else that might know —

I don't have a tool that can edit SVG images, my copy of Photoshop doesn't recognize them at least. Does anyone know how we can invert the colors of this particular SVG file so that it is white rather than black? That would prevent the need for the CSS filter. Thanks. 

https://processwire.com/newsite/site/templates/css/images/processwire.svg

Link to comment
Share on other sites
matjazp Hero Member

matjazp

Posted
Posted (edited)

Wouldn't just adding style="fill:#fff" or fill="#fff" to the <path element suffice? Or even: 

<style>
.pw_logo_color {fill: #fff}
.pw_logo_color:hover {fill: #D82C82}
</style>
<path class="pw_logo_color" ...

 

Edited by matjazp
added style example
  • Like 5
Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Congrats @ryan on getting it live!

One glaring thing for me (in case you missed my comments above) - the use of pages() in the API examples on the homepage is really going to confuse new users unless the FunctionsAPI is enabled by default, which I think it still isn't. Is that correct?

  • Like 2
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

@ryan, could you please confirm: ProcessWire will no longer have a wordmark logo and will instead use only the graphic from the previous logo together with the word "ProcessWire" set in whatever brand font is decided on?

If that's the case then the selection of brand font is even more important, and personally I don't think we should be considering any open-source/free/system font as candidates for the brand font. The problems being...

1. Free/system fonts are so ubiquitous that it's difficult to build up any association between the brand and the font when countless other brands and messages are associated with it.

2. Free/system fonts are widely used by ma-and-pa brands and amateur designers, and used for a multitude of non-designed purposes (e.g. quick paper signage like "toilet out of order", etc). This means they are often used carelessly in ugly settings, and the fonts become subconsciously tainted by association in the minds of the audience. I don't think we should risk that taint getting attached to the ProcessWire brand, even if only subconsciously.

3. In the case of a system font stack, an additional problem is that San Francisco, Segoe UI, Roboto and Helvetica Neue are all completely different designs with different "moods". Setting the brand logo in any one of a number of different fonts depending on device is tantamount to saying "we don't really care what typeface defines our logo and brand".

It's true that problems 1 and 2 can apply to commercial fonts also, but in practice the barrier of having to pay for the font means that most users of the font are professionals (reducing the odds that the font is seen in ugly settings) and the font is less likely to be available to the creators of paper signs, etc.

  • Like 7
Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Regarding the live search (which is awesome), is there a reason that it doesn't find "findIds()" or "findMany()" etc in the API when I type "find"? I actually have to type the "I" or "M" after find to get those matches. Can the matching be tweaked?

PS, it's only the ajax/live version that doesn't return these, because this does: https://processwire.com/search/?q=find

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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