Development

Auf dieser Seite sind Beispiele und Informationen zu den Entwicklungsmöglichkeiten aufgelistet.

Struktur

  • Folgende Ordner können für die Entwicklung verwendet werden.
    • Template: /src/templates/custom
    • Styling: /src/scss/custom
    • JavaScript: /src/js/custom

Tools / Libraries

Folgende Tools und Libraries sind im sx-standard-template integriert. Eine komplette Übersicht findet sich in der package.json Datei.

  • Bootstrap 5
  • Webpack 5
  • ESLint / Stylelint
  • SASS
  • Nunjucks
  • Lazysizes
  • Venobox
  • Flatpickr
  • GSAP (GreenSock Animation Platform)
  • Swiper Slider

Module

Um Module und Animationen verwenden zu können, wird in den meisten Fällen das folgende Attribut auf einem Element benötigt.

[data-sx-*]

Für eine genaue Beschreibung der Anwedung, können die Beispiele auf der Modul-Seite verwendet oder direkt das JS Modul im code eingesehen werden.

Nunjucks

config.json

In der Datei config.json können Konfigurationen abgelegt werden.

data.json

Im Verzeichnis /src/templates/data.json können strukturiert Inhalte abgelegt werden.

htmlWebpackPlugin

{{ htmlWebpackPlugin.options.title }}
output: Webpack App

global functions

{{ getLink('index') }}
output: index.html
{{ debug({'option': 'value'})|safe }}
output: 
{
  option: 'value'
}
{{ getRandomImage(100, 30) }}
output: https://dummyimage.com/100x30/ddd/aaa
{{ loremIpsum(50, 'w') }}
output: lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra
{{ bem('block', 'modul', ['modifier']) }}
output: block__modul block__modul--modifier
{{ getCurrentPage() }}
output: 
index

data

