DEV Community: Davide Marchet

slamp(): enhance the css clamp() function with a little bit of mathematics.

Davide Marchet — Fri, 05 Nov 2021 11:31:08 +0000

(Original repo and files https://github.com/DidoMarchet/scss-slamp)

You won't have to make up clamp “preferred value“ anymore because:

☺️ clamp() is one of the most useful css function for responsive and adaptive layouts!

😟 But it's hard to define the preferred value used as long as the result is between the minimum and maximum values.

📐 By adding the slope of linear functions to clamp() we enhance the function with a little bit of mathematics!

🚀 This is how slamp() works: S~~lope~~ + cLAMP = SLAMP.

Table of content:

Options
Usage
Example
Thanks

Install the package via npm:

npm i scss-slamp

and include it using an @import statement:

@import '~scss-slamp';

/// @import 'node_modules/scss-slamp/dist/index.scss';
/// [...]

Options

The library comes with three default options:

$defaults_slamp_options: (
  "root-size": 16px, 
  "min": 480px, 
  "max": 1600px
);

root-size - represents the calculation base for rem expressed in px;
min - the minimun viewport width (px, em, rem, vw, % [...]);
max - the maximum viewport width (px, em, rem, vw, % [...]).

Using the $slamp_options variable in your scss stylesheet you can override each default:

$slamp_options: (
  "root-size": 10px, 
  "min": 768px,
  "max": 1920px
);

Usage

selector{
  rule: slamp(minSize, maxSize);
  rule: slamp(minSize, maxSize, minLimit, maxLimit);
}

The function takes as parameters:

$minSize - required - the lower bound (px, em, rem, vw, % [...]);
$maxSize - required - the upper bound (px, em, rem, vw, % [...]);
$minLimit - optional - override the default minimum viewport width (px, em, rem, vw, % [...]);
$maxLimit - optional - override the default maximum viewport width (px, em, rem, vw, % [...]).

It returns a clamp statement where everything in between the preferred limits changes in linear fashion.

/*
selector{
  rule: clamp(minSize[rem], intersection[rem] + slope * 100vw, maxSize[rem])
}
*/

❗ The generated arguments of the clamp statement are expressed in rem because it's relative to the root avoiding compounding issues.

Example

.my-class{
  padding: slamp(25px, 50px) slamp(50px, 75px);
}

#id{
  width: slamp(5vw, 15vw);
}

h2{
  font-size: slamp(1.25rem, 2.75rem, 768px, 1920px); // default viewport limits are overrided
}

/*
.my-class {
  padding: clamp(1.5625 rem, 0.8928571429 rem + 2.2321428571 vw, 3.125 rem)
    clamp(3.125 rem, 2.4553571429 rem + 2.2321428571 vw, 4.6875 rem);
}

#id{
  width: clamp(3.75rem, 0.5357142857rem + 10.7142857143vw, 11.25rem);
}

h2 {
  font-size: clamp(1.25rem, 0.25rem + 2.0833333333vw, 2.75rem);
}
*/

Thanks

Special thanks for the inspiration and snippets to:

Pedro Rodriguez the author of this wonderful and detailed article https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ who inspire me to create this function;
Jakob Eriksen the author of this fundamental library https://github.com/black7375/sass-unitconverter, the backbone of this function.

Contribute

Feel free to fork and increase this repo!

And let me know if you find it useful!

Enjoy 👊

Vue 3 Supabase.js Client

Davide Marchet — Tue, 20 Apr 2021 22:55:28 +0000

