Awesome shadows for your project on vue.js along with Vue Box Shadows

Andrej Sharapov — Wed, 28 Sep 2022 06:31:58 +0000

Vue Box Shadows is small library that will help make your Vue project better and make it easier to work with shadows. It contains more than 100 simple and soft options.

Excellent compatibility with Vuetify, TailwindCSS, Bootstrap and other UI frameworks.

It is very simple and easy to use, but the result will pleasantly surprise you! 😋

It is easy to design a blog, article, product cards and pricing tables.

And for fans of neumorphism, there is also a nice bonus.

Look at more examples in codesandbox or directly in the repository.

vue-box-shadows

Andrej Sharapov — Fri, 22 Jul 2022 05:16:54 +0000

Vue.js wrapper for Box-shadow.css to build simple and awesome shadows with use vue.

This is a small package that adds interesting shadows to Vue.js projects. With it, you can create interesting and airy components without having to spend time learning how the CSS property you are using works. You just need to connect the package and choose the shadow number you like from the collection.

Package tested with Vue CLI and Nuxt.js. You can see examples in the repository. I will also welcome your wishes, which you can share in the repository discussions.

I'm a bit nervous and I hope you rate the repository and find it useful to you.

Vuetify use CSS Grid classes

Andrej Sharapov — Tue, 08 Mar 2022 01:14:21 +0000

Unfortunately Vuetify.js still doesn’t use css grid, and from what I’ve found online on the topic, there’s only this issue, which was closed for inactivity.

I want to offer this styles to anyone who wants to work with vuetify.js and grid CSS together. It may seem complicated and confusing, but if you follow the instructions, you will succeed.

Step 1: Add CSS Grid classes

You can add the styles file to the folder from which they will be used. I am using nuxt so my file location is ~/assets/sass/extends/css-grid.sass.

/**
 *
 * Display Grid
 *
 */

.d-grid
  display: grid

.d-inline-grid
  display: inline-grid

/**
 *
 * Grid Template Columns
 *
 */

.grid-cols-0
  grid-template-columns: none

