HTML/CSS Responsive HTML5/CSS3 Grid voor CMSMS

[pasmaskas]

Best CMSMS Leden,

Hier weer een cadeautje van mij.

Ik maak veel websites in CMSMS en aangezien tegenwoordig responsive een must have is ben ik gaan zoeken naar een passend responsive grid voor mijn websites. Als je voor de eerste keer naar een responsive grid kijkt ziet het er ingewikkeld uit (ik snapte niets van al die grid's en hoe je ze makkelijk kon toepassen). Ik ben toen uitgaan zoeken hoe het precies werkte en met @media in css gaan experimenteren en gaan kijken hoe ik het voor mij zelf makkelijker kon maken. Toen dacht ik laat ik er een voor CMS Made Simple maken! En hier is hij dan! Na lang onderzoeken/afwegen hoe en wat/testen en verschillende versies te hebben gemaakt ben ik nu te tevreden over het "voorlopige" eind resultaat. Alles werkt zo als ik het wil en als ik er iets van toepas in de layout of in de editor in CMS Made Simple dan weet ik dat het werkt.

Link naar informatie: http://pmkmedia.nl/grid

Link naar een voorbeeld: http://grid.pmkmedia.nl

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/GRID-1200-2.1.zip

PSD bestand: http://grid.pmkmedia.nl/grid/photoshop/grid-1200.psd (Een basis photoshop bestand die je kan gebruiken om een website te ontwerpen. Met alle kolom breedtes als voorbeeld er al in.)

Menu Sjabloon: http://grid.pmkmedia.nl/grid/cmsms/cmsm ... mplate.txt (Het menu sjabloon voor CMSMS.)

[Rolf]

Geweldige tutorial, Pascal!!!
Dit is de Open Source gedachte, nemen én geven.

grt. Rolf

[Jos]

Ik vind em ook super... alleen moet ik me er nog toe dwingen om me er ook in te verdiepen... het wordt echt tijd voor een CMSms workshop zou dit mooi in passen

[pasmaskas]

Dankjewel Rolf en Jos!

Ik ben erg tevreden over CMSMS en doe graag wat terug!

[pasmaskas]

Ik heb een kleine aanpassing aangebracht die er voor zorgt dat de footer altijd aan de onderkant van de pagina blijft plakken. tevens heb ik een header, main, en footer deel aangemaakt. Handig als je een 100% width header en footer in je ontwerp hebt of gewoon wil dat de footer onderaan blijft staan. Verder werkt het het zelfde alleen het is nu opgesplitst.

Link naar een voorbeeld: http://grid.pmkmedia.nl/sticky

Zip bestand met alle bestanden voor de sticky footer versie: http://grid.pmkmedia.nl/grid-1200-1.2-sticky.zip

Nog een leuk experiment van mij. Je kent ze wel de single page websites http://www.android.com/kitkat/index.html . Ik heb het grid omgebouwd naar een singlepage grid/template. Qua basis is het het zelfde. Je moet nu alleen je section ook insluiten in een div die de zelfde id heeft als de "href" anker naam in de menu links (info over ankers http://www.webrichtlijnen.nl/aan-de-sla ... ina-ankers). Verder zit er ook een script in die er voorzorg dan alles soepel scrolt. Om alle content van de pagina's in de singlepage website te krijgen heb je de module CGSimpleSmarty nodig. Hier een tutorial van Rolf hoe je dat voor elkaar krijgt https://www.cmscanbesimple.org/blog/mul ... query-tabs

Link naar een voorbeeld: http://grid.pmkmedia.nl/single

Zip bestand met alle bestanden voor de sticky footer versie: http://grid.pmkmedia.nl/grid-1200-1.2-single.zip

[pasmaskas]

Nog een experimentje.

Parallax scrolling background.
Active pagina zichtbaar in het menu.
Smooth scrolling.

Link naar een voorbeeld: http://grid.pmkmedia.nl/parallax

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/parallax.zip

[Rolf]

Hahh, LEUK!!

[(M)]

Geweldige voorbeelden. Vooral het Parallax scrolling werkt erg goed.

Ik zit ook te denken aan het maken van een single-page website. Ik heb al wat geëxperimenteerd met de tutorial van Rolf in combinatie met de module CGSimpleSmarty. Voor de tekst editor zijn de pagina's dan goed te beheren.

Wat ik mij af vroeg is, hoe is een goede ondersteuning van SEO toe te passen op een single-page website?
Ik heb dit artikel gevonden maar de oplossing is mij te technisch.

Voor SEO ondersteuning gebruik ik vaak deze info;
http://blog.arvixe.com/how-to-put-your- ... autopilot/

[pasmaskas]

Ik heb eigelijk geen idee of het wel SEO vriendelijk is. Ik weet wel dat als je het via Ajax inlaad dat dat niet zo is omdat de content eigelijk niet in de code zichtbaar is maar via een scriptje word ingeladen. Maar met CGSimpleSmarty is de content van de paginas wel gewoon zichtbaar (Correct Me If I'm Wrong) geloof ik. Dus de zoekmachines zouden gewoon de content kunnnen doorzoeken.

[velden]

Bookmark waard in ieder geval.

SEO (Google) en Ajax
https://support.google.com/webmasters/a ... 4992?hl=nl

Misschien ook niet al te eenvoudig, maar dat zal het misschien ook nooit worden.

[HarmO]

Ok, late reactie, maar ik wil je wel helpen het om te zetten in Sass zodat aanpassen maar een questie is van variabelen aan te passen of elementen te includen.

Zelf werk ik voor Sass met Scout-app (http://mhs.github.io/scout-app/), een handig tooltje dat draait op adobe air.

Zou cool zijn moest er zoiets als ondersteuning voor sass of less ingebouwt worden in CMSMS

---

Verder qua verbetering denk ik aan het volgende:
Een grid gebaseerd op <ul> lists, welk wel handig is voor fotogalerijtjes en dergelijke.

laat me maar iets weten via PM.

[pasmaskas]

Ik heb je een PM gestuurd HarmO.

[rodeto]

Erg bedankt allemaal voor deze post! Dit maakt een hoop duidelijk en belooft veel voor de toekomst.
Ik hoop dat uit de samenwerking tussen pasmaskas en HarmO nog veel moois gaat komen

[pasmaskas]

Thnx rodeto! Ik ben ook erg benieuwt wat HarmO mij gaat laten zien!

[rodeto]

Ik ben even bezig geweest met de responsive-sticky template maar het valt mij op dat als ik een grote foto invoeg in een van de kolommen deze meeschaalt tot het moment dat de foto groter is dan het scherm. Dan schaalt de foto terug naar zijn originele afmetingen.
Dit gebeurt alleen in FF en IE. In Chrome werkt het wel goed.
Ik kan er niet achter komen hoe ik dat aan kan passen. Kan iemand mij helpen hiermee?