(Original repo https://github.com/DidoMarchet/vue-3-supabase)

🍔 Simple Vue 3 wrap for Supabase.js Client build with Vitejs

Table of content:

Install
Usages
Methods

Install the package via npm:

npm i vue-3-supabase

Install

It's Simple! In your main.js add the following:

import { createApp } from 'vue'
import App from './App.vue'

// Import supabase
import supabase from 'vue-3-supabase'

const app = createApp(App)

// Use supabase
app.use(supabase, {
  supabaseUrl: 'https://xxxxxxxxxxxxxxxxx.supabase.co', // actually you can use something like import.meta.env.VITE_SUPABASE_URL
  supabaseKey: 'xxxxx__xxxxx___xxxxx___xxxxx', // actually you can use something like import.meta.env.VITE_SUPABASE_KEY,
  options: {}
})

app.mount('#app')

It takes three params as argument :

supabaseUrl: the unique required Supabase URL which is supplied when you create a new project in your project dashboard.

supabaseKey: the unique required Supabase Key which is supplied when you create a new project in your project dashboard.

options: additional parameters not required

More references here

Usages

Options API

In the Option API you can use this.$supabase to access the Supabase.js Client:

<template>
  // Your HTML Stuff
</template>

<script>
export default {
  async mounted () {
    const { user, session, error } = await this.$supabase.auth.signUp({
      email: 'user@provider.com',
      password: 'myawesomepassword',
    })
    console.log(user, session, error)
  }
}
</script>

Composition API

In the Composition API you can use inject('supabase') to access the Supabase.js Client:

<template>
  // Your HTML Stuff
</template>

<script setup>
import { onMounted } from 'vue'
import { useSupabase } from 'vue-3-supabase'

onMounted(async () => {
  const { user, session, error } = await useSupabase().auth.signUp({
    email: 'user@provider.com',
    password: 'myawesomepassword',
  })
  console.log(user, session, error)
})
</script>

Methods

Here the methods references from official doc:

Enjoy 👊

scss-utopia: save time, build fast (almost everything)

Davide Marchet — Sat, 20 Feb 2021 21:53:37 +0000

(Original repo and files https://github.com/DidoMarchet/scss-utopia)

📖 From https://en.wiktionary.org/wiki/utopia

utopia

A world in which everything and everyone works in perfect harmony.

🌘 Css is not an exact science and managing easily fluid and responsive styles in perfect harmony with designer's vision (IMHO) is utopia.

🌖 For that purpose scss-utopia was created: covering most developer needs in terms of typography, spacing and sizes ([...]) in the simplest and automated possible way!

Table of content:

Queries
Use Queries
Automate responsive rules
Automate fluid rules
Disclaimer
Awesome
Thanks
Contribute

You install the package via npm:

npm i scss-utopia

and include it using an @import statement:

@import '~scss-utopia';

/// @import 'node_modules/scss-utopia/dist/index.scss';
/// [...]

Queries

First of all we set up the media queries and features we'll use along all the application.

The library comes with a list of default queries and features:

$defaults: (
  "small": (min-width: 320px), 
  "medium": (min-width: 750px),
  "large": (min-width: 1000px),
  "xlarge": (min-width: 1300px),
  "pointer": (pointer: fine) and (hover: hover),
  "touch": (pointer: coarse) and (hover: none)
);

Using $queries variable in your scss stylesheet you can easily extend and override the default values adopting consistent naming convention:

$queries: (
  "tablet": (min-width: 768px) and (max-width: 1024px),
  "xlarge": (min-width: 1600px),
  "xlarge-retina": (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px)
  /// [ ...other rules ]
);

The resulting set of values will be the merge of $defaults and $queries variables:

/*
  "small": (min-width: 320px), 
  "medium": (min-width: 750px),
  "large": (min-width: 1000px),
  "xlarge": (min-width: 1600px), // overrited 
  "pointer": (pointer: fine) and (hover: hover),
  "touch": (pointer: coarse) and (hover: none),
  "tablet": (min-width: 768px) and (max-width: 1024px), // added
  "large-retina": (-webkit-min-device-pixel-ratio: 2)  and (min-width: 1300px) // added
*/

Use Queries

Once we have declared all the queries we need, we can deliver tailored style to each them using the react mixin:

@include react('medium'){
  body{
    background: black;
  }
}
a{
  @include react('pointer'){
    &:hover{
      color: red;
    }
  }
}

/*
  Will generate 

  @media (min-width: 750px)
    body {
      background: black;
    }
  }
  @media (hover: hover)
    a:hover {
      color: red;
    }
  }
*/

😰 Self guard: the mixin is called react because it has a reaction when a rule comes true, nothing in common with the js framework

Automate responsive rules

At this point we have all the instruments to handle the style if a certain condition is true.
With resp mixin we can automate this process and quickly generate responsive rules.

The mixin:

@mixin resp($properties...){ /* code */ }

takes as parameters:

$properties... a list that contains key/values pair.

⚠️ Key name is the name of css rule and it's required for each element.

Other key/values pair have a query as key and a size as value.

p{
  font-size: 1rem;
  @include resp(
    (
      'name': 'font-size',
      'medium': 1.15rem,
      'large': 1.35rem,
      'xlarge': 1.5rem
    ),
    (
      'name': 'margin',
      'medium': 25px 50px,
      'xlarge': 50px 100px
    )
  );
}

/* 
  Will generate:

  p {
    font-size: 1rem;
  }
  @media (min-width: 750px) {
    p {
      font-size: 1.15rem;
      margin: 25px 50px;
    }
  }
  @media (min-width: 1000px) {
    p {
      font-size: 1.35rem;
    }
  }
  @media (min-width: 1300px) {
    p {
      font-size: 1.5rem;
      margin: 50px 100px;
    }
  }
*/

Automate fluid rules

Now it's time to leave responsive behaviour and linearly scale rules between an upper and lower bound.

The fluid mixin uses clamp css function and also provides a fallback for browsers that don't support modern css solutions.

The mixin:

@mixin fluid($property, $sizes...) { /* code */ }

takes as parameters:

$property the name of the css rule;
$sizes... a list of clamp parameters (min scaler max, min scaler max, [...]).

p{
  @include fluid('font-size', 1rem 5vw 3rem);
  @include fluid('margin', 100px 10vw 200px, 150px 25vw 300px);
  @include fluid('padding', 100px 10vw 200px, 20px, 100px 10vw 200px);
}

/*
  Will generate:

  p {
    font-size: 3rem;
    font-size: min(max(1rem, 5vw), 3rem);
    font-size: clamp(1rem, 5vw, 3rem);
    margin: 200px 300px;
    margin: min(max(100px, 10vw), 200px) min(max(150px, 25vw), 300px);
    margin: clamp(100px, 10vw, 200px) clamp(150px, 25vw, 300px);
    padding: 200px 20px 200px;
    padding: min(max(100px, 10vw), 200px) 20px min(max(100px, 10vw), 200px);
    padding: clamp(100px, 10vw, 200px) 20px clamp(100px, 10vw, 200px);
  }
*/

🚜 Boosted allowing the use of fluid and static values together:

p{
  // rules: static static
  @include fluid('padding', 20px, 20px);
  // rules: fluid static
  @include fluid('padding', 100px 10vw 200px, 20px);
  // rules: fluid static fluid
  @include fluid('padding', 100px 10vw 200px, 20px, 100px 10vw 200px);
  // rules: static fluid static
  @include fluid('padding', 20px, 100px 10vw 200px, 20px);
  /// [ ...other rules ]
}

/*
  Will generate:

  p {
    // rules: static static
    padding: 20px 20px;
    padding: 20px 20px;
    padding: 20px 20px;

    // rules: fluid static
    padding: 200px 20px;
    padding: min(max(100px, 10vw), 200px) 20px;
    padding: clamp(100px, 10vw, 200px) 20px;

    // rules: fluid static fluid
    padding: 200px 20px 200px;
    padding: min(max(100px, 10vw), 200px) 20px min(max(100px, 10vw), 200px);
    padding: clamp(100px, 10vw, 200px) 20px clamp(100px, 10vw, 200px);

    // rules: static fluid static
    padding: 20px 200px 20px;
    padding: 20px min(max(100px, 10vw), 200px) 20px;
    padding: 20px clamp(100px, 10vw, 200px) 20px;
  }
*/

Disclaimer

scss-utopia covers the majority of your needs in terms of sizing, positioning and in general aspect.

However the mixins are not ideal to handle rules concerning layout (grid properties in particular) or adaptive design.

As mentioned the perfect harmony is utopia.

Awesome

🚀 Type npm i scss-utopia is damned cool.

⏳ It saves time.

Thanks

Special thanks for the inspiration and snippets to:

hugogiraudel.com/ who let me to use his scss snippets useful for react mixin and manage array
eduardoboucas/include-media the wonderful library who inspire me to create the structure of the queries and the react mixin
www.bronco.co.uk/our-ideas/creating-a-clamp-fallback-function-in-sass-scss/ who lay the foundation to create the fluid mixin

Contribute

Feel free to fork and increase this repo!

And let me know if you find it useful!

Enjoy 👊

How to Locomotive Scroll and Nuxt (with example and gotchas)

Davide Marchet — Fri, 01 Jan 2021 10:57:47 +0000

(Original repo and files https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll)

❤️ Every one loves smooth scrolling!

💤 But sometimes working with Javascript frameworks and DOM can be boring and love fades away.

📦 With this simple starter kit you can have fun with Locomotive Scroll and Nuxt without giving it a second though.

Table of content:

Plugin
Component
- Markup
- Directive
Implementation
Gotchas
Examples

You can try this starter kit by cloning this repo and running:

# install dependencies
$ npm install

# run dev enviroment
$ npm run dev

# generate static project
$ npm run generate

Plugin

First of all we setup the plugin enabling Locomotive Scroll instance works globally both in our component and for your own purposes.

In /LocomotiveScroll/plugin/index.js we create the plugin:

import LocomotiveScroll from 'locomotive-scroll'
import 'locomotive-scroll/dist/locomotive-scroll.css'

const install = (Vue) => {
  Vue.prototype.LocomotiveScroll = LocomotiveScroll
}

export default install

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(install)
  if (install.installed) {
    install.installed = false
  }
}

After the setup, it will be used in /plugins/client.js.

/plugins/client.js works with mode: 'client' in the Nuxt plugins configuration .

Component

This component is an useful wrap for our Locomotive Scroll implementation.

Below are the main steps of the implementation.

Complete code can be found here /LocomotiveScroll/component/index.js.

Markup

<div
  v-locomotive="{ options }"
  class="js-locomotive"
>
  <slot />
</div>

The v-locomotive directive gets access to low-level DOM.

It takes one argument options.

options is a computed obtained merging the defaultOption data property with the gettedOptions prop.

defaultOption and gettedOptionscontain the Locomotive Scroll instance options.

computed: {
  options () {
    // this.defaultOptions = { smooth: true }
    // this.gettedOptions = { offset: ['30%',0], direction: 'horizontal' }
    return { ...this.defaultOptions, ...this.gettedOptions }
  }
}

Through the slot element we're able to pass content to the component from each page.

Directive

directives: {
  locomotive: {
    inserted (el, binding, vnode) {
      vnode.context.locomotive = new vnode.context.LocomotiveScroll({ el, ...binding.value.options })
      vnode.context.locomotive.on('scroll', (e) => {
        vnode.context.onScroll(e)
        vnode.context.$emit('scroll')
      })
      vnode.context.$emit('init')
    },
    unbind (el, binding, vnode) {
      vnode.context.locomotive.destroy()
      vnode.context.locomotive = undefined
    }
  }
}

In the inserted hook we create the new instance of Locomotive Scroll from the plugin previously created and we assign it to locomotive data property.
The inserted hook guarantees the parent presence.

Once initialized we listen to scroll event.

Each time scroll event is fired we call onScroll method.

onScroll takes as parameter the scroll instance and uses this data to fill the store (/store/app.js) making the state of the scroll accessible and usable in all our application.

methods: {
  onScroll (e) {
    if (typeof this.$store._mutations['app/setScroll'] !== 'undefined') {
      this.$store.commit('app/setScroll', {
        isScrolling: this.locomotive.scroll.isScrolling,
        limit: { ...e.limit },
        ...e.scroll // x, y
      })
    }
  }
}

Implementation

Before using our component in the page we declare it globally in /plugins/both.js.
/plugins/both.js is called in the Nuxt plugins configuration.

Once the plugin is global we can use it in our page or components in this way (/pages/index.vue):

<template>
  <LocomotiveScroll 
    ref="scroller" 
    :getted-options="{
      offset: ['30%',0],
      direction: 'horizontal'
      // Other options
    }">

    <!-- My Content:
    Html elements, Components...
    -->

  </LocomotiveScroll>
