HTML/CSS Responsive HTML5/CSS3 Grid

HTML/CSS Responsive HTML5/CSS3 Grid

Webdesign | 28-02-2018 | Pascal Merks | Reacties


GRID 1200 is een responsive grid geschreven in HTML5 en CSS3 en maakt gebruik van 1 tot maximaal 6 kolommen. GRID 1200 is gemaakt voor webontwikkelaars die een eenvoudig toepasbaar responsive grid nodig hebben met voor gestylde HTML elementen in CSS. GRID 1200 werkt goed met 1200px lay-outs, maar laat zich gemakkelijk aanpassen naar andere formaten. GRID 1200 maakt gebruik van 2 breekpunten op 800px en 600px om de website te schalen. Dankzij de (drijvende) kolommen laat GRID 1200 zich goed schalen op desktops, tablets en smartphones. GRID 1200 is compatible met CMS Made Simple en is eenvoudig in dit CMS te plaatsen dankzij het meegeleverde Menu sjabloon voor CMS Made Simple 1.11+ en het Navigatie sjabloon voor CMS Made Simple 2.0+.

 

Let op: Het is niet een Grid alleen voor CMSMS ik laat alleen zien hier hoe je hem in CMSMS kan gebruiken. Het is een universeel grid in HTML5/CSS3 geschreven.

 

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

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

PSD bestand: http://grid.pmkmedia.nl/start/tools/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/start/tools/cmsms-menu-template.txt (Het menu sjabloon voor CMSMS 1.11+.)

Navigatie Sjabloon: http://grid.pmkmedia.nl/start/tools/cmsms-navigator-template.txt (Het menu sjabloon voor CMSMS 2.0+.)

 

Wat zit er allemaal in:

HTML bestand:

In het html bestand heb ik alles ingebouwd waar van ik vind wat nodig en handig is.

Zo zit er een deel in voor de favicon, apple touch iconen en een deel voor de start balk in windows 7 en tiles in windows 8/10.

 

Dat is dit deel:

Code:

<link rel="icon" href="images/icons/favicon.png">
    
<link rel="apple-touch-icon" href="images/icons/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/icons/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/icons/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/icons/touch-icon-ipad-retina.png">
    
<meta name="application-name" content="&nbsp;">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="images/icons/tile-tiny.png">
<meta name="msapplication-square150x150logo" content="images/icons/tile-square.png">
<meta name="msapplication-wide310x150logo" content="images/icons/tile-wide.png">
<meta name="msapplication-square310x310logo" content="images/icons/tile-large.png">

 

Dit deel inclusief het iconen deel kan je verplaatsten naar de "Algemene metadata:" en vervolgens vervangen door de {metadata} smarty een aanpassen naar de gegevens van jou website:

Code:

<meta name="description" content="Awesome Description Here">
<meta name="keywords" content="keyword, keyword, keyword">

<meta name="generator" content="Your Company">
<meta name="author" content="www.your-website.com">

<meta name="robots" content="index, follow">

 

Het <title> gedeelte kan je verruilen door deze regel:

Code:

<title>{title} - {sitename}</title>

 

het CSS gedeelte en wat er in de bestanden staat kan je natuurlijk kopiëren naar stylesheets in CMSMS en de regels vervangen met:

Code:

{cms_stylesheet}

 

CSS basis bestanden:

grid.css (Het grid css deze hoef je niet aan te passen deze is voor het schallen van de website en hier staan de belangrijkste css elementen in om een website goed te laten werken.)

style.css (Hier kan je alle elementen in stylen. Er staan al wat voorbeelden in. Tevens staat er ook een deel in voor retina afbeeldingen. Een retina afbeelding is 2x zo groot als het origineel en sla je dan op met @2x achter de benaming dus bv de normale afbeelding is back.jpg de retina versie is dan back@2x.jpg deze schakelt dan automatisch over bij een retina display.)