{{ getData().currentPage }}
output: index
{{ getData().version }}
output: 1.4.1
{{ getData().basePath }}
output: .
{{ getData().config|json_encode }}
output: 
{"basePath":".","lang":"de","cookie":{"active":false,"type":"configurator"},"mobileBreakpoint":992,"mainNavigationType":"standard","mainNavigationSubNavigationEnabled":true,"navigationMainShrinkBreakpoint":1400,"navigationFooterBreakpoint":992,"openinghoursBreakpoint":574,"js":{"enableAllModules":true,"modules":{"Accordion":false,"Bootstrap":false,"CollapseText":false,"Cookie":false,"Datepicker":false,"DragAndDropUpload":false,"Drilldown":false,"Emo":false,"Forms":false,"Gsap":false,"Hamburgers":false,"Header":false,"MobileDropdownNavi":false,"MobileTouchHandler":false,"Navigation":false,"PasswordShow":false,"ResponsiveBackgroundImages":false,"ResponsiveCollapse":false,"Search":false,"SimpleUploadButton":false,"Slider":false,"SmoothScrollAnchor":false,"SmoothScrollAnimation":false,"SubNavigation":false,"Lightbox":false}}}
{{ getData()|json_encode }}
output: 
{"metaTitle":"Suxesiv standard template","navigationEntries":[{"name":"Home","page":"index","classes":["home"],"bemModifier":["home"]},{"name":"Styleguide","page":"styleguide","subEntries":[{"name":"Styleguide","page":"styleguide"},{"name":"Bootstrap","page":"bootstrap"},{"name":"HTML Plain","page":"html-plain"}]},{"name":"Layout","page":"layout","subEntries":[{"name":"Site Container","page":"site-container"},{"name":"Site Container Sidebar","page":"site-container-sidebar"},{"name":"Site Full","page":"site-full"},{"name":"Site Full Sidebar","page":"site-full-sidebar"},{"name":"Site Blank","page":"site-blank"}]},{"name":"Widget","page":"widget"},{"name":"Module","page":"module","subEntries":[{"name":"Blog","page":"blog","subEntries":[{"name":"Blog Detail","page":"blog-detail"}]},{"name":"FAQ","page":"faq","subEntries":[{"name":"FAQ Category","page":"faq-category"},{"name":"FAQ Detail","page":"faq-detail"}]},{"name":"Job","page":"job","subEntries":[{"name":"Job Detail","page":"job-detail"},{"name":"Job Form","page":"job-form"}]},{"name":"Newsletter","page":"newsletter"},{"name":"Search","page":"search"},{"name":"Sitemap","page":"sitemap"},{"name":"Sponsor","page":"sponsor"},{"name":"Contact","page":"contact"}]},{"name":"Animation","page":"animation"},{"name":"Development","page":"development","subEntries":[{"name":"Site default","page":"site-default"},{"name":"Components","page":"components"},{"name":"Image sizes","page":"image-sizes"}]}],"topNavigationEntries":[{"name":"Home","page":"index","classes":["home"],"bemModifier":["home"]},{"name":"Link 1","page":"custom"},{"name":"Link 2","page":"custom"},{"name":"Link 3","page":"custom"}],"footerNavigationEntries":[{"name":"Link 1","page":"custom"},{"name":"Link 2","page":"custom"},{"name":"Link 3","page":"custom"}],"bottomNavigationEntries":[{"name":"Link 1","page":"custom"},{"name":"Link 2","page":"custom"},{"name":"Link 3","page":"custom"}],"styleguide":{"colors":["primary","secondary","tertiary","fourth","fifth","success","danger","warning","info","light","dark","black","white"]},"nodeModulesPath":"node_modules","basePath":".","localhostPath":"http://localhost","mockServicePort":"8182","mockServicePath":"http://localhost:8182","config":{"basePath":".","lang":"de","cookie":{"active":false,"type":"configurator"},"mobileBreakpoint":992,"mainNavigationType":"standard","mainNavigationSubNavigationEnabled":true,"navigationMainShrinkBreakpoint":1400,"navigationFooterBreakpoint":992,"openinghoursBreakpoint":574,"js":{"enableAllModules":true,"modules":{"Accordion":false,"Bootstrap":false,"CollapseText":false,"Cookie":false,"Datepicker":false,"DragAndDropUpload":false,"Drilldown":false,"Emo":false,"Forms":false,"Gsap":false,"Hamburgers":false,"Header":false,"MobileDropdownNavi":false,"MobileTouchHandler":false,"Navigation":false,"PasswordShow":false,"ResponsiveBackgroundImages":false,"ResponsiveCollapse":false,"Search":false,"SimpleUploadButton":false,"Slider":false,"SmoothScrollAnchor":false,"SmoothScrollAnimation":false,"SubNavigation":false,"Lightbox":false}}},"thumbnailConfig":{"emo":[{"mediaQuery":null,"imageWidths":[330,480,768,1240,1920],"displaySize":"100vw"}],"lightbox-gallery":[{"mediaQuery":"(max-width: 570px)","imageWidths":[570,400],"displaySize":"100vw"},{"mediaQuery":"(max-width: 768px)","imageWidths":[510],"displaySize":"510px"},{"mediaQuery":"(max-width: 1024px)","imageWidths":[250],"displaySize":"250px"},{"mediaQuery":"(max-width: 1240px)","imageWidths":[215],"displaySize":"215px"},{"mediaQuery":null,"imageWidths":[270],"displaySize":"270px"}],"home-boxes":[{"mediaQuery":"(max-width: 570px)","imageWidths":[570,400,330],"displaySize":"100vw"},{"mediaQuery":"(max-width: 768px)","imageWidths":[240],"displaySize":"240px"},{"mediaQuery":"(max-width: 1024px)","imageWidths":[220],"displaySize":"220px"},{"mediaQuery":"(max-width: 1240px)","imageWidths":[300],"displaySize":"300px"},{"mediaQuery":null,"imageWidths":[370],"displaySize":"370px"}],"content-slider":[{"mediaQuery":"(max-width: 570px)","imageWidths":[570,400,330],"displaySize":"100vw"},{"mediaQuery":"(max-width: 768px)","imageWidths":[510],"displaySize":"510px"},{"mediaQuery":"(max-width: 1024px)","imageWidths":[710],"displaySize":"710px"},{"mediaQuery":"(max-width: 1240px)","imageWidths":[950],"displaySize":"950px"},{"mediaQuery":null,"imageWidths":[1170],"displaySize":"1170px"}],"banner-image":[{"mediaQuery":null,"imageWidths":[870,510,400,330],"displaySize":"1170px"}],"text-image-list":[{"mediaQuery":"(max-width: 570px)","imageWidths":[570,400,330],"displaySize":"100vw"},{"mediaQuery":"(max-width: 768px)","imageWidths":[160],"displaySize":"240px"},{"mediaQuery":"(max-width: 1024px)","imageWidths":[220],"displaySize":"220px"},{"mediaQuery":null,"imageWidths":[270],"displaySize":"370px"}]},"currentPage":"index","version":"1.4.1","name":"sx-standard-template","repository":{"type":"git","url":"https://git.suxesiv.ch/templates1/sx-standard-template.git"}}