C4rlos Posts - Answer Overflow

C4rlos

Posts Comments

KPCKevin Powell - Community

•Created by C4rlos on 8/31/2023 in #front-end

Part of page without container

7 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/27/2023 in #front-end

Color bar - how to approach styling this element?

1 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/19/2023 in #front-end

Vite build not resolved css ulr()

Just starting with vite and faced problem after build project. During development everything was ok but after deploying on GH I realized that my background is missing images. All my images used in HTML are visible beside background images from CSS. Any reason why is that? https://github.com/solracss/fem-social-proof-section

18 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/17/2023 in #front-end

BEM with nested elements

How would you name clasess in nested elements following BEM?

<div class="review">
    <div class="review__author">
        <img src="./img/image-colton.jpg" alt="Review author foto" class="review__author__img">
        <p class="review__author__data">Colton Smith<span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

<div class="review">
    <div class="review__author">
        <img src="./img/image-colton.jpg" alt="Review author foto" class="review__author__img">
        <p class="review__author__data">Colton Smith<span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

How to avoid xxx__yyy_zzz_www... snakes?

3 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/12/2023 in #front-end

Sass function to calc rem size - compilation error

Until today my function was working. Now I get compilation error

Compilation Error
Error: 2 arguments required, but only 1 was passed.

Compilation Error
Error: 2 arguments required, but only 1 was passed.

@use "sass:math";

@function rem($size) {
    $remSize: math.div($size, 16px);
    @return #{$remSize}rem;
}

.test {
  font-size: rem(24px)
}

@use "sass:math";

@function rem($size) {
    $remSize: math.div($size, 16px);
    @return #{$remSize}rem;
}

.test {
  font-size: rem(24px)
}

Any reason why?

1 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/8/2023 in #front-end

Bleeding background on border-radius

How can I prevent bleeding background on bottom corners? https://codepen.io/solracss/pen/oNQOJRp?editors=1100 Already tried - overflow: hidden - background-clip: padding-box; Only solution that works for me atm is to set different size of border, but's a dirty hack imo.

8 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/6/2023 in #front-end

Vite / scripts for running sass

Hi, after watching one of Kevin vid
https://www.youtube.com/watch?v=o4cECvhrBo8 I've decided I'll try approach to turn off all extensions and run npm to - autorefresh html - compile sass I've never used npm before but managed to write this:

{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"scripts": {
"watch:sass": "sass --watch --update --style=expanded --no-source-map sass:css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server --watch --files \"*/**\"",
"start": "npm-run-all --parallel watch serve"
},
"devDependencies": {
"browser-sync": "^2.29.3",
"npm-run-all": "^4.1.5",
"sass": "^1.64.2"
  }
}

{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"scripts": {
"watch:sass": "sass --watch --update --style=expanded --no-source-map sass:css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server --watch --files \"*/**\"",
"start": "npm-run-all --parallel watch serve"
},
"devDependencies": {
"browser-sync": "^2.29.3",
"npm-run-all": "^4.1.5",
"sass": "^1.64.2"
  }
}

worked perfectly fine but then I realized that mabe try vite to do the same and learn even more (f.e. how to deploy site). My site for training this: GH: https://github.com/solracss/vitedeploy Live: https://solracss.github.io/vitedeploy/ Could you please tell me if I did it correct? The site is running but maybe there are some fields to improve? ps: in package.json i added script "start" to comile scss for me to be able to watch css when doing projects.

1 replies

KPCKevin Powell - Community

•Created by C4rlos on 8/4/2023 in #os-and-tools

Format on save - two lines separated by comma

3 replies

KPCKevin Powell - Community

•Created by C4rlos on 7/27/2023 in #front-end

Convert css variables into sass

Hi, I'm learning sass and I was wondering how can I write this code in sass? --item-color is what gives me most trouble to write in sass. Taken from Kevin gh (https://github.com/kevin-powell/results-summary-component-main)

.summary-item {
  ...
  background-color: hsl(var(--item-color), .1);
}

.summary-item svg {
  stroke: hsl(var(--item-color));
}

.summary-item-title {
  color: hsl(var(--item-color));
} 

.summary-item[data-item-type="accent-1"] {
  --item-color: var(--clr-accent-1);
}
.summary-item[data-item-type="accent-2"] {
  --item-color: var(--clr-accent-2);
}
.summary-item[data-item-type="accent-3"] {
  --item-color: var(--clr-accent-3);
}
.summary-item[data-item-type="accent-4"] {
  --item-color: var(--clr-accent-4);
}

.summary-item {
  ...
  background-color: hsl(var(--item-color), .1);
}

.summary-item svg {
  stroke: hsl(var(--item-color));
}

.summary-item-title {
  color: hsl(var(--item-color));
} 

.summary-item[data-item-type="accent-1"] {
  --item-color: var(--clr-accent-1);
}
.summary-item[data-item-type="accent-2"] {
  --item-color: var(--clr-accent-2);
}
.summary-item[data-item-type="accent-3"] {
  --item-color: var(--clr-accent-3);
}
.summary-item[data-item-type="accent-4"] {
  --item-color: var(--clr-accent-4);
}

8 replies

Gaming

Programming