print.css and mobile first - Post ID...

User 379556 Photo

Registered User
793 posts

I am converting my website from the Coffeegrinder framework (desktop first) to the Foundation framework (mobile first).

With the Coffeegrinder website, I needed very little in the print.css file. For most pages the desktop layout corresponded with the layout I wanted in printouts of the page, and the desktop layout is what was picked up by the browser's printing facilities.

With the Foundation website, the browser's printing facilities pick up the mobile layout, which is far removed from what I want in printouts of the page.

I have failed to discover what to put in the print.css to get browsers to pick up the desktop layout as the starting point for printing. I would appreciate guidance regarding this.*


*The solutions I have considered aren't really practical -
(a) a large print.css file by setting the position of every item in all the pages;
(b) creating PDF files of all the pages (there are hundreds of them).
User 122279 Photo

Senior Advisor
11,853 posts

Have you tried media queries? E.g. like this:
@media print and (min-width: 100px){
(Here you set the rules for printing for wide viewport)
I haven't tried this myself, but I would be surprised if it doesn't work.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF:
Component sharing for RFF, RBB, RSD and SD:

User 379556 Photo

Registered User
793 posts

Thanks, Inger, for the swift reply.

I have tried that, but without success. I saw one site which suggested that adding the word 'device' to the min-width would help, but I had no success with that either.

This webpage referred to here, but I do not understand how I would apply that to RSD.

Thanks again.

User 2823310 Photo

Registered User
312 posts

Frank I looked around real quick for something on the new foundation,
the only thing I found was this:
/* possible fix for printing */
@media print {
.large-1 {width: 8.33333%;}
.large-2 {width: 16.66667%;}
.large-3 {width: 25%;}
.large-4 {width: 33.33333%;}
.large-5 {width: 41.66667%;}
.large-6 {width: 50%;}
.large-7 {width: 58.33333%;}
.large-8 {width: 66.66667%;}
.large-9 {width: 75%;}
.large-10 {width: 83.33333%;}
.large-11 {width: 91.66667%;}
.large-12 {width: 100%;}

I didn't try it but you could paste that in the HEAD and give it a shot?

User 379556 Photo

Registered User
793 posts

Thanks for that, Alter Eagle.

I did, as suggested, put it in the Head box in RSD. I was hopeful, as it seemed possible that somehow it would invert for printing purposes from the effect of mobile first to the effect of desktop down.

It didn't work putting it directly in the Head box, but the principle seems promising. I also tried putting it in CSS, and called it via the Head box, but again I had no success.

The principle is probably from a page like this, which is similar to one I referred to in my last post. I get the impression from those pages that the code given may need some additional action to make it work.

If there is a simple tweak that will do the trick, that will be good. If not, I think I will sacrifice the better print layout that I had with Coffeegrinder for the technical improvements I am making in the conversion to Foundation. Printing out the pages is not something that I encourage, but I know it happens (I learned that one person printed out some 70 pages from the site).

Thanks again.

PS. I'm wondering whether CSS Grid Builder, with its completely different principles for the grid, will eventually perhaps be able to offer a choice of desktop-down or mobile-first. My understanding of these things is limited, but the choice seems to do with the process for the web designer rather than with the result for the person who views the website.

User 2823310 Photo

Registered User
312 posts

Css or cascading style sheets cascade so basically the closest to the page takes precedent. Like the attached sheet is the external or farthest away then the head is internal and finally inline. So just so you know putting a style in the head over rides the external style sheet.

I found that on stack overflow where the coding developers hang out but it's basically the same. The thing is CoffeeCup converts the scss library to css (which is a good thing) so that scss patch wouldn't work. The css you think would but it's one of the fixes you would have to try out to see the result. That should correct the layout size but then you may also need to add some specific styles for print as well?

It would be up to you but if print is a priority then maybe the C-grinder grid would be the best way. The time I spent on foundation I personally didn't find anything in it worth using. They both use a flex grid, the mobile up I found more of a hassle to work with, and none of the jQuery they add in was worth the huge download of styles and scripts included. I found most needed basic repairs anyway like the menus slideshow and stuff. The layout is basically built into RSD and the built in styles became more of a problem than a help. But I can see it could be good for people just starting out.

The CSS Grid Builder that Bob is working on really looks promising, I wish I had time to get into it, but I'm just too far behind getting sites over to responsive. That's going to be the way to go though in my opinion and from what I've read. It uses the browser to process the layout rather than going to a script then applying flex which as you know can create that lag on load.
User 379556 Photo

Registered User
793 posts

Thanks for those observations, Alter Eagle.

"Css ... the closest to the page takes precedent". Yes: when the CSS didn't work in the Head box, my further trying it in a separate CSS file was unnecessary.

"... it's one of the fixes you would have to try out to see the result". It certainly was worth trying.

"if print is a priority then maybe the C-grinder grid would be the best way". I agree, unless the idea in the next paragraph proves very easy. Happily, on my current project, print isn't a priority, but I hope to sort it if I can without too much effort.

I doubt whether I'll be able to explore the idea much in the next few days, but it seems possible that one can produce a print.css file that prints the desk-top layout with less work than I originally thought. What I have in mind is that the main.css file seems neatly organised it its ordering of the '@media screen' items. It should therefore be possible to identify in that file the items necessary for the print.css file, and copy and paste them to the print.css file. Perhaps that's how others do it already.


User 379556 Photo

Registered User
793 posts

Further to my last post, I found a solution that works for me. It is based on

(A) the fact that, when I started converting from Coffeegrinder to Foundation I decided that I wouldn't bother with adjusting the number of 'spans' in columns, as, with flexbox and nesting containers, I could now do pretty-well everything that I used to with column 'span' adjustments;
(B) my supposing that CSS files are processed by a browser as below.

1. It starts at the top and processes each style-rule in turn.
2. If it comes to a style-rule that changes one it's already processed, it ditches that previous one, and uses the latest one.
3. It continues until it comes to a section like this
@media screen and (min-width: Xrem) {...}.
4. If Xrem is greater than the width of the browser window, it halts there. Otherwise it continues.
5. It continues processing per items 3 and 4 above, until item 4 brings it to a halt, or it reaches the end of the file.

I don't know whether these suppositions are correct, but they do give me a quick way of creating a print.css file that causes printing to be as at any breakpoint I wish.

The print.css file is, of course, a series of style-rules between the curly brackets of @media print {...}. I put a copy of all the contents of main.css there, and adjusted those contents as follows -
(a) I removed all the style-rules preceding the first @media screen line - they're the style-rules which automatically are used for printing unless modified by a print.css file.
(b) If I didn't want the printout to reflect the full-width screen, I removed everything following the style-rules of the breakpoint which I wanted the printout to show.
(c) I deleted the remaining '@media screen and (min-width: Xrem) {' lines and their closing curly brackets.
(d) I added any further rules I wanted for
(i) removing from, or adding to, the printed page, and
(ii) making special adjustments (e.g. fonts)

This was painless, and seems to work fine. The print.css file could, of course, be reduced by deleting all the style-rules which get ditched per supposition 2 above or are irrelevant by being set to display:none for printing.

While the above seems to solve the problem for me, it would be interesting to learn the following -
(1) Do my suppositions 1-5 reflect what truly happens?
(2) I see that the foundations.css files generated by RSD already include some @media print lines. Does that mean that my print.css file would still have worked even if I had used adjustments of column 'spans' (B above)?
(3) Does the above mean that the CoffeeCup team could add a facility to RSD which would generate a basic print.css file for any breakpoint, which one could tweak within the program?


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.