Hello guys, could anybody let me know how and Umbraco has any "responsive design" feature built in? I have had a look around and the impression I have is that eveybody seems to importing a different grid system (someone uses bootstrap, some ubootstrap some others grids from other websites). I have read somewhere on the official website that Umbraco "Serves mobile platforms as well without having a separate
site", so I think it is fair to assume that I can have only one website - this would be my approach - and display it properly on any device. What I would like tto know is, how this is implemented. Do I have to import a grid from somewhere (package or wherever) and then use media queries or does umbraco uses some device detecting script? Usually - or a non Umbraco projects - I use my own grid and then media queries to reposition elements as necessary at different resolutions, no scripting involved. Would it be the same thing in Umbraco?
In this sense Umbraco is more of a framework than offering complete sites out of the box. So once set up you can use literally whatever front-end templates (HTML/CSS/JS) you prefer - Umbraco won't alter anything in that respect. Most of the time you actually need to integrate these things else Umbraco will give you nothing.
If you want something a little more 'out of the box' then there are a couple of starter kits for v7 and at least one of them is responsive (built on a theme from HTML5Up AFAIK) so they'd be well worth installing and having a play with, just to get your head around how Umbraco works and what it does.
HI thanks, so just os I understand this correctly: umbraco doesn't have any native responsive grid, hence the need to use any grid system (ubootstrap, bootstrap etc). Is the started kit you mentioned within the downloadable umbraco packages?
That's right. When you install Umbraco there's a step in the installer that asks if you'd like to install a 'Starter Kit'. If you don't, then you get literally no front-end mark-up in your solution at all - you just get bare Umbraco which is just the CMS and doesn't output any form of website at all, in which case you need to go in and create your document types (the data containers to hold all your data) and your templates (the code that displays the data) and your assets such as style sheets and images etc.
I think you can actually install a starter kit retrospectively too if you go to the Developer section and open up 'packages', but it may interfere with things if you've already started building a site in there.
During installation if you choose to install a Starter Kit it will set up a basic website for you to use, one of which happens to be a responsive website which is built using some kind of responsive grid (possibly Bootstrap). The fact that the starter kit comes with a responsive grid isn't anything to do with Umbraco, as I say, Umbraco lets you use whatever front-end code you prefer - whether it's Bootstrap, Zurb, PureCSS, or your own custom mark-up. So you're in control. It's just that that particular starter kit was made by someone who built it on Bootstrap, so that's what you get when you install it.
The way to start would probably be to build your front end templates just as static HTML/CSS/JS using whatever framework you prefer. Once you have your templates coded up and you're happy with them, they're working responsively etc, then import them into Umbraco as templates and start to integrate your logic into them to make the content dynamic/editable. You may need help to get your templates set up correctly, but I'd strongly recommend watching some of the Umbraco.TV starter tutorials and also installing a starter kit and having a good look around, as it'll help you get your head around how Umbraco works.
Mobile websites
Hello guys, could anybody let me know how and Umbraco has any "responsive design" feature built in? I have had a look around and the impression I have is that eveybody seems to importing a different grid system (someone uses bootstrap, some ubootstrap some others grids from other websites). I have read somewhere on the official website that Umbraco "Serves mobile platforms as well without having a separate site", so I think it is fair to assume that I can have only one website - this would be my approach - and display it properly on any device. What I would like tto know is, how this is implemented. Do I have to import a grid from somewhere (package or wherever) and then use media queries or does umbraco uses some device detecting script? Usually - or a non Umbraco projects - I use my own grid and then media queries to reposition elements as necessary at different resolutions, no scripting involved. Would it be the same thing in Umbraco?
thanks
Hi Astumb,
In this sense Umbraco is more of a framework than offering complete sites out of the box. So once set up you can use literally whatever front-end templates (HTML/CSS/JS) you prefer - Umbraco won't alter anything in that respect. Most of the time you actually need to integrate these things else Umbraco will give you nothing.
If you want something a little more 'out of the box' then there are a couple of starter kits for v7 and at least one of them is responsive (built on a theme from HTML5Up AFAIK) so they'd be well worth installing and having a play with, just to get your head around how Umbraco works and what it does.
Hope this helps. :)
HI thanks, so just os I understand this correctly: umbraco doesn't have any native responsive grid, hence the need to use any grid system (ubootstrap, bootstrap etc). Is the started kit you mentioned within the downloadable umbraco packages?
thanks
Hi Astumb,
That's right. When you install Umbraco there's a step in the installer that asks if you'd like to install a 'Starter Kit'. If you don't, then you get literally no front-end mark-up in your solution at all - you just get bare Umbraco which is just the CMS and doesn't output any form of website at all, in which case you need to go in and create your document types (the data containers to hold all your data) and your templates (the code that displays the data) and your assets such as style sheets and images etc.
I think you can actually install a starter kit retrospectively too if you go to the Developer section and open up 'packages', but it may interfere with things if you've already started building a site in there.
During installation if you choose to install a Starter Kit it will set up a basic website for you to use, one of which happens to be a responsive website which is built using some kind of responsive grid (possibly Bootstrap). The fact that the starter kit comes with a responsive grid isn't anything to do with Umbraco, as I say, Umbraco lets you use whatever front-end code you prefer - whether it's Bootstrap, Zurb, PureCSS, or your own custom mark-up. So you're in control. It's just that that particular starter kit was made by someone who built it on Bootstrap, so that's what you get when you install it.
The way to start would probably be to build your front end templates just as static HTML/CSS/JS using whatever framework you prefer. Once you have your templates coded up and you're happy with them, they're working responsively etc, then import them into Umbraco as templates and start to integrate your logic into them to make the content dynamic/editable. You may need help to get your templates set up correctly, but I'd strongly recommend watching some of the Umbraco.TV starter tutorials and also installing a starter kit and having a good look around, as it'll help you get your head around how Umbraco works.
Fabulous, thank you very much for the explanation!
cheers
is working on a reply...