Responsive design voor MediaWiki - Bewerkingsoverzicht

Bmulckhu: /* Grid instellingen */

2017-10-04T16:39:48Z

‎Grid instellingen

Bmulckhu: /* Grid instellingen */

2017-10-04T16:14:46Z

‎Grid instellingen

Bmulckhu: /* Voorbeeld toepassing responsive design met Tweeki-skin */

2017-10-04T16:13:37Z

‎Voorbeeld toepassing responsive design met Tweeki-skin

Bmulckhu op 4 okt 2017 om 16:10

2017-10-04T16:10:45Z

Bmulckhu: /* Voorbeeld toepassing responsive design met Tweeki-skin */

2017-10-04T15:17:32Z

‎Voorbeeld toepassing responsive design met Tweeki-skin

Bmulckhu: /* Grid instellingen */

2017-10-04T15:15:18Z

‎Grid instellingen

Bmulckhu op 4 okt 2017 om 15:10

2017-10-04T15:10:04Z

Bmulckhu: Eerste opzet

2017-10-04T13:50:00Z

Eerste opzet

Nieuwe pagina

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.

== Technieken voor het maken van een responsive design ==

=== Toepassing van Grids ===

Een website bestaat in veel gevallen uit een aantal verschillende elementen:

* Navigatie of menu's
* Kop of header
* Main body
* Zijpanelen of sidebars (links of rechts)
* Footer

Waar 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.

De plaats van de onderdelen ten opzichte van elkaar wordt afhankelijk gemaakt van de grootte van het scherm.

Een 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.

De grootte van de onderdelen en de onderlinge positie wordt (bijv. met CSS) gedefinieerd, afhankelijke van de grootte van het scherm.

=== Breakpoints ===

Browsers 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.

Veel ontwerpers gebruiken specifieke layouts voor tenminste:
* Smartphones - small
* Tablets - medium
* Desktops - large

Het punt waarop de layout overschakelt tussen small, medium en large heet een breakpoint.

De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries".

@@ Regel 54: / Regel 54: @@
 Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].
-Tweeki 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. Dit bij een vast breedte.
+Tweeki 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.
 De basisinstelling kan worden aangepast in de <code>LocalSettings.php</code>.

← Oudere versie		Versie van 4 okt 2017 om 16:14
Regel 55:		Regel 55:

	Tweeki 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. Dit bij een vast breedte.		Tweeki 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. Dit bij een vast breedte.
		+
		+	De basisinstelling kan worden aangepast in de <code>LocalSettings.php</code>.
		+
		+	Hieronder voorbeelden van instellingen.

	==== Geen zijpanelen - no sidebars ====		==== Geen zijpanelen - no sidebars ====

@@ Regel 98: / Regel 98: @@
   );
-:Inspringen aan beide zijden (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.
+:Inspringen (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.
 ==== Zijpanelen aan beide zijden - sidebars on both sides ====
@@ Regel 117: / Regel 117: @@
   );
-:Offsets and widths for the left sidebar, the main content and the right sidebar.
+:Inspringen en breedte voor beide panelen en hoofdinhoud

@@ Regel 53: / Regel 53: @@
 Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].
 ==== Geen zijpanelen - no sidebars ====
@@ Regel 64: / Regel 66: @@
   );
-:Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven. for the main content if no sidebars are shown.
+:Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven.
 ==== Zijpaneel links - left sidebar ====
@@ Regel 80: / Regel 82: @@
   );
-:Offsets and widths for the left sidebar and the main content.
+:Inspringen en breedte voor het linker zijpaneel en de hoofdinhoud.
 ==== Zijpaneel rechts - right sidebar ====
@@ Regel 96: / Regel 98: @@
   );
