Souvent, je me retrouve à créer ou à répéter les mêmes extraits de code encore et encore. Aujourd'hui, je cherche des moyens de garder les choses simples et modulaires afin de pouvoir les récupérer et les réutiliser rapidement dans n'importe quel projet.
Cet extrait « section et bloc par défaut » est la base de la plupart des éléments que je crée.
J'ai constaté que toutes les sections des sites ne souhaitent pas le même remplissage pour le bureau que pour le mobile. Donc, plutôt que de « coder en dur » cela dans des styles où cela nécessiterait au minimum des connaissances CSS, j'ai pensé à donner l'option pour le mobile et le bureau dès le départ !
Ce petit extrait fonctionne bien avec le thème Dawn jusqu'à la version 14 jusqu'à présent, j'ai pensé que je partagerais simplement ce que je pense être un petit « gain de temps ».
{% comment %}
Default settings for a section with blocks
{% endcomment %}
{% comment %}
Styles à appliquer à partir des paramètres de section et de bloc ; cela peut également être réalisé en transmettant la variable --var à une feuille de style. J'effectue ici les opérations essentielles pour éviter le chargement des pages et les décalages de contenu.
{% endcomment %}
{%- style -%}
.section- {{ section.id }} -padding {
rembourrage supérieur : {{ section.settings.padding_top | times: 0.75 | round: 0 }} px ;
padding-bottom : {{ section.settings.padding_bottom | times: 0.75 | round: 0 }} px ;
}
{% if section.settings.full-width == false %}
.section- {{ section.id }} -padding {
largeur maximale : 1 320 px ;
marge : 0 auto ;
}
{% endif %}
@media screen et ( largeur maximale : 750 px ) {
.section- {{ section.id }} -padding {
rembourrage supérieur : {{ section.settings.padding_top_mobile | times: 0.75 | round: 0 }} px ;
padding-bottom : {{ section.settings.padding_bottom_mobile | times: 0.75 | round: 0 }} px ;
}
}
{%- endstyle -%}
{% comment %}
Ce sera le lien vers votre feuille de style pour la section et le bloc - j'ai choisi de nommer la classe de niveau supérieur de la même manière que le nom du fichier afin que vous puissiez trouver le fichier rapidement depuis le front-end du site.
{% endcomment %}
{% comment %}
{{ 'jsm-default.css' | asset_url | stylesheet_tag }}
{% endcomment %}
{% comment %}
Le contenu de votre section et de votre bloc :)
{% endcomment %}
{% comment %}
Le contenu de votre section et de votre bloc :)
{% endcomment %}
{% comment %}
Your script or script calls after the content has been loaded
{% endcomment %}
{% schema %}
{
"name": "jsm-defaults",
"class": "jsm-default",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"par défaut" : 0
},
{
"type": "en-tête",
"contenu" : "Paramètres mobiles"
},
{
"type": "plage",
"id": "padding_top_mobile",
"min": 0,
"max": 100,
"étape": 1,
"unité": "px",
"label": "t:sections.all.padding.padding_top",
"par défaut" : 0
},
{
"type": "plage",
"id": "padding_bottom_mobile",
"min": 0,
"max": 100,
"étape": 1,
"unité": "px",
"label": "t:sections.all.padding.padding_bottom",
"par défaut" : 0
},
{
"type": "en-tête",
"contenu" : "Paramètres généraux"
},
{
"type": "case à cocher",
"id": "pleine largeur",
"par défaut" : faux,
"label": "Pleine largeur"
}
],
"blocs": [
],
« préréglages » : [
{
"name": "Paramètres par défaut JSM"
}
]
}
{% endschema %}