HTML/CSS Responsive HTML5/CSS3 Grid voor CMSMS

Een board om T&T's te plaatsen m.b.t. CMSMS, PHP of Smarty

Moderators: velden, Rolf

pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

HTML/CSS Responsive HTML5/CSS3 Grid voor CMSMS

Post by pasmaskas »

Image

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.)
Last edited by pasmaskas on Fri Jan 23, 2015 3:31 pm, edited 35 times in total.
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7741
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands

Re: Responsive 1200px Grid voor CMSMS

Post by Rolf »

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

grt. Rolf
Image
- + - + - + - + - + -
Latest CMSMS tutorial: FormBuilder WatchGuard
- + - + - + - + - + -
Did my post help you solving a problem at your (customers) website and it saved you many hours of work?
Great!! Buy me a cup of coffee in return as a small token of appreciation!
Jos
Support Guru
Support Guru
Posts: 4016
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Responsive 1200px Grid voor CMSMS

Post by 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 8)
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive 1200px Grid voor CMSMS

Post by pasmaskas »

Dankjewel Rolf en Jos!

Ik ben erg tevreden over CMSMS en doe graag wat terug!
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive 1200px Grid voor CMSMS

Post by 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
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7741
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by Rolf »

Hahh, LEUK!! :-)
Image
- + - + - + - + - + -
Latest CMSMS tutorial: FormBuilder WatchGuard
- + - + - + - + - + -
Did my post help you solving a problem at your (customers) website and it saved you many hours of work?
Great!! Buy me a cup of coffee in return as a small token of appreciation!
(M)
Forum Members
Forum Members
Posts: 107
Joined: Tue Mar 18, 2008 11:43 pm

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by (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
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3274
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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
Forum Members
Forum Members
Posts: 246
Joined: Thu Jan 26, 2012 3:22 pm
Location: Belgium

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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.
Kind regards,
HarmO
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by pasmaskas »

Ik heb je een PM gestuurd HarmO.
rodeto
Power Poster
Power Poster
Posts: 407
Joined: Thu May 04, 2006 9:12 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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 :D
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by pasmaskas »

Thnx rodeto! Ik ben ook erg benieuwt wat HarmO mij gaat laten zien!
rodeto
Power Poster
Power Poster
Posts: 407
Joined: Thu May 04, 2006 9:12 am

Re: Responsive/Singlepage/parallax website Grid voor CMSMS

Post by 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?
Last edited by rodeto on Fri Feb 28, 2014 2:10 pm, edited 1 time in total.
Locked

Return to “Tips en Trucs”