Nutrition Warehouse Sections

  <div class="x-boilerplate">
    <div class="container {% if section.settings.use_container %} x-container {% endif %} {{ section.settings.css_class }}">
      <h1>Boilerplate</h1>
    </div>
  </div>

  <style>
  {% comment %}/* Section Styles */{% endcomment %}
  #shopify-section-{{ section.id }} .x-boilerplate {
    background: {{ section.settings.background_colour }};
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
  }

  /* Mobile */
  @media (max-width: 640px) {}
  /* Mobile */

  {% comment %}/* Container */{% endcomment %}
  #shopify-section-{{ section.id }} .x-container {width: 100% !important; margin: 0 auto;}
  @media (min-width: 640px) {#shopify-section-{{ section.id }} .x-container {max-width: 640px !important;}}
  @media (min-width: 768px) {#shopify-section-{{ section.id }} .x-container {max-width: 768px !important;}}
  @media (min-width: 1024px) {#shopify-section-{{ section.id }} .x-container {max-width: 1024px !important;}}
  @media (min-width: 1280px) {#shopify-section-{{ section.id }} .x-container {max-width: 1280px !important;}}
  @media (min-width: 1536px) {#shopify-section-{{ section.id }} .x-container {max-width: 1536px !important;}}
  {% comment %}/* Container */{% endcomment %}

  {% comment %}/* Advanced */{% endcomment %}
  {{ section.settings.custom_css }}
  {% comment %}/* Advanced */{% endcomment %}
  </style>

  {% schema %}

  {
    "name": "Boilerplate 🏝",
    "class": "x-boilerplate",
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "checkbox",
        "id": "use_container",
        "label": "Use Container",
        "default": true
      },
      {
        "type": "color",
        "id": "background_colour",
        "label": "Background Colour",
        "default": "#FFF"
      },
      {
        "type": "header",
        "content": "Spacing"
      }, {
        "type": "range",
        "id": "padding_top",
        "label": "Padding Top",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "padding_bottom",
        "label": "Padding Bottom",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "margin_top",
        "label": "Margin Top",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "margin_bottom",
        "label": "Margin Bottom",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "header",
        "content": "Advanced"
      }, {
        "type": "text",
        "id": "css_class",
        "label": "CSS Class"
      }, {
        "type": "textarea",
        "id": "custom_css",
        "label": "Custom CSS",
        "info": "Write your css here to make advanced adjustments"
      }
    ],
    "presets": [
      {
        "name": "Boilerplate 🏝",
        "category": "boilerplate"
      }
    ]
  }

  {% endschema %}