Grid oder nicht?

[MacPix]

Hallo Contao Fan's

Ich wollte mal nach Fragen was Ihr so meint.

Ich würde gerne die Pages so bauen, das diese responsiv sind. Aber gerne so das es nicht springt von einem Punkt zum andern. zB wie auf der Seite http://www.werbeagentur-rsm.de/ .

Frage: was empfiehlt ihr mir?

- Grid oder nicht?
- da das Grid in Contao feste Breiten hat und nicht zB in Breiten mit % hat?
- Oder sollte man eher statt das Contao integrierte Grid zB die Ext. Subcolumns nehmen? (dann nicht immer schnell update bar.) ?
- Oder vielfach ganz normal eigene Div's machen und floaten?

Ich suche hier nach einer oder der Besten Lösung für mich, denke so ein Thema könnte auch andern helfen. Man sieht ja so einiges an Websites, aber was ist das Sinnvollste und Beste in Contao. ??

Were cool um tolle Tips und Anregungen.

Danke Community

[herbert]

Hi,

von den Grids halte ich wenig, vor allem da alle Werte fix sind. So richtig bin ich damit auch nicht zurecht gekommen. Vielleicht kann mir mal jemand kurz erklären für was die gut sind. Wird dann nicht alles eher statisch? Das für mobile Geräte bzw. responsive anzupassen ist ganz schön aufwendig.

Diese Sprünge, wie du Sie beschriebst, finde ich jetzt auch nicht so störend. Im Grunde zieht der Benutzer nicht ständig am Browserfenster. Es geht eigentlich darum, vielleicht täusche ich mich auch, einen optimalen Mittelweg zu finden und die üblichen Displaybreiten abzudecken. (unter 768px evtl. noch 320 und 480 explizit), zwischen 768 und 1024, und darüber mit vielleicht noch einer Abstufung.

Ich benutze meist die Ext. subcolumns, die ich dann unter 768 px, auf 100% setze (+ ein paar weitere Angaben) , um die Spalten untereinander in der vollen Breite anzuzeigen.

Das Ganze realisiere ich mit Media Queries.

Diese "mobile Layoutfunktion" von Contao bentze ich nicht, da ja auch die Tablets als mobil eingestuft werden. Dort möchte ich jedoch noch keine reduzierte Darstellung.

So gehe ich zumindest vor. Vielleicht bin ich damit auch auf dem Holzweg. :-)

[Bas]

