From 4c37d4c036f593cfa4ded9ccaff4a266ad31ec50 Mon Sep 17 00:00:00 2001 From: Serhii Zlobin Date: Mon, 9 Feb 2026 12:41:22 +0200 Subject: [PATCH] Add columns section --- assets/columns.css | 1 + sections/columns.liquid | 319 ++++++++++++++++++++++++++++++++++++ src/scss/columns.scss | 60 +++++++ src/sections/columns.liquid | 319 ++++++++++++++++++++++++++++++++++++ 4 files changed, 699 insertions(+) create mode 100644 assets/columns.css create mode 100644 sections/columns.liquid create mode 100644 src/scss/columns.scss create mode 100644 src/sections/columns.liquid diff --git a/assets/columns.css b/assets/columns.css new file mode 100644 index 0000000..290b120 --- /dev/null +++ b/assets/columns.css @@ -0,0 +1 @@ +.columns__wrapper{--columns-content-justify: var(--columns-content-alignment, flex-start);--section-padding-bottom: var(--padding-bottom-mobile, 16px);--section-padding-top: var(--padding-top-mobile, 16px);color:var(--color-primary, #000);background:var(--background-primary, #fff)}@media(min-width: 992px){.columns__wrapper{--section-padding-bottom: var(--padding-bottom-desktop, 40px);--section-padding-top: var(--padding-top-desktop, 40px)}}.columns__wrapper--padding-top:not(:empty){padding-top:var(--section-padding-top)}.columns__wrapper--padding-bottom:not(:empty){padding-bottom:var(--section-padding-bottom)}.columns__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:40px}.columns__item{display:flex;align-items:center;justify-content:var(--columns-content-justify);gap:30px}.columns__icon-wrapper{font-size:clamp(30px,3vw,48px)}.columns__title{margin:0}.columns__title+.columns__text{margin-bottom:2px} diff --git a/sections/columns.liquid b/sections/columns.liquid new file mode 100644 index 0000000..f8741f7 --- /dev/null +++ b/sections/columns.liquid @@ -0,0 +1,319 @@ +{%- if section.blocks.size > 0 -%} + {%- assign color_scheme = section.settings.color_scheme -%} + {%- assign content_horizontal = section.settings.content_horizontal -%} + {%- assign icon_style = settings.icon_style -%} + {%- assign padding_bottom_desktop = section.settings.padding_bottom_desktop -%} + {%- assign padding_bottom_mobile = section.settings.padding_bottom_mobile -%} + {%- assign padding_top_desktop = section.settings.padding_top_desktop -%} + {%- assign padding_top_mobile = section.settings.padding_top_mobile -%} + + {% comment %} CSS variables start {% endcomment %} + {%- capture variables -%} + {%- case padding_bottom_desktop -%} + {%- when 'md' -%} + --padding-bottom-desktop: 60px; + {%- when 'lg' -%} + --padding-bottom-desktop: 80px; + {%- endcase -%} + + {%- case padding_bottom_mobile -%} + {%- when 'md' -%} + --padding-bottom-mobile: 32px; + {%- when 'lg' -%} + --padding-bottom-mobile: 50px; + {%- endcase -%} + + {%- case padding_top_desktop -%} + {%- when 'md' -%} + --padding-top-desktop: 60px; + {%- when 'lg' -%} + --padding-top-desktop: 80px; + {%- endcase -%} + + {%- case padding_top_mobile -%} + {%- when 'md' -%} + --padding-top-mobile: 32px; + {%- when 'lg' -%} + --padding-top-mobile: 50px; + {%- endcase -%} + + {%- case content_horizontal -%} + {%- when 'center' -%} + --columns-content-alignment: center; + {%- when 'right' -%} + --columns-content-alignment: flex-end; + {%- endcase -%} + {%- endcapture -%} + {% comment %} CSS variables end {% endcomment %} + +
+
+
+ {%- for block in section.blocks -%} + {%- assign block_id = block.id -%} + {%- assign icon = block.settings.columns_icon -%} + {%- assign text = block.settings.columns_text -%} + {%- assign title = block.settings.columns_title -%} + + {%- if title != blank or text != blank -%} +
+ {%- if icon != 'empty' -%} +
+ {%- render 'icon', icon: icon, style: icon_style -%} +
+ {%- endif -%} + +
+ {%- if title != blank -%} +
+ {{- title -}} +
+ {%- endif -%} + + {%- if text != blank -%} +
+ {{- text -}} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- endfor -%} +
+
+
+{%- endif -%} + +{% schema %} + { + "name": "Columns", + "tag": "section", + "class": "columns", + "css_assets": [ + { + "file": "columns.css" + } + ], + "blocks": [ + { + "type": "column", + "name": "Column", + "limit": 3, + "settings": [ + { + "type": "select", + "id": "columns_icon", + "label": "Icon", + "options": [ + { + "value": "empty", + "label": "No icon" + }, + { + "value": "address-card", + "label": "Address card" + }, + { + "value": "calendar", + "label": "Calendar" + }, + { + "value": "clock", + "label": "Clock" + }, + { + "value": "comment", + "label": "Comment" + }, + { + "value": "credit-card-alt", + "label": "Credit card" + }, + { + "value": "envelope", + "label": "Envelope" + }, + { + "value": "exclamation", + "label": "Exclamation" + }, + { + "value": "fax", + "label": "Fax" + }, + { + "value": "globe", + "label": "Globe" + }, + { + "value": "handshake", + "label": "Handshake" + }, + { + "value": "heart", + "label": "Heart" + }, + { + "value": "info", + "label": "Info" + }, + { + "value": "phone", + "label": "Phone" + }, + { + "value": "shop", + "label": "Shop" + }, + { + "value": "tag", + "label": "Tag" + }, + { + "value": "truck-fast", + "label": "Truck" + }, + { + "value": "warning", + "label": "Warning" + } + ], + "default": "tag" + }, + { + "type": "text", + "id": "columns_title", + "label": "Title", + "default": "Medium size title here" + }, + { + "type": "text", + "id": "columns_text", + "label": "Description", + "default": "Lorem ipsum dolor sit amet" + } + ] + } + ], + "settings": [ + { + "type": "header", + "content": "General settings" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "Color scheme", + "default": "set-1" + }, + { + "type": "select", + "id": "content_horizontal", + "label": "Horizontal positioning", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center" + }, + { + "type": "header", + "content": "Desktop settings" + }, + { + "type": "select", + "id": "padding_top_desktop", + "label": "Padding top", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "select", + "id": "padding_bottom_desktop", + "label": "Padding bottom", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "header", + "content": "Mobile settings" + }, + { + "type": "select", + "id": "padding_top_mobile", + "label": "Padding top", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "select", + "id": "padding_bottom_mobile", + "label": "Padding bottom", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + } + ] + } +{% endschema %} diff --git a/src/scss/columns.scss b/src/scss/columns.scss new file mode 100644 index 0000000..e9432c1 --- /dev/null +++ b/src/scss/columns.scss @@ -0,0 +1,60 @@ +// Import variables +@use 'variables' as *; + +// Import mixins +@use '_helpers/mixins' as *; + +.columns { + &__wrapper { + --columns-content-justify: var(--columns-content-alignment, flex-start); + --section-padding-bottom: var(--padding-bottom-mobile, 16px); + --section-padding-top: var(--padding-top-mobile, 16px); + + color: $color-primary; + background: $background-primary; + + @include media-up(md) { + --section-padding-bottom: var(--padding-bottom-desktop, 40px); + --section-padding-top: var(--padding-top-desktop, 40px); + } + + &--padding-top { + &:not(:empty) { + padding-top: var(--section-padding-top); + } + } + + &--padding-bottom { + &:not(:empty) { + padding-bottom: var(--section-padding-bottom); + } + } + } + + &__grid { + @include grid( + $columns: repeat(auto-fit, minmax(240px, 1fr)), + $gap: 40px + ); + } + + &__item { + @include flexbox( + $align: center, + $justify: var(--columns-content-justify), + $gap: 30px + ); + } + + &__icon-wrapper { + font-size: clamp(30px, 3vw, 48px); + } + + &__title { + margin: 0; + + & + .columns__text { + margin-bottom: 2px; + } + } + } diff --git a/src/sections/columns.liquid b/src/sections/columns.liquid new file mode 100644 index 0000000..f8741f7 --- /dev/null +++ b/src/sections/columns.liquid @@ -0,0 +1,319 @@ +{%- if section.blocks.size > 0 -%} + {%- assign color_scheme = section.settings.color_scheme -%} + {%- assign content_horizontal = section.settings.content_horizontal -%} + {%- assign icon_style = settings.icon_style -%} + {%- assign padding_bottom_desktop = section.settings.padding_bottom_desktop -%} + {%- assign padding_bottom_mobile = section.settings.padding_bottom_mobile -%} + {%- assign padding_top_desktop = section.settings.padding_top_desktop -%} + {%- assign padding_top_mobile = section.settings.padding_top_mobile -%} + + {% comment %} CSS variables start {% endcomment %} + {%- capture variables -%} + {%- case padding_bottom_desktop -%} + {%- when 'md' -%} + --padding-bottom-desktop: 60px; + {%- when 'lg' -%} + --padding-bottom-desktop: 80px; + {%- endcase -%} + + {%- case padding_bottom_mobile -%} + {%- when 'md' -%} + --padding-bottom-mobile: 32px; + {%- when 'lg' -%} + --padding-bottom-mobile: 50px; + {%- endcase -%} + + {%- case padding_top_desktop -%} + {%- when 'md' -%} + --padding-top-desktop: 60px; + {%- when 'lg' -%} + --padding-top-desktop: 80px; + {%- endcase -%} + + {%- case padding_top_mobile -%} + {%- when 'md' -%} + --padding-top-mobile: 32px; + {%- when 'lg' -%} + --padding-top-mobile: 50px; + {%- endcase -%} + + {%- case content_horizontal -%} + {%- when 'center' -%} + --columns-content-alignment: center; + {%- when 'right' -%} + --columns-content-alignment: flex-end; + {%- endcase -%} + {%- endcapture -%} + {% comment %} CSS variables end {% endcomment %} + +
+
+
+ {%- for block in section.blocks -%} + {%- assign block_id = block.id -%} + {%- assign icon = block.settings.columns_icon -%} + {%- assign text = block.settings.columns_text -%} + {%- assign title = block.settings.columns_title -%} + + {%- if title != blank or text != blank -%} +
+ {%- if icon != 'empty' -%} +
+ {%- render 'icon', icon: icon, style: icon_style -%} +
+ {%- endif -%} + +
+ {%- if title != blank -%} +
+ {{- title -}} +
+ {%- endif -%} + + {%- if text != blank -%} +
+ {{- text -}} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- endfor -%} +
+
+
+{%- endif -%} + +{% schema %} + { + "name": "Columns", + "tag": "section", + "class": "columns", + "css_assets": [ + { + "file": "columns.css" + } + ], + "blocks": [ + { + "type": "column", + "name": "Column", + "limit": 3, + "settings": [ + { + "type": "select", + "id": "columns_icon", + "label": "Icon", + "options": [ + { + "value": "empty", + "label": "No icon" + }, + { + "value": "address-card", + "label": "Address card" + }, + { + "value": "calendar", + "label": "Calendar" + }, + { + "value": "clock", + "label": "Clock" + }, + { + "value": "comment", + "label": "Comment" + }, + { + "value": "credit-card-alt", + "label": "Credit card" + }, + { + "value": "envelope", + "label": "Envelope" + }, + { + "value": "exclamation", + "label": "Exclamation" + }, + { + "value": "fax", + "label": "Fax" + }, + { + "value": "globe", + "label": "Globe" + }, + { + "value": "handshake", + "label": "Handshake" + }, + { + "value": "heart", + "label": "Heart" + }, + { + "value": "info", + "label": "Info" + }, + { + "value": "phone", + "label": "Phone" + }, + { + "value": "shop", + "label": "Shop" + }, + { + "value": "tag", + "label": "Tag" + }, + { + "value": "truck-fast", + "label": "Truck" + }, + { + "value": "warning", + "label": "Warning" + } + ], + "default": "tag" + }, + { + "type": "text", + "id": "columns_title", + "label": "Title", + "default": "Medium size title here" + }, + { + "type": "text", + "id": "columns_text", + "label": "Description", + "default": "Lorem ipsum dolor sit amet" + } + ] + } + ], + "settings": [ + { + "type": "header", + "content": "General settings" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "Color scheme", + "default": "set-1" + }, + { + "type": "select", + "id": "content_horizontal", + "label": "Horizontal positioning", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center" + }, + { + "type": "header", + "content": "Desktop settings" + }, + { + "type": "select", + "id": "padding_top_desktop", + "label": "Padding top", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "select", + "id": "padding_bottom_desktop", + "label": "Padding bottom", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "header", + "content": "Mobile settings" + }, + { + "type": "select", + "id": "padding_top_mobile", + "label": "Padding top", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + }, + { + "type": "select", + "id": "padding_bottom_mobile", + "label": "Padding bottom", + "options": [ + { + "value": "sm", + "label": "Small" + }, + { + "value": "md", + "label": "Medium" + }, + { + "value": "lg", + "label": "Large" + } + ], + "default": "md" + } + ] + } +{% endschema %}