13 Aug 2007
Link to this post
22 Nov 2013
in reply to
You can use your own .Master file or a build in template it doesn't make a difference.
After all responsive design is about reflowing html by means of media-queries and classes.
If you're going to use your own .Master file and you want certain elements to be responsive by setting up reflow rules in the Sitefinity backend, your classes will have to play nice of course.
Take a Sitefinity 33%-67% 2 column layout widget. With the mobile add-on you can say a 2 column layout needs to reflow into 2x 1 column on Mobile.
What happens in the background is that media queries are added to layout-transformations.css so that class sf_2cols_1_33 and class sf_2cols_2_67 all become 100% width at a certain breakpoint.
However with the mobile add-on for each 'rule-group' you have the option to point to an external css file as well.
So you could have everything <400px point to markus-mobile.css and >400px <768px point to markus-fallback.css and inside those files use your own classes and media-queries.
If you stick to your own class names, the only thing your end-users wouldn't be able to use is the the visual reflow (system settings) as shown in the attachment.
Personally I use custom .master pages all the time, even with the mobile add-on. However I usually build out templates & pages (the stuff inside the PublicWrapper) inside Sitefinity.
It even works with Twitter Bootstrap, allowing you the option to use the Bootstrap responsiveness or use Sitefinity.
Sometimes it's best to hardcode certain regions/lay-outs into a .Masterpage but it only takes about 5 mins extra to simply re-use the Sitefinity class names, and by doing so ensuring the end-user can use the backend without limitations.