[TYPO3-english] Templavoila and mobile templating

Andreas Becker ab.becker at web.de
Tue May 8 12:55:01 CEST 2012


Media Queries is actually the best way to go.
Using the framework for templavoila (in the upcoming version)
or march8 workers woman framework (already) you will be able to calculate
lots of stuff inside TYPO3 using TS
beside this you had already this week about 3 more html5 extensions and I
am sure there will be much more soon!

http://lessframework.com/
http://www.lakercompendium.com/
http://bakerframework.com/ - many of the examples use laker by the way !
http://medialoot.com/blog/how-to-code-a-clean-website-template-in-html5-css3/
http://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/#fbid=eadM-l9r1kW

here are only some links from many many many. If you have a MAC you can use
a nice app too
http://tumultco.com/hype/

and lots more

Andi

On Tue, May 8, 2012 at 8:54 AM, Martin Aarhof <martinprikaarhof at gmail.com>wrote:

> On 08-05-2012 03:26, Andi wrote:
>
>> Hi
>>
>> go to kay-strohbach.de and check the templates out he has already in the
>> template repository. Responsive webdesign is the future of mobile.
>>
>
> kay-strohbach.de
> is using twitter bootstrap responsive design
> http://twitter.github.com/**bootstrap/<http://twitter.github.com/bootstrap/>
>
> Its super easy to both integrate in TV and design to.
> And if you are using the LESS css way, you can change all the colors
> directly from the variables.less file
>
> Properly the easist solution (and one of the most used as I can see around
> the web) for responsive designs at the moment.
>
> jquery mobile
> http://jquerymobile.com/
> Is also nice, but its difficult if you want to go more "abstract" than the
> jquery mobile "default" design.
>
> But there are TONS of other "responsive design frameworks" out there.
> Search on google :)
>
> But yes,
> mobile css
> <link rel="stylesheet" type="text/css" href="" media="mobile" />
> isnt good more, because of all the different sizes on mobile screens
> (iphone, ipad, android pads and so on)
>
> Now "we" do
> @media (max-width: 980px) {
>   #left {float:left;}
>   #right {float:left;}
> }
>
> @media (max-width: 400px) {
>  #left {float:none;}
>  #right {float:none;}
> }
> (yes not a good example, but something like that)
>
> directly in the css file
>
> ______________________________**_________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-**bin/mailman/listinfo/typo3-**english<http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english>
>


More information about the TYPO3-english mailing list