Jade University Typo3 Frontend

Frontend-Development, HTML, SCSS (BEM, CUBE CSS), Javascript (ES6), Preact, Typo3
Client: 3pc

For the website relaunch of the Jade University of Applied Sciences me and the team at 3pc programmed a new frontend with focus on performance, accessibility and maintainability.

jade-hs.de

  • Responsive Fluid Frontend

  • Modular SCSS with BEM and CUBE CSS

  • Fluid type and spacings

                @function fluid-unit(
  $min-size,
  $max-size,
  $min-breakpoint: $fluid-min-bp,
  $max-breakpoint: $fluid-max-bp,
  $unit: vw
) {
  $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
  $slope-to-unit: round-value($slope * 100, 6);
  $intercept-rem: round-value(pxtorem($min-size - $slope * $min-breakpoint), 6);
  $min-size-rem: round-value(pxtorem($min-size), 2);
  $max-size-rem: round-value(pxtorem($max-size), 2);
  @return clamp(
    #{$min-size-rem},
    #{$slope-to-unit}#{$unit} + #{$intercept-rem},
    #{$max-size-rem}
  );
}

  • Vanilla JS Interactive Elements

                export default class Swiperslider {
  constructor(target, params) {
    this.target = target;
    this.swiper = null;
    this.container = params.container;
    this.sliderOptions = params.sliderOptions || {};
    this.onReady = params.onReady;
  }

  init = () => {
    return new Promise((resolve) => {
      this.createSlider();
      return resolve();
    });
  };

  createSlider = () => {