menu.css (Hierin style je het menu. Als de resolutie onder de 800px komt schakelt hij over in een uitklap menu zo blijft het menu netjes ook als het scherm kleiner word. Het menu kan je geheel naar wens stylen. Het menu heeft 3 sublevels die je overigens niet allemaal hoeft te gebruiken natuurlijk.)

 

Welke scripts zijn er:

IEMobile 10 viewport fix (Viewport fix voor Internet Explorer 10 Mobile.)
Latest jQuery (De laatst versie van JQuery mini mocht je die nodig hebben.)

 

CSS Elementen:

Ik heb zo veel mogelijk wat ik kon bedenken ingebouwd wat moet kunnen schallen.

Afbeeldingen en Tabellen schalen automatisch.

Videos van video websites bv youtube kan je in een <div> insluiten met als class "video" zo schaalt de video ook mee. (je kan eventueel in TinyMCE een CSS-style toevoegen met bv "responsive-video=video" (zonder de haakjes) zo zodat als je een video er in zet en die deze style geeft deze mee schaalt)

Formulier elementen schalen ook automatisch. Op de elements.html pagina zie je een voorbeeld van een contact formulier.

 

Hoe werkt het grid:

GRID 1200 is 1200 pixels breed ik heb voor deze breedte gekozen omdat dit anno 2014 het meest gangbare formaat is.

Hier binnen kan je gebruik maken van 1 tot 6 kolommen. Elke groep kolommen doen je in te sluiten in een "section" div. Dit heb ik zo gedaan omdat anders als er in de volgende groep een kleinere kolom zit die nog onder een kolom van de vorige "section" past en deze de neiging heeft daar heen te schuiven. Dit is niet de bedoeling en door het in een section te doen blijft alles netjes staan.

Als de resolutie onder de 800 pixels komt schalen de kolommen onder elkaar naar 1 kolom. 2 en 4 kolommen schalen naar 2 kolommen.

Als de resolutie onder de 600 pixels komt schallen alle kolommen naar 1 kolom tot minimaal 300 pixels (dit om te voorkomen dat het ontwerp niet raar gaat doen en alle content of lelijk schaalt of buiten de kolommen gaat zitten.)

 

Voorbeeld van een section:

Code:

<div class="section">
<div class="four-column"><p>4 column</p></div>
<div class="four-column"><p>4 column</p></div>
<div class="two-fourth-column"><p>2-4 column</p></div>
</div>

 

Om toch een kolom op te splitsen kan je in een kolom een zogenaamde split-column div geven.

 

Voorbeeld:

Code:

<div class="section">
<div class="four-column">
<div class="split-column"><p>4 column</p></div>
<div class="split-column"><p>4 column</p></div>
</div>
<div class="four-column"><p>4 column</p></div>
<div class="two-fourth-column"><p>2-4 column</p></div>
</div>

 

Zo splits je een kolom in 2 delen.

In het voorbeeld heb ik alle combinaties qua kolommen geplaatst. Zo kan je makkelijk een "section" met de kolommen die je nodig hebt kopiëren en plakken. En mocht je een kolom willen splitsen kan je het doen zo als ik net liet zien.

Dit alles sluit je in in een  div met als class "content". Voor dat je een content div sluit dus voor de </div> tag plaats je <div class="section"><!-- clear section --></div> dit om alles netjes af te sluiten. Mocht je de content div in een <header>, <main> of een <footer> element plaatsen dan plaats je <div class="section"><!-- clear section --></div> voor het element sluit.

Het voorbeeld menu kan je weg halen en vervangen door {menu} of waar je het menu wilt en de rest van de smarty {news} {content} etc.. kan je gewoon er in gebruiken waar je wilt. Je mag ook gewoon alles aanpassen.

Ik hoop dat jullie hier een beetje wijzer uit worden. Ik denk dat mensen met wat html en css kennis er wel uit komen. Je mag alles aanpassen en slopen naar jou wens. Mochten er vragen zijn stel ze! Mochten er verbeter punten zijn vertel ze! Ik wil graag beter worden in css en html en hoor graag jullie feedback.

 

Voorbeeld video:

 

Changelog:

Upgrade naar versie 4.0.1
Wat is er veranderd in versie 4.0.1:

