OK, so Screens is working well, but for a few points:
Slides are beautiful, unless you want a vertical image (I’m a photographer) with a coloured background. So normal train of thought. Set page background colour and then ‘Screens Slide-background’ to the chosen image with image size set to ‘contain’. The vertical image is constrained well, but there is no background colour.
Setting the Screens Slide - background to gradient (my ideal) and then adding an image is a disaster because the Foundation image stack has no ‘contain’ option and the vertical image fits to width, but extends beyond the page even if preloaded to the correct size or max width is defined. It would be great if the (otherwise excellent) Foundation Image stack had a little more granular control, like Screens
I’m struggling to get my type setup as I want - I have a TypeKit font (Adobe) up and running and that works well. Adobe have no improved the css, so copy and past is fine. Remember to ‘Publish’!. Will Joe’s Letterpress allow me get better control of text size, paragraphs and line spacing?
Font Styles is a really nice plugin, but utilising the Adobe TypeKit fonts, I couldn’t get to where I wanted (satisfying a traditional and skilled typographic designer).
I purchased a copy of Joe Workman’s LetterPress stack and solved the issue immediately. It played my more easily with the external fonts and most importantly, allowed me options to justify column of text. Highly recommended!
Vertical Image on coloured Screens page - solved after much experimentation and some confusion: on Screens Slide there is ‘Background’ that needs to be set to desired colour. Further down the Stack controls, there is ‘Screens Slide Background’.
The ‘Screens Slide Background’ is where the images should be inserted. If Vertical, choose ‘Image Size’ > Contain and set placement with Position (again if vertical and fitting to height of the page is required, chose Centre Centre or Left/ Right Centre.
However the page Does Not work responsively on Phone / Vertical Tablet: http://www.nickwb.co.uk/test/RB/ - a couple of panels down.
@NickWB I think there may be some confusion here regarding Screens Slides.
You only need a Slide stacks to create multiple horizontal scrolling pages within a Single Screens Page stack. There is nothing to be gained by adding a single slide into a page. Slides can be seen in operation here http://preview.joeworkman.net/screens/#slide-nav by clicking on the arrows to slide right and left.
I suspect this is why the background controls appear to be duplicated to you. Obviously with multiple slides on a page it is nice to have the option to have different backgrounds per slide - hence they also have their own background controls.
Regarding FontStyles - as you say, it is not designed for TypeKit but for self hosted web fonts. I do have a new stack coming though that has TypeKit, Hoefler & Co and lots of other modules built in to it which gives total control of typography on many levels - including vertical rhythm and absolute prevention of browser faux rendering. It may be of some interest in the future if you, like the testers, are interested in professional typography standards.
Thanks @Tav I did the whole site basics in a couple of hours and started with multiple slides on a page. Ultimately I found the navigation (dots) worked really nicely with a ‘vertical’ stack of pages for iPad and related devices.
Your idea makes sense and I have added a test page at the end of the site (it is not yet live), without the Screens slide, but it is not working quite as I want it. On phone it is far better, but on tablet / desktop, it is an not quite so good… Slide screens on the slide pages give me the background colour and the image to fill the page to the very edge on left or right. The downside is the lack of full responsiveness.
Removing the Screens Slide and replacing with a picture box means the image does not go full to the edge of the page and stretched horizontally (and softened). There are some odd gaps at the top of the page: http://www.nickwb.co.uk/test/RB/RBtest/ Scroll to the bottom where I have added a duplicate grey contact page for comparison. I am not sure if this is an error? I am checking in iOS devices, as opposed to the preview in RW.
I will be very interested to see the new Type Stack, when it is ready. I used to do a lot of work with fonts, but web has not been a good environment for type until more recently.
@NickWB I’ve had a little play with your design. I wasn’t sure exactly how you wanted it to behave on small devices so I have done two pages with alternatives. The first one goes to the solid colour background behind the text, the second page is done a little differently and uses a screens page background and retains the image behind the text for small screens.
The RW6 project file is here: https://infinit.io/_/38PV9db It does use a couple of BWD stacks namely Sections and Grummage 2col which you will need installed.
I’m not at my rapidweaver computer to say if this would work for sure but, if it is just an issue with how it displays at mobile, could you duplicate that content, format it how you prefer, and set it to be hidden on desktop/tablet and only show up in mobile (and the opposite setting for the existing sections).
I’m speechless @Tav - thank you so much! Indeed it works well on mobile and I’m going to take your project apart, rebuild my own and experiment now. I’ll come back to you!!
Thanks again!
BTW to answer @jabostick - the idea is sound, but in my experiments this afternoon, the disable / enable functionality did not work effectively when I created separate pages / content for mobile and desktop use. I was using current phones / tablet to check and the mobile-disabled content was viewable on the phone.
@NickWB My pleasure - just note that there is a little CSS in the page inspector to enable the removal of the background on the 2nd page if you want to use that method. The class that it refers to is simply added to the Sections stack custom class at the bottom of the settings. You could simply give every Sections stack on the page that needed the background to hide that same class.