Work Samples

Custom Presentation Builder: Modularity, refactor, and SCSS @use Rule Migration

Stack:

src/
├──sass/
│   │
│   ├───_vars.scss
│   │     // @import project and defaults
│   ├───_defaults.scss
│   │     // @import mixins
│   └───_builder.scss
│         // @import vars and project
└──slides/
    │
    ├──shared/css/
    │   │
    │   └──global.scss
    │        // @import vars and fonts
    │
    ├──Z05/css/
    │   │
    │   └───slide.scss
    │
    └──Z10/css/
        │
        └───slide.scss

src/
├──sass/
│   │
│   ├───_vars.scss
│   │    // @forward defaults and project
│   ├───_defaults.scss
│   │    // @use mixins with defaults
│   ├───_mixins.scss
│   │    // flexible font-family mixin
│   └───_builder.scss
│       // @use vars with namespacing
├──slides/
│   │
│   ├──shared/css/
│   │   │
│   │   └───global.scss
│   │         // @use vars and fonts
│   │
│   ├──Z05/css/
│   │   │
│   │   └───slide.scss
│   │
│   └──Z10/css/
│       │
│       └───slide.scss
│
└──_sourceDeck/styles/
    │
    └──  project.scss
          // @use mixins, brand overrides

// Brittle, static styles
body {
  font-family: Poppins;
}


element {
  background-color: #0049bf;
};

@use './_mixins' as mixins;


$fontFamily: Poppins !default;

// Direct variable system with !default 

$brandColor1: #2B5F51 !default;
$brandColor2: #0BBAB4 !default;
$primaryColor: $brandColor1 !default;

@use '../../src/sass/mixins' as mixins;
 
@debug 'Loaded: _sourceDeck/styles/project.scss';
 
$projectFont: Poppins;
$defaultFont: Poppins;
 
// Brand-specific overrides
$brandColor1: #0053e2;
$brandColor2: #001E60;
$primaryColor: $brandColor1;

Upon creating a new custom presentation, the user creates a unique title from a selection of strings(this list is custom to each project, injected from _sourceDeck/). The combination is compared against saved projects, and duplicates prompt an option to change the title, or add iteration.

Desired slides are selected, and then the user can reorder them within the presentation - grouped slides (indicated with a lock icon) are fixed in relative position and sequence. This behavior is leverages Sortable.js, combined with custom JavaScript functions and SCSS, in order to meet specific direction from creative and UX stakeholders.

Saved presentations are mapped to local storage. This allows for innumerable options without the need to for extensive save space - the default presentation slides are referenced via the local storage map, so most custom presentation data remains under 2kB.

The presentation builder can be toggled between grid and list during the process, and project-specific style overrides and content are inherited for swift replication for multiple clients and brands.