zurück zur Startseite
  


Zurück XHTMLforum > Sonstiges > Ressourcen
Seite neu laden Grid-Frameworks

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2012, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 17
eBoy befindet sich auf einem aufstrebenden Ast
Standard Grid-Frameworks

Ich bin momentan auf der Suche nach einer stabilen Basis für das Layout meiner neuen Seite.
Dabei geht es aktuell weniger um die Inhalte, als eher um die Flexibilität (cross Browser, Smartphones, Tablets,...)


Bei meiner Suche bin ich über unzählige Lösungen/ Ideen gestolpert und bei diesen hier hängen geblieben.

Columnal und Simplegrid
Zuerst hat mir der einfache Ansatz besonders von Simplegrid gefallen. Testen konnte ich in aktuellen Chrome, Firefox, Opera und IE. Zusätzlich mit IETester, wobei hier die Ergebnisse scheinbar nicht immer denen im nativen IE entsprechen.
Ausschlaggebend war aber der Test auf Tablet/ Smartphone. Hier konnte man den Text bzw. die Webseite nicht zoomen, was mir nicht gefällt...

Gridless Boilerplate
Funktioniert inkl. zoom auf moobilen Geräten, benötigt aber für den IE JavaScript, was im IETester zu Problemen geführt hat (hier wäre ein nativer Test unter IE 6-8 interessant...). Die Ansicht war erst ab IE8 wie erwartet. Bei IE7 (und IE6) leicht abweichend, aber durchaus noch ok. IE5 zeigt direkt die Spalten untereinander, was auch sicherlich absolut in Ordnung wäre für den eingestaubten IE5.
Bei einem Test im IETester mit deaktiviertem JS gab es erwartungsgemäß Probleme mit IE 5-8 (IE5, IE7 und IE8 haben direkt "einspaltig" dargestellt., IE6 etwas besser - aber alles war durchaus noch akzeptabel!)


mqframework
Funktioniert auch recht gut. Zoom klappt. Macht aber bis inkl. IE8 Darstellungsprobleme (unter IETester).

1140px CSS Grid
Dies scheint soweit gut zu funktionieren. Zoomen in Smartphone/ Tablet klappt. Auch ansonsten passt es soweit gut. IE 5-7 haben "kleinere" Probleme (Reload notwendig im IETester bei Resize, Ansicht im IE5 1-spaltig, IE6 2-spaltig und erst im IE7 dann dreispaltig
Wobei hier auf http://code.google.com/p/css3-mediaqueries-js/ zurückgegriffen wird für Browser, welche CSS3 Media Queries nicht unterstützen (z.B. IE)

Floating Boxes (Matthew James Taylor
Ist ein anderer Ansatz. Hier werden "einfach" Boxen (divs) nebeneinander angezeigt und sobald die Seite zu schmal wird, springt die entsprechend äußerste Box nach unten.


Jetzt habe ich mir diese alle mal kurz angeschaut und einige Tests gemacht. Nun würde mich interessieren, ob ihr diese Frameworks/ Layouts kennt und welche ihr bevorzugt?


Grüße

Geändert von eBoy (20.04.2012 um 13:21 Uhr) Grund: Zusätzliche Informationen ergänzt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2012, 14:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 17
eBoy befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag:
In erster Linie geht es mir eigentlich nicht um Grid-Layouts, sondern eine flexible Methode Inhalte auch auf Smartphones oder Tablets gut anzuzeigen...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.07.2012, 17:24
Neuer Benutzer
neuer user
 
Registriert seit: 29.11.2011
Beiträge: 25
joocom kann nur auf Besserung hoffen
Standard "Initializr"

Ich kann dir 'Initializr' empfehlen. Ein Super-Tool um neue Projekte zu starten. Es bindet alle Frameworks/Toolkits ein die man für ein gelungenes Projekt braucht. Z. B. jQuery, Bootstrap, Boilerplate, usw. Der für dich wichtige mobile Aspekt kommt natürlich auch nicht zu kurz: Ein "Mobile First" Template ist ebenfalls an Bord. Initializr ist zudem modular aufgebaut. Du musst nur die Teile einbinden, die du auch wirklich benötigst. Hier habe ich es kurz vorgestellt: HTML5 Projekte mit Initializr beginnen | joocom Technologie News
Mit Zitat antworten
  #4 (permalink)  
Alt 13.07.2012, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 17
eBoy befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Antwort. Habe schon gar nicht mehr damit gerechnet hier noch was zu lesen

Neben den genannten gefällt mir aktuell auch Fluid Baseline Grid noch recht gut. Damit habe ich zwischenzeitlich noch etwas gebastelt.


Twitter Bootstrap habe ich mir auch mal angeschaut, aber das war einfach schon zu viel... Ich versuche es eher einfach zu halten. Dabei sei noch erwähnt, dass ich verstärkt mit dem CMS Drupal arbeite. Und zu große Frameworks mit CSS und JS könnten dann irgendwann auch mal dem Drupal-Code in die Quere kommen...
Mit Zitat antworten
  #5 (permalink)  
Alt 13.07.2012, 19:43
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von eBoy Beitrag anzeigen
Twitter Bootstrap habe ich mir auch mal angeschaut, aber das war einfach schon zu viel...
Wieso zuviel?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.07.2012, 20:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 17
eBoy befindet sich auf einem aufstrebenden Ast
Standard

Da sind Buttons, DropDowns, Tabs usw. Alles wirklich schön und gut! Setze ich nun aber eine recht einfache Seite um, benötige ich davon so gut wie gar nichts (responsive Layout, einige Basis Styles,...). Wieder andere dieser Features werden durch Drupal Module umgesetzt, welche schon bereitstehen.

Baue ich nun ein Projekt mit einer "komplexeren" UI, so wäre Twitter Bootstrap sicherlich eine mögliche Wahl! Da hat man halt viele coole Features bereitgestellt bekommen.


Ein entsprechendes Modul gibt es auch schon in Drupal, aber da besteht ein Problem mit der Anforderung jQuery 1.7, was mit dem Drupal Core Probleme mit sich bringt...
Mit Zitat antworten
  #7 (permalink)  
Alt 13.07.2012, 21:50
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Na, hat da wer das "Cutomize"-Tool etwa übersehen? ts ts ts. :P

Download · Twitter Bootstrap

ja Schleichwerbung schlimm sowas

Des weiteren benötigt Twitter-Bootstrap kein jQuery. Nur die JavaScript-Funktionen würden das benötigen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #8 (permalink)  
Alt 15.07.2012, 09:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 17
eBoy befindet sich auf einem aufstrebenden Ast
Standard

Ok, hatte ich übersehen... Doch wäre es dann besser, diese auch zu nutzen. Das Gesamtpaket Twitter Bootstrap gefällt mir sehr gut! Navigation, Buttons, DropDowns usw.
Diese funktionieren aber nur mit JavaScript (und somit auch jQuery in aktueller Version).

Ein umfangreiches Projekt mit aufwändiger UI wäre damit wohl gut umgesetzt. Für einfache Seiten benötige ich die Komponenten nicht und nutze bestehende Hilfsmittel und Module
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
grid problem xinu CSS 1 12.08.2011 15:15
Eigene Frameworks - Wie kann ich selbst basteln? SnakeMedia Javascript & Ajax 21 02.11.2010 17:09
JS Frameworks markuskoehler Javascript & Ajax 4 09.08.2010 13:14
Variable Grid System - nicht gleich breite Spalten? derMatze CSS 2 07.06.2009 19:22
Grid (floating Problem) - IE erzeugt Abstände citostyle CSS 4 16.04.2007 17:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:52 Uhr.