-:Offsets and widths for the main content and the right sidebar.
+:Inspringen aan beide zijden (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.
 ==== Zijpanelen aan beide zijden - sidebars on both sides ====
@@ Regel 116: / Regel 118: @@
 :Offsets and widths for the left sidebar, the main content and the right sidebar.

@@ Regel 37: / Regel 37: @@
 == Voorbeeld toepassing responsive design met Tweeki-skin ==
-De basis layout van de Tweeki-skin:
+De basis layout van de Tweeki-skin (voor het grote desktop-scherm - niet responsive weergegeven!):
 {| style="border-spacing:3px;border-collapse:separate; width:100%"

← Oudere versie		Versie van 4 okt 2017 om 15:15
Regel 53:		Regel 53:

	Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].		Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].
		+
		+	==== Geen zijpanelen - no sidebars ====
		+	<div class="container-fluid gridexample"><div class="row">
		+	<div class="col-sm-offset-1 col-sm-10 content">main content</div>
		+	</div></div>
		+
		+	$wgTweekiSkinGridNone = array(
		+	"mainoffset" => 1,
		+	"mainwidth" => 10
		+	);
		+
		+	:Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven. for the main content if no sidebars are shown.
		+
		+	==== Zijpaneel links - left sidebar ====
		+
		+	<div class="container-fluid gridexample"><div class="row">
		+	<div class="col-sm-3 content">left sidebar</div>
		+	<div class="col-sm-9 content">main content</div>
		+	</div></div>
		+
		+	$wgTweekiSkinGridLeft = array(
		+	"leftoffset" => 0,
		+	"leftwidth" => 3,
		+	"mainoffset" => 0,
		+	"mainwidth" => 9
		+	);
		+
		+	:Offsets and widths for the left sidebar and the main content.
		+
		+	==== Zijpaneel rechts - right sidebar ====
		+
		+	<div class="container-fluid gridexample"><div class="row">
		+	<div class="col-sm-9 content">main content</div>
		+	<div class="col-sm-3 content">right sidebar</div>
		+	</div></div>
		+
		+	$wgTweekiSkinGridRight = array(
		+	"mainoffset" => 0,
		+	"mainwidth" => 9,
		+	"rightoffset" => 0,
		+	"rightwidth" => 3
		+	);
		+
		+	:Offsets and widths for the main content and the right sidebar.
		+
		+	==== Zijpanelen aan beide zijden - sidebars on both sides ====
		+
		+	<div class="container-fluid gridexample"><div class="row">
		+	<div class="col-sm-2 content">left sidebar</div>
		+	<div class="col-sm-8 content">main content</div>
		+	<div class="col-sm-2 content">right sidebar</div>
		+	</div></div>
		+
		+	$wgTweekiSkinGridBoth = array(
		+	"leftoffset" => 0,
		+	"leftwidth" => 2,
		+	"mainoffset" => 0,
		+	"mainwidth" => 8,
		+	"rightoffset" => 0,
		+	"rightwidth" => 2
		+	);
		+
		+	:Offsets and widths for the left sidebar, the main content and the right sidebar.

← Oudere versie		Versie van 4 okt 2017 om 15:10
Regel 34:		Regel 34:

	De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries".		De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries".
		+
		+	== Voorbeeld toepassing responsive design met Tweeki-skin ==
		+
		+	De basis layout van de Tweeki-skin:
		+
		+	{\| style="border-spacing:3px;border-collapse:separate; width:100%"
		+	\| colspan="3" style="background-color:#eee;text-align:center;height:40px" \| '''navbar'''
		+	\|-
		+	\| rowspan="2" style="background-color:#eee;text-align:center" \| '''sidebar-<br>left'''
		+	\| style="background-color:#eee;text-align:center;height:30px" \| '''subnav'''
		+	\| rowspan="2" style="background-color:#eee;text-align:center" \| '''sidebar-<br>right'''
		+	\|-
		+	\| style="background-color:#f5f5f5;text-align:center;height:100px" \| '''main content''' <br>(including firstHeading)
		+	\|-
		+	\| colspan="3" style="background-color:#eee;text-align:center;height:40px" \| '''footer'''
		+	\|}
		+	=== Grid instellingen ===
		+
		+	Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].