1. mobile menu vernieuwd deze klapt nu op mobiel in.
2. menu en navigatie sjabloon cmsms aangepast voor nieuwe menu
3. basis grid bestand toegevoegd
4. scripts geupdate

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-4.0.1.zip

Upgrade naar versie 3.3

Wat is er veranderd in versie 3.3:

1. Include fonts

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-3.3.zip

Upgrade naar versie 3.2

Wat is er veranderd in versie 3.2:

1. Snel naar boven scrollen button
2. Youtube en Video header opties

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-3.2.zip

Upgrade naar versie 3.1

Wat is er veranderd in versie 3.1:

1. Tabellen schalen verbeterd
2. Nieuwe formulier elementien toegevoegd
3. Video header aangepast voor eigen videos.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-3.1.zip

Upgrade naar versie 3.0

Wat is er veranderd in versie 3.0:

1. 3 header opties toegevoegd (parallax, youtube en normaal)
2. CSS erzien en prefixes toegepast voor verschillende browsers
3. Grid toegevoegd aan demo pagina
4. Oude onderdelen verwijderd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-3.0.zip

Upgrade naar versie 2.7
Wat is er veranderd in versie 2.7:

1. CSS versimpeld
2. Geen parallax backgrounds
3. Zoekbalk demo voor op een pagina toegevoegd

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.7.zip

Upgrade naar versie 2.6.4

Wat is er veranderd in versie 2.6.4:

1. Andere zoekbalk optie toegevoegd bij elementen.
2. mobiel/desktop css aangepast

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.6.4.zip

Upgrade naar versie 2.6.3

Wat is er veranderd in versie 2.6.3:

1. Javacripts verplaatst uit HTML head naar js bestand.
2. Viewport fix voor oude windows phones verwijderd uit de demo.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.6.3.zip

Upgrade naar versie 2.6.2

Wat is er veranderd in versie 2.6.2:

1. Javacript toegevoegd om de website te verversen als hij onder of boven de 1200 pixels breed komt. Dit om te voorkomen dat de javascripts hun werk niet goed uitvoeren bij het herschalen.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.6.2.zip

Upgrade naar versie 2.6.1

Wat is er veranderd in versie 2.6.1:

1. Frontend Zoeken css toegevoegd.
2. Kleine verbeteringen in css/html.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.6.1.zip

Upgrade naar versie 2.6

Wat is er veranderd in versie 2.6:

1. Nieuwe landings demo met voorbeeld elementen.
2. Start, CSS en Javascript menu versies in 1 download.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.6.zip

Upgrade naar versie 2.5.1

Wat is er veranderd in versie 2.5.1:

1. Navigator sjabloon voor CMSMS 2.0+ toegevoegd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.5.1.zip of http://grid.pmkmedia.nl/GRID-1200-2.5.1-java.zip

Upgrade naar versie 2.5

Wat is er veranderd in versie 2.5:

1. FormBuilder contact formulier css + demo toegevoegd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.5.zip of http://grid.pmkmedia.nl/GRID-1200-2.5-java.zip

Upgrade naar versie 2.4

Wat is er veranderd in versie 2.4:

1. Base url in html geplaatst. (Uitgeschakeld. Kan ingeschakeld worden voor cmsms.)
2. Menu css fout verwijderd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.4.zip of http://grid.pmkmedia.nl/GRID-1200-2.4-java.zip

Upgrade naar versie 2.3

Wat is er veranderd in versie 2.3:

1. Javascript menu versie weer toegevoegd voor extreem lange menus.
2. Grid css overzichtelijker gemaakt.
3. Latest zip file aangemaakt zodat ja altijd de laatste versie download.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.3.zip of http://grid.pmkmedia.nl/GRID-1200-2.3-java.zip

Upgrade naar versie 2.2.3
Wat is er veranderd in versie 2.2.3:

1. Extra menu breekpunt op 960px om te voorkomen dat een lang menu de links onder elkaar zet.
2. Submenu afstanden aangepast.
3. CSS line-height ingekort.
4. Download knop toegevoegd om de zip direct te downloaden.
5. Nieuwe sample toegevoegd met een verborgen header na scrolllen.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.2.3.zip

