MediaWiki API result

{
    "batchcomplete": "",
    "continue": {
        "gapcontinue": "Semantic_MediaWiki",
        "continue": "gapcontinue||"
    },
    "query": {
        "pages": {
            "51": {
                "pageid": 51,
                "ns": 0,
                "title": "Responsive design voor MediaWiki",
                "revisions": [
                    {
                        "contentformat": "text/x-wiki",
                        "contentmodel": "wikitext",
                        "*": "Door het maken van een '''Responsive Design''' wordt de layout van de website flexibel aangepast aan de grootte en resolutie van het scherm van de bezoeker van de website. \n\n== Technieken voor het maken van een responsive design ==\n\n=== Toepassing van Grids ===\n\nEen website bestaat in veel gevallen uit een aantal verschillende elementen:\n\n* Navigatie of menu's\n* Kop of header\n* Main body\n* Zijpanelen of sidebars (links of rechts)\n* Footer\n\nWaar het \"vroeger\" de gewoonte was deze onderdelen een vaste plaats t.o.v. van elkaar te geven (meestal in tabel-vorm), komen deze onderdelen nu in een \"grid\" (rooster) te staan.\n\n\nDe plaats van de onderdelen ten opzichte van elkaar wordt afhankelijk gemaakt van de grootte van het scherm.\n\nEen grid is meestal onderdeel van de MediaWiki-skin. Zo gebruikt Foreground het grid van [https://foundation.zurb.com/ Foundation] en Tweeki de [[Bootstrap_voor_MediaWiki|bootstrap]]-grid.\n\nDe grootte van de onderdelen en de onderlinge positie wordt (bijv. met CSS) gedefinieerd, afhankelijke van de grootte van het scherm.\n\n=== Breakpoints ===\n\nBrowsers hebben op verschillende apparaten een in grootte uiteenlopende ''viewport'' (het zichtbare deel van de website). Wanneer de viewport kleiner wordt, zoals op smartphones, dan kan de layout niet meer hetzelfde zijn als bij een grote viewport van een browser op een desktop. \n\nVeel ontwerpers gebruiken specifieke layouts voor tenminste:\n* Smartphones - small\n* Tablets - medium\n* Desktops - large\n\nHet punt waarop de layout overschakelt tussen small, medium en large heet een breakpoint.\n\nDe browser \"weet\" hoe groot het scherm is d.m.v. het gebruik van \"media-queries\".\n\n== Voorbeeld toepassing responsive design met Tweeki-skin ==\n\nDe basis layout van de Tweeki-skin (voor het grote desktop-scherm - niet responsive weergegeven!):\n\n{| style=\"border-spacing:3px;border-collapse:separate; width:100%\"\n| colspan=\"3\" style=\"background-color:#eee;text-align:center;height:40px\" | '''navbar'''\n|-\n| rowspan=\"2\" style=\"background-color:#eee;text-align:center\" | '''sidebar-<br>left'''\n| style=\"background-color:#eee;text-align:center;height:30px\" | '''subnav'''\n| rowspan=\"2\" style=\"background-color:#eee;text-align:center\" | '''sidebar-<br>right'''\n|-\n| style=\"background-color:#f5f5f5;text-align:center;height:100px\" | '''main content''' <br>(including firstHeading)\n|-\n| colspan=\"3\" style=\"background-color:#eee;text-align:center;height:40px\" | '''footer'''\n|}\n=== Grid instellingen ===\n\nDeze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].\n\nTweeki gebruikt een grid bestaande uit 12 kolommen, zoals bekend van Bootstrap. Als 'default' is een indeling van 10 kolommen voor de hoofdinhoud (main-content) en 2 kolommen voor een rechter zijpaneel (right sidebar) ingesteld. \n\nDit bij een vaste of \"fluid\" breedte, zoals ingesteld in [[MediaWiki:Tweeki-container-class]] (<code>container</code> of <code>container-fluid</code>). \n\nDe basisinstelling kan worden aangepast in de <code>LocalSettings.php</code>.\n\nHieronder voorbeelden van instellingen.\n\n==== Geen zijpanelen - no sidebars ====\n<div class=\"container-fluid gridexample\"><div class=\"row\">\n<div class=\"col-sm-offset-1 col-sm-10 content\">main content</div>\n</div></div>\n\n $wgTweekiSkinGridNone = array( \n  \"mainoffset\" => 1, \n  \"mainwidth\" => 10 \n ); \n\n:Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven. \n\n==== Zijpaneel links - left sidebar ====\n\n<div class=\"container-fluid gridexample\"><div class=\"row\">\n<div class=\"col-sm-3 content\">left sidebar</div>\n<div class=\"col-sm-9 content\">main content</div>\n</div></div>\n\n $wgTweekiSkinGridLeft = array( \n  \"leftoffset\" => 0, \n  \"leftwidth\" => 3, \n  \"mainoffset\" => 0, \n  \"mainwidth\" => 9 \n );\n\n:Inspringen en breedte voor het linker zijpaneel en de hoofdinhoud.\n\n==== Zijpaneel rechts - right sidebar ====\n\n<div class=\"container-fluid gridexample\"><div class=\"row\">\n<div class=\"col-sm-9 content\">main content</div>\n<div class=\"col-sm-3 content\">right sidebar</div>\n</div></div>\n\n $wgTweekiSkinGridRight = array( \n  \"mainoffset\" => 0, \n  \"mainwidth\" => 9, \n  \"rightoffset\" => 0, \n  \"rightwidth\" => 3 \n );\n\n:Inspringen (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.\n\n==== Zijpanelen aan beide zijden - sidebars on both sides ====\n\n<div class=\"container-fluid gridexample\"><div class=\"row\">\n<div class=\"col-sm-2 content\">left sidebar</div>\n<div class=\"col-sm-8 content\">main content</div>\n<div class=\"col-sm-2 content\">right sidebar</div>\n</div></div>\n\n $wgTweekiSkinGridBoth = array( \n  \"leftoffset\" => 0, \n  \"leftwidth\" => 2, \n  \"mainoffset\" => 0, \n  \"mainwidth\" => 8, \n  \"rightoffset\" => 0, \n  \"rightwidth\" => 2 \n );\n\n:Inspringen en breedte voor beide panelen en hoofdinhoud"
                    }
                ]
            },
            "103": {
                "pageid": 103,
                "ns": 0,
                "title": "Responsive multi-column list",
                "revisions": [
                    {
                        "contentformat": "text/x-wiki",
                        "contentmodel": "wikitext",
                        "*": "Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.\n\n== Standaard oplossing - beperkt \"responsive\" ==\n\nDe standaard oplossing om een multi-column lijst te maken is met behulp van CSS/Style elementen <code>column-count</code>. Op deze manier is het aantal kolommen constant en zal alleen de breedte van de kolommen zich aanpassen aan de grootte van het scherm. Op kleine schermen leidt dit snel tot problemen.\n\nVoorbeeld:\n\n<pre>\n<div style=\"column-count:4;-moz-column-count:4;-webkit-column-count:4\">\n*item1\n*item2\n...\n*item16\n</div>\n</pre>\n\nResultaat:\n\n<div style=\"column-count:4;-moz-column-count:4;-webkit-column-count:4\">\n*item1\n*item2\n*item3\n*item4\n*item5\n*item6\n*item7\n*item8\n*item9\n*item10\n*item11\n*item12\n*item13\n*item14\n*item15\n*item16</div>\n\n\n== Oplossing met Bootstrap ==\n\nWanneer [[Bootstrap voor MediaWiki|Bootstrap]] beschikbaar is, kan een lijst met behulp van het \"grid\" responsive worden weergegeven:\n\n<pre><ul class=\"list-group row\">\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\" style=\"margin: 0; padding: 0; border: 0;\">Cell_1</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_2</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_3</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_4</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_5</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_6</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_7</li>\n</ul></pre>\n\nNB: De sorteer-richting bij deze oplossing is \"per rij\" oftewel \"van links naar rechts\".\n\nHet resultaat ziet er zo uit: \n\n<ul class=\"list-group row\">\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\" style=\"margin: 0; padding: 0; border: 0;\">Cell_1</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_2</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_3</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_4</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_5</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_6</li>\n    <li class=\"list-group-item col-xs-6 col-sm-4 col-md-3\"  style=\"margin: 0; padding: 0; border: 0;>Cell_7</li>\n</ul>\n\n\nBron: [https://stackoverflow.com/questions/19836567/bootstrap-3-multi-column-within-a-single-ul-not-floating-properly Voorbeeld]\n\n== Pure CSS ==\n\nOp basis van alleen CSS3 werkt deze oplossing met toevoeging van een enkele class:\n\n<pre>\n/* Responsive multi column list -  https://codepen.io/ThiefMaster/pen/afGbB */\n/*CSS3 multiple columns.*/\n/* Get em size for colums: 184/16 */   \n.columns\n{   \n    -moz-column-width: 11.5em; /* Firefox */\n    -webkit-column-width: 11.5em; /* webkit, Safari, Chrome */\n    column-width: 11.5em;\n}\n/*remove standard list and bullet formatting from ul*/\n.columns ul\n{\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n/* correct webkit/chrome uneven margin on the first column*/\n.columns ul li:first-child\n{\n    margin-top:0px;\n}\n</pre> \n\nHet voordeel van deze methode is dat hij goed werkt in combinatie met de standaard wikitekst voor lijsten en standaard de sorteerrichting van de kolom aanhoudt.\n\n<pre>\n<div class=\"columns\" style=\"width:100%;\">\n*item 1\n*item 2\n*item 3\n* [[Hoofdpagina|linked item 4]]\n* [[Hoofdpagina|linked item 5]]\n* [[Hoofdpagina|linked item 6]]\n</div>\n</pre>\n\nResultaat: \n<div class=\"columns\" style=\"width:100%;\">\n*item 1\n*item 2\n*item 3\n* [[Hoofdpagina|linked item 4]]\n* [[Hoofdpagina|linked item 5]]\n* [[Hoofdpagina|linked item 6]]\n</div>\n\n\nNatuurlijk kan ook de HTML-versie worden gebruikt:\n\n<div class=\"columns\" style=\"width:100%;\">\n<ul>\n<li>William Brown</li>\n<li>Miss Havisham</li>\n<li>Rupert Campbell-Black</li>\n<li>Julien Sorel</li>\n<li>Sherlock Holmes</li>\n<li>Nigel Molesworth</li>\n<li>Harriet M Welsch</li>\n<li>Oskar Schell</li>\n<li>Elinor Dashwood</li>\n</ul>         \n</div>\n\n\nBron : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld]"
                    }
                ]
            }
        }
    }
}