This project is read-only.

Bootstrap and SitePage issue? Please help?

Jul 21, 2014 at 2:47 AM
hi guys, i have been able to use the twitter bootstrap wsp and was able to actually finish a design, was able to apply new text, new color and even a background effect . i click on a new Page, the responsiveness is retained which is perfectly fine, I have a question regarding SitePages. The text layout option is not responsive. how would i set them to inherit the responsiveness? i ask this because if i have a scenario whereby an employee from another division wants to build a sitepage within the intranet site, how would i set the text layout be automatically responsive or how do i include responsive text layouts for him/her? Your assistance is greatly appreciated.
Jul 21, 2014 at 9:21 AM
Hello orispo,

You might want to take a look at Flowtype.js (http://simplefocus.com/flowtype/), though we haven't thoroughly tested it.
Jul 21, 2014 at 1:09 PM
i looked at it but it's still not giving me what i need. SitePages inherit the navigation and it's responsiveness. but the layout which is text by default is not responsive and even if i add a web part page the responsiveness does not exist. Is it possible to get the class name or div name associated with the text layout so that i could plug in the queries as you guys did on the webpart layouts? or how can i make a sitepage part of the page library so that it inherits the main pages's responsiveness?
Jul 21, 2014 at 5:51 PM
Hi,

Unfortunate you have encountered one of the biggest issues in customizing the content layout of sitepages, i.e. foundation only based pages that are not using the pages library and are not based on the page content type. Site Pages do not allow you to provide fixed layouts meaning that you cannot provide set layouts that your site authors can choose from.

First suggestion is to move away from pages stored in the sitepages library as you cannot provide solid branding. Enable publishing and use the pages library. (License permitting)

Assuming that is not possible, you have limited options. Unfortunately you will find there is not a specific catch-all class the SP adds to the content wrapper of pages in the sitepages library, you will have to add your own.

Remember that sitepages use the system (default) master page while pages in the pages library use the site (custom) master page. This means that you could add some special JS to system master page to possibly add a custom class to the html, body or similar tag that you could use to provide your own media query css overrides to make sitepages "responsive". The major catch here is that all of your site settings pages also use the system master page so you will have to be diligent in how your js figures out if the current content page is in the sitepages library.

You could use the sitepages path to determine if the current page is in the site pages library. Basically add JS to your system master page that then looks at the current page's path. If /sitepages/ is found in the path then this likely is a page you want to add a special css class to, to provide additional css to make the content "Responsive". I say "likely" because a list view of a sitepages library would also have this same path so you need to tailor your JS.

I hope this helps point you in the right direction.

Eric
Jul 21, 2014 at 6:50 PM
Thank you Riolinx and Overfield for replying (your book on responsive webpages is really good :)) i noticed that there was a batch file for deploying the foundation master pages, is there one for the server/365 master pages? it seems to add a responsive layout for content types (web part page) i think it would be quite useful. Is there anyway i could get this?
Jul 21, 2014 at 9:21 PM
Hi,

The batch files you are referring to are really just scripts to run some powershell scripts for you automatically. One of the reasons why this was provided is to make it easier to deploy the alternative publishing solution as well as give you a starting shell to create your own custom scripts.

You should not actually need the batch files to deploy to O365. You could change the foundation batch file so that it deploys the publishing server solutions.

At this point this additional batch file does not exist. My recommendation is to use the foundation batch file as a starting place to create your own custom bat script.

Eric
Jul 21, 2014 at 11:25 PM
OK this is a long shot. What if I write specific CSS for the text layouts,would that work?
Jul 21, 2014 at 11:32 PM
Yes, you could generate specific css just for the text layouts that would provide different layout / styling based on your media query breakpoints. More of an adaptive approach, but in the end you would have mobile views which is what matters right?

My primary concern then is that you want your css to target just the text layout and that is the catch. There is not a great class or ID that SharePoint provides. You would add something special to your system master page which should help though.

Eric
Jul 22, 2014 at 3:08 PM
webpart layouts are able to see the css and js files and thus are responsive. that has been confirmed already. Ok, sharepoint has it's webpart template file spcf.aspx. how can i set it to see the css and js? because i've looked at the Page webpart template and the SitePage webpart template and they look pretty much the same, can i make a copy of this file spcf.aspx and then add the necessary lines for it to see the css and js? or it's not at all possible?
Jul 22, 2014 at 9:34 PM
Edited Jul 22, 2014 at 9:47 PM
ok, I've sought of put aside the text layout. I need now to make a batch file for the bootstrap templates. Is it ok if i follow the instructions on the 2 bat and psi files or is there going to be something a miss? :(
Jul 28, 2014 at 9:03 PM
If you follow the instructions / comments found in the existing bat / ps1 files, you should have all of you need to create your own bat / ps1 files. Of course dev and test on a non-prod farm though, but what you need should be there.

Eric