@for $gtc from 1 through 12
  .grid-cols-#{$gtc}
    grid-template-columns: repeat(#{$gtc}, minmax(0, 1fr))

/**
 *
 * Grid Column
 *
 */

.col-auto
  grid-column: auto

@for $gc from 1 through 12
  .col-span-#{$gc}
    grid-column: span #{$gc} / span #{$gc}

/**
 *
 * Grid Column Start
 *
 */

.col-start-auto
  grid-column-start: auto

@for $gcs from 1 through 13
  .col-start-#{$gcs}
    grid-column-start: #{$gcs}

/**
 *
 * Grid Column End
 *
 */

.col-end-auto
  grid-column-end: auto

@for $gce from 1 through 13
  .col-end-#{$gce}
    grid-column-end: #{$gce}

/**
 *
 * Grid Template Rows
 *
 */

.grid-rows-0
  grid-template-rows: none

@for $gtr from 1 through 6
  .grid-rows-#{$gtr}
    grid-template-rows: repeat(#{$gtr}, minmax(0, 1fr))

/**
 *
 * Grid Row Span
 *
 */

.row-auto
  grid-row: auto

@for $gr from 1 through 6
  .row-span-#{$gr}
    grid-row: span #{$gr} / span #{$gr}

/**
 *
 * Grid Row Start
 *
 */

.row-start-auto
  grid-row-start: auto

@for $grs from 1 through 7
  .row-start-#{$grs}
    grid-row-start: #{$grs}

/**
 *
 * Grid Row End
 *
 */

.row-end-auto
  grid-row-end: auto

@for $gre from 1 through 7
  .row-end-#{$gre}
    grid-row-end: #{$gre}

/**
 *
 * Grid Auto Columns
 *
 */

.auto-cols-auto
  grid-auto-columns: auto

.auto-cols-min
  grid-auto-columns: min-content

.auto-cols-max
  grid-auto-columns: max-content

.auto-cols-fr
  grid-auto-columns: minmax(0, 1fr)

/**
 *
 * Grid Auto Rows
 *
 */

.auto-rows-auto
  grid-auto-rows: auto

.auto-rows-min
  grid-auto-rows: min-content

.auto-rows-max
  grid-auto-rows: max-content

.auto-rows-fr
  grid-auto-rows: minmax(0, 1fr)

/**
 *
 * Grid Auto Flow
 *
 */

.grid-flow-col
  grid-auto-flow: column

.grid-flow-col-dense
  grid-auto-flow: column dense

.grid-flow-row
  grid-auto-flow: row

.grid-flow-row-dense
  grid-auto-flow: row dense

/**
 *
 * Grid Gap
 *
 */

.gap-0
  gap: 0px

.gap-x-0
  column-gap: 0px

.gap-y-0
  row-gap: 0px

$gap: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96

@each $g in $gap
  .gap-#{$g}
    gap: calc(#{$g} * 0.25rem)

@each $cg in $gap
  .gap-x-#{$cg}
    column-gap: calc(#{$cg} * 0.25rem)

@each $rg in $gap
  .gap-y-#{$rg}
    row-gap: calc(#{$rg} * 0.25rem)

Step 2: Variables

If you want media queries to work for you the same way they do for other classes like -md- or -lg-, then the first thing you need to do is defined breakpoints in your variables file. For Vue CLI this ~/sass/variables.scss.

// details https://vuetifyjs.com/en/features/breakpoints/#thresholds

$grid-breakpoints: (
  'xs': 0,
  'sm': 600px,
  'md': 960px,
  'lg': 1264px,
  'xl': 1904px,
);

Step 3: Media queries

Next, you need to add the mixin to the very top of the vuetify-css-grid.sass file you’ve already created.

/*=====  Start of Grid CSS  ======*/

@mixin mq($breakpoint)
  @if map-has-key($grid-breakpoints, $breakpoint)
    @media (min-width: #{map-get($grid-breakpoints, $breakpoint)})
      @if $breakpoint != xs

        .d-#{$breakpoint}-grid
          display: grid !important

        .d-#{$breakpoint}-inline-grid
          display: inline-grid !important

        @for $gtc from 1 through 12
          .grid-cols-#{$breakpoint}-#{$gtc}
            grid-template-columns: repeat(#{$gtc}, minmax(0, 1fr))

        @for $gc from 1 through 12
          .col-span-#{$breakpoint}-#{$gc}
            grid-column: span #{$gc} / span #{$gc}

        @for $gcs from 1 through 13
          .col-start-#{$breakpoint}-#{$gcs}
            grid-column-start: #{$gcs}

        @for $gce from 1 through 13
          .col-end-#{$breakpoint}-#{$gce}
            grid-column-end: #{$gce}

        @for $gtr from 1 through 6
          .grid-rows-#{$breakpoint}-#{$gtr}
            grid-template-rows: repeat(#{$gtr}, minmax(0, 1fr))

        @for $gr from 1 through 6
          .row-span-#{$breakpoint}-#{$gr}
            grid-row: span #{$gr} / span #{$gr}

        @for $grs from 1 through 7
          .row-start-#{$breakpoint}-#{$grs}
            grid-row-start: #{$grs}

        @for $gre from 1 through 7
          .row-end-#{$breakpoint}-#{$gre}
            grid-row-end: #{$gre}

        @each $g in $gap
          .gap-#{$breakpoint}-#{$g}
            gap: calc(#{$g} * 0.25rem)

        @each $cg in $gap
          .gap-x-#{$breakpoint}-#{$cg}
            column-gap: calc(#{$cg} * 0.25rem)

        @each $rg in $gap
          .gap-y-#{$breakpoint}-#{$rg}
            row-gap: calc(#{$rg} * 0.25rem)

Tests

To make sure queries work as expected, try adding this mixin to your application’s main class. Since I’m using nuxt, I’ve added requests to the v-main of my app.

@mixin bg($breakpoint)
  @if map-has-key($grid-breakpoints, $breakpoint)
    @media (min-width: #{map-get($grid-breakpoints, $breakpoint)})
      @content

.v-main
  @include bg(xs)
    background: #fc5f5f !important
  @include bg(sm)
    background: #fcf05f !important
  @include bg(md)
    background: #90e89f !important
  @include bg(lg)
    background: #909be8 !important
  @include bg(xl)
    background: #ce90e8 !important

Step 4: What to use

Then, at the very bottom, add the breakpoints you will use.

@include mq(sm)
@include mq(md)
@include mq(lg)
// @include mq(xl)

/*=====  End of Grid CSS  ======*/

To disable unnecessary queries, comment out excess lines.

Nuxt

If you’re using nuxt like I am, you can add styles to the nuxt.config file.

export default {
  css: [
    { src: '~/assets/sass/extends/vuetify-css-grid', lang: 'sass' },
  ],
}

It really works. To verify this, you can look at the code on github or look across the console on the site (index page, screen #1).

Forem: Andrej Sharapov