</template>

You can access to locomotive scroll instance using this.$refs.scroller.locomotive.

Gotchas

Reactive elements alter the state of the application and DOM's elements could change.

This changes can take place in nested components and updating Locomotive Scroll could be complex.

We can use the $nuxt helper and emit a global event

this.$nuxt.$emit('update-locomotive')

and listen it in the mounted hook in /LocomotiveScroll/component/index.vue component:

mounted () {
  this.$nuxt.$on('update-locomotive', () => {
    this?.locomotive?.update() // ?. is the Optional Chaining operator (https://www.joshwcomeau.com/operator-lookup?match=optional-chaining)
  })
}

Examples

Thanks

If you find this repo useful and you saved time, well... let's take a coffee together!

☕ https://www.buymeacoffee.com/davide_marchet

DEV Community: Davide Marchet

slamp(): enhance the css clamp() function with a little bit of mathematics.

You won't have to make up clamp “preferred value“ anymore because:

Table of content:

Options

Usage

Example

Thanks

Contribute

Vue 3 Supabase.js Client

Table of content:

Install

Usages

Options API

Composition API

Methods

scss-utopia: save time, build fast (almost everything)

Table of content:

Queries

Use Queries

Automate responsive rules

Automate fluid rules

Disclaimer

Awesome

Thanks

Contribute

How to Locomotive Scroll and Nuxt (with example and gotchas)

Table of content:

Plugin

Component

Markup

Directive

Implementation

Gotchas

Examples

Basic Scroll

Horizontal Scroll

Gsap Scroll Trigger

Image Loads

On Call Function

Thanks