Ich mach es, indem ich das Contao-eigene CSS komplett deaktiviere und bau mir mein Grid mittels Susy (und Sass, Compass) selber (-> http://susy.oddbird.net/).

Ist mit Sicherheit aufwendiger, aber dafür bin ich total frei in der Definition. Kann ich jedem nur empfehlen ... Sass und Compass ist relativ einfach zu lernen (z.B. http://www.youtube.com/playlist?list=PL2CB1F80266E986EA und http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3).

[Bas]

... von den Grids halte ich wenig, vor allem da alle Werte fix sind. So richtig bin ich damit auch nicht zurecht gekommen. Vielleicht kann mir mal jemand kurz erklären für was die gut sind. [...]

Hier Deine Erklärung bzgl. Grids: http://www.elmastudio.de/webdesign/w...er-ueberblick/
Der Link bezieht sich auf statische Grids, responsive Grids sind im Endeffekt dasselbe nur dass die diversen Spalten bzw. Spaltenzuweisung variabel sind (abhängig von Viewport/Mediaqueries).

In der Praxis weist Du Deinen Divs etc. mittels vorbereiteter Klassen eine bestimmte Spaltenbreite zu (zu "col_4"). Mittels Mediaqueries änderst Du diese Klassen, so dass diese z.B. ab einer bestimmten Viewportgröße auf 100% Breite wechseln.

[Spooky]

von den Grids halte ich wenig, vor allem da alle Werte fix sind.

Du kannst ja statt dessen ein fluid responsive grid nehmen. Das von Contao ist halt mit fixen Breiten, ja.

Falls es jemanden interessiert: hier ein minimales fluid responsive grid System (in diesem Fall auch speziell für Contao), mit 2% gutter und einem breakpoint bei 768px:

/* clearfix */
.cf:after,
.inside:after,
.group:after {
    content:"";
    display:block;
    clear:both;
}

/* default negative margin on .inside and .group */
.inside,
.group { margin:0 -1%; }

/* default margin on all elements within .inside and .group */
.inside > *,
.group > * { margin:0 1%; }

/* reset margin on .group within .inside */
.inside > .group { margin:0; }

/* default column */
*[class*='span'] {
    position:relative;
    float:left;
    margin:0 1%;
    width:98%;
    min-height:0.01em;
}

/* grid widths */
.span1  { width: 6.3333%; }
.span2  { width:14.6666%; }
.span3  { width:23.0000%; }
.span4  { width:31.3333%; }
.span5  { width:39.6666%; }
.span6  { width:48.0000%; }
.span7  { width:56.3333%; }
.span8  { width:64.6666%; }
.span9  { width:73.0000%; }
.span10 { width:81.3333%; }
.span11 { width:89.6666%; }
.span12 { width:98.0000%; }

/* pushing */
.push1  { left: 8.3333%; }
.push2  { left:16.6666%; }
.push3  { left:25.0000%; }
.push4  { left:33.3333%; }
.push5  { left:41.6666%; }
.push6  { left:50.0000%; }
.push7  { left:58.3333%; }
.push8  { left:66.6666%; }
.push9  { left:75.0000%; }
.push10 { left:83.3333%; }
.push11 { left:91.6666%; }

/* pulling */
.pull1  { left: -8.3333%; }
.pull2  { left:-16.6666%; }
.pull3  { left:-25.0000%; }
.pull4  { left:-33.3333%; }
.pull5  { left:-41.6666%; }
.pull6  { left:-50.0000%; }
.pull7  { left:-58.3333%; }
.pull8  { left:-66.6666%; }
.pull9  { left:-75.0000%; }
.pull10 { left:-83.3333%; }
.pull11 { left:-91.6666%; }

/* manual clearing */
.cl { clear:left; }
.cr { clear:right; }
.cb { clear:both; }

/* centered column */
*[class*='span'].center {
    margin:0 auto;
    clear:both;
    float:none;
}


/* responsive */
@media only screen and (max-width:768px) {

    /* reset default negative margin on .inside and .group */
    .inside,
    .group { margin:0; }

    /* reset default margin on all elements within .inside and .group */
    .inside > *,
    .group > * { margin:0; }

    /* expand columns to 100% width */
    *[class*='span'] {
        float:none;
        width:auto;
        left:0;
    }
} 

Damit kann man Contao Artikeln direkt span* Klassen geben und damit zu Spalten machen, ohne weitere Wrapper. Natürlich kann man auch Content Elementen die span* Klassen geben, sie müssen nur auf irgend eine Weise von .group gewrapped sein (bspw. kann man dem Artikel die Klasse group geben, falls der Artikel selbst keine Spalte ist, oder man benutzt die [semantic_html5] Extension). Gleiches gilt für den Einsatz im fe_page Template.

[MacPix]

Ich mach es, indem ich das Contao-eigene CSS komplett deaktiviere und bau mir mein Grid mittels Susy (und Sass, Compass) selber (-> http://susy.oddbird.net/).

Ist mit Sicherheit aufwendiger, aber dafür bin ich total frei in der Definition. Kann ich jedem nur empfehlen ... Sass und Compass ist relativ einfach zu lernen (z.B. http://www.youtube.com/playlist?list=PL2CB1F80266E986EA und http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3).

Interessant - Dank für deinen Tip muss ich mir mal anschauen, denn ich kannte diese Art nicht.

[MacPix]

Du kannst ja statt dessen ein fluid responsive grid nehmen. Das von Contao ist halt mit fixen Breiten, ja.

Falls es jemanden interessiert: hier ein minimales fluid responsive grid System (in diesem Fall auch speziell für Contao), mit 2% gutter und einem breakpoint bei 768px:

/* clearfix */
.cf:after,
.inside:after,
.group:after {
    content:"";
    display:block;
    clear:both;
}

/* default negative margin on .inside and .group */
.inside,
.group { margin:0 -1%; }

/* default margin on all elements within .inside and .group */
.inside > *,
.group > * { margin:0 1%; }

/* reset margin on .group within .inside */
.inside > .group { margin:0; }

/* default column */
*[class*='span'] {
    position:relative;
    float:left;
    margin:0 1%;
    width:98%;
    min-height:0.01em;
}

/* grid widths */
.span1  { width: 6.3333%; }
.span2  { width:14.6666%; }
.span3  { width:23.0000%; }
.span4  { width:31.3333%; }
.span5  { width:39.6666%; }
.span6  { width:48.0000%; }
.span7  { width:56.3333%; }
.span8  { width:64.6666%; }
.span9  { width:73.0000%; }
.span10 { width:81.3333%; }
.span11 { width:89.6666%; }
.span12 { width:98.0000%; }

/* pushing */
.push1  { left: 8.3333%; }
.push2  { left:16.6666%; }
.push3  { left:25.0000%; }
.push4  { left:33.3333%; }
.push5  { left:41.6666%; }
.push6  { left:50.0000%; }
.push7  { left:58.3333%; }
.push8  { left:66.6666%; }
.push9  { left:75.0000%; }
.push10 { left:83.3333%; }
.push11 { left:91.6666%; }

/* pulling */
.pull1  { left: -8.3333%; }
.pull2  { left:-16.6666%; }
.pull3  { left:-25.0000%; }
.pull4  { left:-33.3333%; }
.pull5  { left:-41.6666%; }
.pull6  { left:-50.0000%; }
.pull7  { left:-58.3333%; }
.pull8  { left:-66.6666%; }
.pull9  { left:-75.0000%; }
.pull10 { left:-83.3333%; }
.pull11 { left:-91.6666%; }

/* manual clearing */
.cl { clear:left; }
.cr { clear:right; }
.cb { clear:both; }

/* centered column */
*[class*='span'].center {
    margin:0 auto;
    clear:both;
    float:none;
}


/* responsive */
@media only screen and (max-width:768px) {

    /* reset default negative margin on .inside and .group */
    .inside,
    .group { margin:0; }

    /* reset default margin on all elements within .inside and .group */
    .inside > *,
    .group > * { margin:0; }

    /* expand columns to 100% width */
    *[class*='span'] {
        float:none;
        width:auto;
        left:0;
    }
} 

Damit kann man Contao Artikeln direkt span* Klassen geben und damit zu Spalten machen, ohne weitere Wrapper. Natürlich kann man auch Content Elementen die span* Klassen geben, sie müssen nur auf irgend eine Weise von .group gewrapped sein (bspw. kann man dem Artikel die Klasse group geben, falls der Artikel selbst keine Spalte ist, oder man benutzt die [semantic_html5] Extension). Gleiches gilt für den Einsatz im fe_page Template.

O WOW Danke viel mals, das muss ich mal ausprobieren. Sicher auch eine interessante Lösung wenn es dann auch noch fertig ausgebaut ist.
Hast du evt auch eine Seite die so Online geschalten ist?

[Spooky]

Derzeit leider nichts fertiges, ich hab dir ein Beispiel per P.M. geschickt. Achja, IE7 compatible ist das nicht (falls das wichtig ist..)