• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 47 posts ]  Go to page 1, 2, 3, 4  Next
Author Message
 Post subject: HTML/CSS Responsive HTML5/CSS3 Grid voor CMSMS
PostPosted: Wed May 08, 2013 2:34 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
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/cmsms-menu-template.txt (Het menu sjabloon voor CMSMS.)

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Last edited by pasmaskas on Fri Jan 23, 2015 3:31 pm, edited 35 times in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive 1200px Grid voor CMSMS
PostPosted: Wed May 08, 2013 2:54 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7440
Location: The Netherlands
Geweldige tutorial, Pascal!!!
Dit is de Open Source gedachte, nemen én geven.

grt. Rolf

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive 1200px Grid voor CMSMS
PostPosted: Wed May 08, 2013 3:00 pm 
Offline
Support Guru
Support Guru
User avatar

Joined: Wed Sep 05, 2007 8:03 pm
Posts: 3999
Location: The Netherlands
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)

_________________


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive 1200px Grid voor CMSMS
PostPosted: Wed May 08, 2013 3:04 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
Dankjewel Rolf en Jos!

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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive 1200px Grid voor CMSMS
PostPosted: Wed Sep 11, 2013 8:56 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
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-slag/links-naar-pagina-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/multiple-pages-in-one-with-jquery-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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Thu Nov 21, 2013 3:39 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Thu Nov 21, 2013 4:58 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7440
Location: The Netherlands
Hahh, LEUK!! :-)

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Dec 06, 2013 3:31 pm 
Offline
Forum Members
Forum Members

Joined: Tue Mar 18, 2008 11:43 pm
Posts: 107
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-cmsms-metatags-on-autopilot/


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Mon Dec 09, 2013 12:24 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
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.

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Tue Dec 17, 2013 1:42 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2867
Location: The Netherlands
Bookmark waard in ieder geval.

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

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Mon Jan 27, 2014 4:19 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Thu Jan 26, 2012 3:22 pm
Posts: 197
Location: Belgium
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Thu Jan 30, 2014 10:23 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
Ik heb je een PM gestuurd HarmO.

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Sun Feb 16, 2014 11:53 am 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Mon Feb 17, 2014 10:15 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 488
Thnx rodeto! Ik ben ook erg benieuwt wat HarmO mij gaat laten zien!

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 12:29 pm 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
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.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 47 posts ]  Go to page 1, 2, 3, 4  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
HostPapa CMS Made Simple hosting