@deidee/deflex
Advanced tools
Stramien voor stijlbladen van de idee. Op basis van het flexboxmodel.
deFlex kent maar liefst zeven breekpunten (die niet allemaal te hoeven worden gebruikt):
| aanduiding | breekpunt | vanaf |
|---|---|---|
xs | extra klein (standaard) | 0 |
s | klein | 300px |
m | gemiddeld | 600px |
l | groot | 900px |
xl | extra groot | 1200px |
xxl | extra extra groot | 1500px |
3xl | grootst | 1800px |
De aanduiding xs wordt alleen in de Sass-broncode gebruikt. In de uiteindelijke HTML en CSS wordt de aanduiding voor het kleinste breekpunt (dus vanaf 0) weggelaten.
Het stijlblad kan eenvoudig aan een webpagina worden toegekend door de volgende regel toe te voegen aan de <head>:
<link rel="stylesheet" href="https://hetcdn.nl/deidee/css/deflex.min.css">
deFlex kan worden gebruikt door specifieke classes toe te voegen aan elementen binnen de body van een webpagina.
Een container is het buitenste deel van deFlex. De breedte ervan wordt (deels) bepaald door het breekpunt.
| breekpunt | maximale breedte |
|---|---|
≤ xs | 100% |
m | 576px |
l | 864px |
≥ xl | 1176px |
Een container wordt gecreërd door container als class aan een blokelement toe te voegen. Dit is vaak een div, maar dat hoeft niet.
Een rij kan worden gecreërd door row als class toe te voegen aan een blokelement. In de praktijk is dit vaak een div, maar dat hoeft niet. Een rij wordt altijd direct in een container óf in een kolom geplaatst:
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col"></div>
</div>
</div>
</div>
</div>
Kolommen zijn waar de magie van deFlex huist. Net als met containers en met rijen worden kolommen gecreërd door een class aan een blokelement toe te voegen. Kolommen zijn er echter in vele (lees: honderden) smaken.
Voor elke teller van alle noemers van 1 tot en met 16 (met een unieke uitkomst) is er een kolom gedefinieerd en dat ook nog eens voor alle breekpunten. Zo kun je met deFlex bijvoorbeeld zeggen:
Vanaf breekpunt
l(900 pixels), wil ik 9 uit 16 kolommen (56.25% breedte).
De class voor dit specifieke voorbeeld is col-l-9o16. Hierin staat col voor column (oftewel kolom), is l de aanduiding van het breekpunt, is 9 de teller, staat o voor of (oftewel van) en is 16 de noemer.
Een dergelijke class leest dus als:
kolom streepje breekpunt streepje teller van noemer.
Om bytes te besparen zijn alleen de meest eenvoudige breuken gebruikt om de kolommen te definiëren. Zo zijn col-2o4 en col-8o16 bijvoorbeeld niet beschikbaar omdat deze dezelfde uitkomst als col-1o2 (namelijk 50%) zouden hebben.
Zoals eerder aangegeven wordt de aanduiding van het breekpunt bij het kleinste breekpunt (xs) tevens weggelaten. Hierdoor is col-1o2 een valide class die werkt op alle resoluties.
deFlex kan worden geïntegreerd in een ander stijlblad met behulp van gulp-sass.
npm i @deidee/deflex -s
@import "../node_modules/@deidee/deflex/scss/deflex";
Om wijzigingen aan te brengen in de broncode kan de repository worden gecloned en vervolgens de juiste pakketten worden geïnstalleerd. Dat gebeurt als volgt:
git clone git@github.com:deidee/deflex.git
npm i
Het pakket publiceren gebeurt alleen door deIdee en wel op de volgende manier:
npm publish --access public
FAQs
Stramien voor stijlbladen van @deidee. Op basis van het flexboxmodel.
We found that @deidee/deflex demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.