Samenvatting
Terwijl je in de code-editor typt, verschijnt er een lijst met aanvullingen. Die lijst heet codesuggesties, en hij bevat de elementen, de schermgroottes en de gegevens van je eigen website.
Welke soorten je krijgt, hangt af van het tabblad waarin je staat. Een tabblad voor opmaak geeft andere suggesties dan een tabblad voor HTML of voor JavaScript.
Er zijn negen soorten. Je hoeft er niets voor aan te zetten; de lijst komt vanzelf zodra je begint te typen.
Wanneer gebruik je dit?
Je gebruikt de lijst om niet te hoeven onthouden hoe iets in dit platform heet. De namen van je elementen, je schermgroottes en je variabelen staan erin, met hun huidige waarde erbij.
De lijst is ook een controle. Staat een naam er niet in, dan kent het platform hem niet. Je moet die opmaak dan zelf volledig uitschrijven.
Voor een element is de suggestie bovendien de snelste weg. Kies je de suggestie in een tabblad voor HTML, dan komt de hele standaardopbouw van dat element in je code.
Hoe werkt dit in Mach3Blocks?
De lijst hoort bij het tabblad dat je open hebt. Het platform stelt hem samen op het moment dat je dat tabblad opent, met de gegevens van de website waarin je werkt.
Elke suggestie voegt een stuk tekst in. Bij sommige soorten zet de suggestie je cursor meteen op de plek waar je verder typt.
Een korte afkorting klapt met Tab uit naar volledige code. Dat werkt in een tabblad voor HTML en in een tabblad voor opmaak.
Waar de lijst nog meer werkt
Dezelfde lijst zit achter de schrijfvlakken van Code-instellingen. In de tabbladen daar krijg je dus ook suggesties, met een enkele soort erbij die alleen daar bestaat.
Hoe die tabbladen werken, lees je in Code-instellingen. Dit artikel gaat er niet over.
Overzichtstabel met opties, waarden en standaard
Negen soorten, verdeeld over tien regels: de elementsuggestie komt in drie vormen.
| Soort | Wat je in de lijst ziet | Wat de suggestie invoegt | In welk tabblad |
|---|---|---|---|
| Element | Element: heading-1, Header heading | De standaardopbouw van dat element, of zijn standaardopmaak | HTML en LESS |
| Element, structuur | Element: header, Header | Een omhullende tag met de klasse van het blok erop | alleen HTML |
| Element, blok | Element: block, Blok | De selector van het blok zelf, met een leeg regelblok erin | alleen LESS, en alleen bij een blok |
| Schermgrootte | @media: Tablet | Een volledige regel met de juiste breedtes erin | alleen LESS |
| Stijlvariabele | @font-family-heading: Allura | De naam van de variabele, zonder de waarde | alleen LESS |
| Variabele | Variabele: 3, Openingstijden | Een plaatshouder met dat nummer en die naam | HTML en JavaScript |
| Collectieveld | Collectieveld: 12, Prijs | Een plaatshouder met dat nummer en die naam | HTML en JavaScript |
| Eigenschap | Pagina: Meta titel | Een plaatshouder voor die waarde. De suggestie begint met het object: Website, en Pagina als je op een pagina werkt. Bij een bibliotheekblok of een maatwerkblok komen Pagina, Collectie en Collectie-item erbij | alle tabbladen |
| Bibliotheek | require: Swiper 11.0.4 | De regel die die bibliotheek voor je inlaadt | alleen JavaScript |
| Editormarkering | Editor ignore start | De bijbehorende regel commentaar | LESS en JavaScript |
Een tabblad voor HTML geeft 95 elementsuggesties: 92 elementen plus de drie structuurtags. Een tabblad voor opmaak geeft er 92, en bij een blok komt de blokselector erbij.
De collectievelden verschijnen alleen bij een blok dat aan een collectie is gekoppeld. Dan staan de velden van die ene collectie in de lijst.
De elf schermgroottes
| Suggestie | Welke breedte hij invoegt |
|---|---|
| @media: Telefoon staand | (max-width: 479px) |
| @media: Telefoon liggend | (min-width: 480px) and (max-width: 767px) |
| @media: Tablet | (min-width: 768px) and (max-width: 1023px) |
| @media: Laptop | (min-width: 1024px) and (max-width: 1279px) |
| @media: Desktop | (min-width: 1280px) |
| @media: ≥ Telefoon liggend | (min-width: 480px) |
| @media: ≥ Tablet | (min-width: 768px) |
| @media: ≥ Laptop | (min-width: 1024px) |
| @media: ≤ Telefoon liggend | (max-width: 767px) |
| @media: ≤ Tablet | (max-width: 1023px) |
| @media: ≤ Laptop | (max-width: 1279px) |
De stijlvariabelen van je thema
De stijlvariabelen komen uit het thema van je website. Het aantal verschilt daarom per website; op een gemeten testwebsite waren het er 71.
| Groep | Aantal | Voorbeeld |
|---|---|---|
| Lettertype en gewicht | 6 | @font-family-heading: Allura |
| Regelhoogte en tekengrootte per element | 30 | @font-size-heading-1: 36px |
| Correctie op de tekengrootte per kop | 8 | @heading-1-font-size-adjustment: 0px |
| Kleuren | 22 | @color-primary-500: #d6ab92 |
| Ruimtes en breedte | 5 | @container-width: 1200px |
Van je hoofdkleur en je accentkleur bestaan maar drie tinten. De grijstinten hebben een veel langere reeks.
| Reeks | Welke tinten er zijn |
|---|---|
| @color-primary | 400, 500 en 600 |
| @color-secondary | 400, 500 en 600 |
| @color-success | 500 en 700 |
| @color-danger | 500 en 700 |
| @color-neutral | 050 tot en met 900, in tien stappen |
| Los | @color-white en @color-black |
De negen bibliotheken
| Suggestie | Wat de regel inlaadt |
|---|---|
| require: Before After 1.0.1 | Een vergelijking tussen twee afbeeldingen |
| require: Dolottie 2.7.9 | Animaties in het lottie-formaat |
| require: Gsap 3.9.1 | Animaties, oudste versie |
| require: Gsap 3.11.3 | Animaties, tussenversie |
| require: Gsap 3.13.0 | Animaties, nieuwste versie |
| require: Lenis 1.0.42 | Vloeiend scrollen |
| require: Swiper 11.0.4 | Een carrousel |
| require: Tiny Slider 2.9.4 | Een lichtere carrousel |
| require: Tippy 6.3.7 | Tooltips |
De vier editormarkeringen
Met deze vier regels bepaal je waar een stuk code wel en niet meetelt. Je zet ze om je code heen, één regel ervoor en één erna.
| Markering | Waar de code tussen die regels werkt |
|---|---|
| Editor ignore start, Editor ignore end | Wel op je gepubliceerde website, niet in het canvas |
| Editor only start, Editor only end | Wel in het canvas, niet op je gepubliceerde website |
Aanbevolen instelling
Neem voor een element de suggestie in plaats van een zelfbedachte klassenaam. De editor herkent alleen de elementen die in de lijst staan, en daarbuiten kun je een element niet meer met de gewone velden bewerken.
Schrijf je opmaak voor een blok, kies dan eerst de suggestie voor de blokselector. Alles wat je binnen dat regelblok zet, raakt alleen dat ene blok.
Gebruik de markering voor de editor zodra een animatie of een vaste positie je werk in de weg zit. Zet die code tussen de twee regels die hem in het canvas overslaan.
Voorwaarden en rechten
Er is geen apart recht voor deze lijst. Wie een codepop-in kan openen, krijgt de suggesties erbij.
| Waarvoor | Welk recht |
|---|---|
| Een codepop-in openen en de lijst gebruiken | Code toegang |
| De schrijfvlakken van de code-instellingen gebruiken | Code-instellingen |
Gevolgen bij verkeerd instellen
Niet elke suggestie werkt in elk tabblad, ook al staat hij er wel in. Dat geldt voor de eigenschappen van elk object in de lijst.
Kies je twee versies van dezelfde bibliotheek, dan laadt je pagina ze allebei. Het platform kijkt naar de naam met de versie erachter, en ziet twee verschillende bestanden.
Schrijf je een variabele die niet bestaat, dan lukt het opslaan niet. Dat overkomt je het snelst met een tint van je hoofdkleur die er niet is.
De regel die een bibliotheek inlaadt, verdwijnt bij het publiceren uit je code. Het bestand wordt wel geladen; dat is de bedoeling en geen fout.