Upgrade naar versie 2.1
Wat is er veranderd in versie 2.1:

1. Sticky Sidebar links of rechts toegevoegd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.1.zip

Upgrade naar versie 2.0
Wat is er veranderd in versie 2.0:

1. Fixed header demo met aparte css voor wie een fixed header wil.
2. Versie 2.0 om het nieuwe jaar fris met een rond getal te starten!

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-2.0.zip

Upgrade naar versie 1.8
Wat is er veranderd in versie 1.8:

1. Favicon, apple touch icons en windows tiles geupdate + voorbeeld bestanden.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.8.zip

Upgrade naar versie 1.7.2
Wat is er veranderd in versie 1.7.2:

1. Verbetering aan tabellen css.
2. Verbetering aan formulieren css.
3. Google Fonts terug geplaatst naar html in css geeft problemen in cmsms als style.css en menu.css media="handheld, projection, screen" krijgen.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.7.2.zip


Upgrade naar versie 1.7.1
Wat is er veranderd in versie 1.7.1:

1. Lichte aanvulling aan grid.css.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.7.1.zip


Upgrade naar versie 1.7
Wat is er veranderd in versie 1.7:

1. Lichte aanvulling aan Form demo.
3. iOS problemen met formulieren gefixt in grid.css.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.7.zip


Upgrade naar versie 1.6.1
Wat is er veranderd in versie 1.6.1:

1. Lichte aanpassing aan Form demo.
2. Google Fonts verplaatst naar style.css.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.6.1.zip


Upgrade naar versie 1.6
Wat is er veranderd in versie 1.6:

1. grid.css herzien en verbeterd.
2. style.css verbeterd en aangevuld met zoveel mogelijk style elementen als voorbeeld. Zo kan je makkelijker  je website stylen naar wens.
3. <header>, <main> en <footer> secties aangemaakt. Zo kan je makkelijk onderscheidt maken wat nou in de header, main of in de footer moet komen.
4. Sticky footer. De <footer> sectie blijft onderaan de pagina plakken. Dat ziet er mooier uit op grote schermen.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.6.zip


Upgrade naar versie 1.5.1
Wat is er veranderd in versie 1.5.1:

1. Aanpassing in grid.css voor betere weergaven <form> elementen.
2. Aanpassing in style.css voor style <form> elementen.
3. contactform.html toegevoegd met een formulier voorbeeld.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.5.1.zip


Upgrade naar versie 1.5
Wat is er veranderd in versie 1.5:

1. Aanpassing in style.css voor style elementen.
2. Kleine aanpassing aan grid.css, split-column class verbeterd.

Link naar zip: http://grid.pmkmedia.nl/GRID-1200-1.5.zip


Upgrade naar versie 1.4
Wat is er veranderd in versie 1.4:

1. Nieuwe jQuery, Retina versies.
2. html5shiv.js en css3-mediaqueries.js voor oudere browsers eruit gehaald. (de browser moet HTML5/CSS3 ondersteunen)
3. Menu is nu CSS en geen javascript meer.
4. Kleine aanpassing aan responsive.css, split-column class heeft geen split-column-close meer nodig en een overflow:hidden voor de main container.

Link naar zip: http://grid.pmkmedia.nl/grid-1200-1.4.zip


Upgrade naar versie 1.3
Wat is er veranderd in versie 1.3:

1. Nieuwe jQuery, Retina, html5shiv.js versies.
2. Menu staat nu los van het grid.
3. Kleine aanpassing aan responsive.css menu deel verplaatst naar menu.css en de manier van afbeelding weergaven. (dankzij tip van rodeto)
4. Currentpage css toegevoegt aan menu.css + menu sjabloon aangepast zodat je ziet op welke pagina je bent via de currentpage.
5. menu.css en het menu licht aangepast.

Link naar zip: http://grid.pmkmedia.nl/grid-1200-1.3.zip

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets