clevermissfox
clevermissfox
KPCKevin Powell - Community
Created by clevermissfox on 6/15/2024 in #front-end
Grid help
https://codepen.io/Miss-Fox/pen/wvbpdRd relevant styles in ' @layer help' So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size. How to i make my columns the size i want them to be until they start running out of room? if i give my parent grid .wrap a width of 100%, then the children use the max 1fr and grow to fill the screen.
33 replies
KPCKevin Powell - Community
Created by clevermissfox on 6/7/2024 in #front-end
not -solved: ClipPath
Problem One: Why doesnt my clip-path on the pseudo element in the top right corner look the same as the hotpink svg with the same path ? the circle cutout isnt in the middle and its squished. https://codepen.io/Miss-Fox/pen/abrwMjq?editors=1100 Problem One Solution had to convert the clip-path to a relative path with this site https://yoksel.github.io/relative-clip-path/ Problem Two: If I declare overflow hidden or clip on the label element , everything breaks?? The clip-path on the pseudo element no longer is applied
9 replies
KPCKevin Powell - Community
Created by clevermissfox on 6/5/2024 in #front-end
Theme-Toggle: Filter? BG Blend? Mix-Blend?
Hi everyone. I'm trying to use this theme toggle so that i have the little circle that shows which option is toggled on. Im wondering if there is a way to use blend modes or filters (or masks maybe?) so that only the item that the circle is over has saturation. Doesnt have to be a pseudo element, and the internal icons (the logos) dont have to be bg images. https://codepen.io/Ceecee-Hart/pen/VwObNQe?editors=1100
20 replies
KPCKevin Powell - Community
Created by clevermissfox on 6/1/2024 in #front-end
component scoped private props
No description
18 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/28/2024 in #front-end
html input behaviour
i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something) like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better.
12 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/27/2024 in #front-end
Using Vite with SCSS
So i was advised to try scss with vite instead of just using node as i was getting errors. What i did was: -create new folder on desktop and open it in vs code - use the cmd npm create vite@latest -Selected Vanilla JS framework -Selected Vanilla JS variant -used the cmds as instructed cd vite-project-2, npm install, npm run dev -then the cmd npm i -D sass which is now showing in my devDependancies where do i go next? this is where i got stuck with node when i would: -create src/scss/main.scss in the root - added some basic styles to the main.scss file -in the terminal, typed sass --watch src/scss:dist/css everytime i would get the error The term 'sass' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again even though sass (and the compatible version) was shown as a devDependancy. I thought maybe it had something to do with chocolately, perhaps needing to install with choco on this machine as when i first installed node, the version was def installed as verified with the command prompt but anytime i went into vs code , it said it wasnt. i had to install Chocolatey to get Node and NPM to work. but i digress. what are the next steps to try for this vite/sass file ? do i do the same thing e.g create src/scss/main.scss and use the --watch cmd?
112 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/22/2024 in #front-end
Grid-template-columns: auto-fit... but what of grid-template-rows?
In this example, I happily used grid-template-columns: repeat(auto-fit, etc); these buttons are actually ul>li > buttons. I did discover when tabbing through that the button was being focused on within the li so different sizes etc. (if you tab through the codepen when it opens youll see what i mean) I know this could be easily solved taking off the button:focus outline and instead moving it to the li with li:focus-within. However, i am curious about how to solve this in the use case where i have : --parent grid set to grid-template-columns: repeat(auto-fit) --button set to absolute, inset: 0, with li as position: relative; --parent grid ROWs set to....? obviously as the button becomes absolute, the lis collapse in height as there is no content within to define that space. I thought, no problem, i will set the grid-rows. But when i began to, i had no idea what values to set. As the columns are set to auto-fit, the rows have to be dynamic so they cant be set explicitly (unless isnt there a trick to set them to 99 or something more than ill need? or that may only apply to rows with "content" that will take up space?) ; i could give the li's the block-padding i need but it still is looking so tall ... tried grid-template-rows: repeat(auto-fit, minmax(calc(1lh + 0.5em), 1fr)) ; as well as auto-fill ; both defined the first row but nothing after that. So how do i set the rows count to expand as they are needed depending on the columns value? I know I could do so with a custom property and JavaScript , just wondering what ppl do in css when they have a template columns of auto-fit but still need to define template-rows? https://codepen.io/Miss-Fox/pen/oNOJgKe?editors=0100 default styles are applied, but at the very bottom of the css are the selectors and properties ive mentioned here to easily toggle on
9 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/10/2024 in #front-end
Can i get this shape with gradients on one element?
https://codepen.io/Miss-Fox/pen/MWRGMZe (this pen has changed, didnt mean to overwirte it) trying to use one background property with gradients sans the pseudo element. Breaking my brain because i need one gradient to go to the right to have that break on top and seemingly one to go to the bottom to get the solid bottom border. Right now i have the bottom border as a pseudo element but i'm curious if it can be achieved all on the .box background property?
63 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/10/2024 in #front-end
Stacking Context Q- Backdrop Filter
How do i fix it so the ::before element is behind the card again while still applying the blur filter? https://codepen.io/Miss-Fox/pen/BaExrPe
7 replies
KPCKevin Powell - Community
Created by clevermissfox on 4/2/2024 in #front-end
minFn confusion
No description
73 replies
KPCKevin Powell - Community
Created by clevermissfox on 3/31/2024 in #front-end
Repeating-Linear-Gradient
No description
10 replies
KPCKevin Powell - Community
Created by clevermissfox on 3/22/2024 in #front-end
attribute values in custom props?
So since we can do content: attr(data-value), I’m curious if there’s a way to store the value of attributes within custom properties ? Can I do something like —_value: attr(data-value)? Will it look for an attribute of [data-value] on the element I use it on ?
8 replies
KPCKevin Powell - Community
Created by clevermissfox on 3/4/2024 in #front-end
aria-current or aria-selected ?
No description
6 replies
KPCKevin Powell - Community
Created by clevermissfox on 2/23/2024 in #front-end
Updating @property with JS for animation on load
https://codepen.io/Miss-Fox/pen/BabgmjK?editors=0110 hopefully the video explains better with the visuals than i can type out but basically i am trying to update the :root custom property so that its value is equal to the respective javascript variable (days, hours, minutes) and then update that on each "box" class of '.option' so that the angle on that box matches (if days is 24, angle is 24). Its actually written as a percent not an angle but im not sure if that matters here? Elements involved: +@property for dark-grade-angle, dark-grade-day, dark-grade-min; + --clr-bg-options has the conic gradient with the custom property as the angle/percentage +.options is the class name of each box +"angle" is the name of the @keyframes animation thats being triggered in the root. +in the javascript are the variables "days", "hours", "minutes" that have the values i want to update each option to. let me know if theres any clarification needed
7 replies
KPCKevin Powell - Community
Created by clevermissfox on 2/21/2024 in #front-end
nested :is() selector
what am i missing with this selector
& :is(>:nth-child(1)){
background: turquoise;
}
& :is(>:nth-child(1)){
background: turquoise;
}
but this works
& >:nth-child(1) {
grid-column: 1;
grid-row: 3;
}
& >:nth-child(1) {
grid-column: 1;
grid-row: 3;
}
``` & :is(:nth-child(1)) { grid-column: 1; grid-row: 3; } ```` have also tried &:is(>:nth-child(1)) {...} &:is(> :nth-child(1)) {...} &:is(>:first-child) {...}` and a few more. here is the example . i know im just missing a space or something. but goal is how to get direct-child:nth child(n) while using :is() and nesting "&" in the media-query around CSS line 440 https://codepen.io/Miss-Fox/pen/qBvGEGp?editors=1100. Is this an issue with the selectore or specificty or.....?
13 replies
KPCKevin Powell - Community
Created by clevermissfox on 1/24/2024 in #front-end
custom cursor effect
Someone posted this awhile ago asking about the custom cursor (I think it’s only visible on desktop) and I’m trying to figure out how these hover effects work. From what I can tell the button has its hover effect and on hover the custom cursor is transparent so it just looks like the cursor is becoming the hover state. Anyone else have any thoughts on this ? The timing seems a little tricky on when the cursor goes transparent and how it’s animated out and in. It’s a site for accessibility so would be ironic if so but any issues with this kind of effect being inaccessible for those using assistive technology? https://design.google/library/designing-global-accessibility-part-1
10 replies
KPCKevin Powell - Community
Created by clevermissfox on 1/20/2024 in #front-end
Margin/Justified issues
https://codepen.io/Miss-Fox/pen/NWJgRjB?editors=0100 So I'm trying to emulate a swipe so that if one of these ".item"'s has focus, its translated over to show the user the very end of the list. I am up to my neck into margins and "justify-content" "justify items" "justify self" and for the life of me cannot figure out how to fix it. I want the behaviour of
.items-list {
justify-content: end;
]
.items-list {
justify-content: end;
]
but only on the one item that has focus. I tried some hacky transform: translate solutions but i know theres a proper way to accomplish this I just cannot figure out where im going wrong.
5 replies
KPCKevin Powell - Community
Created by clevermissfox on 1/10/2024 in #resources
Where do you get your favourite free SVGs?
Looking specifically where you can copy the svg from the site vs downloading the file. Not just UI icons but fun svgs too!! To share, icons8.com is a great one, although only a few libraries where you can get the SVG for free/copy it directly. they do provide free pngs of the icons if thats okay for your project, and host it on a cdn link so you dont have to host it yourself.
15 replies
KPCKevin Powell - Community
Created by clevermissfox on 12/22/2023 in #front-end
A11y masters....help
I have an accordion element
<div class="accordion-wrap">
<button class="accordion-btn row ai-cen jc-sb gap-2" aria-controls="accordion-content-1" aria-expanded="true">
<h3>When will my order ship?</h3>
<i class="fa-light fa-xmark"></i>
</button>
<div class="accordion-content" id="accordion-content-1">

<p>Orders typically ship within 1-2 business days. During peak holiday season, please allow up to 3
business days for processing and shipping. You will receive an email notification with tracking
information once your order has shipped.</p>
</div>
</div>
<div class="accordion-wrap">
<button class="accordion-btn row ai-cen jc-sb gap-2" aria-controls="accordion-content-1" aria-expanded="true">
<h3>When will my order ship?</h3>
<i class="fa-light fa-xmark"></i>
</button>
<div class="accordion-content" id="accordion-content-1">

<p>Orders typically ship within 1-2 business days. During peak holiday season, please allow up to 3
business days for processing and shipping. You will receive an email notification with tracking
information once your order has shipped.</p>
</div>
</div>
is this the correct way to use aria-controls and aria-expanded? And then in javascript, just toggle the aria-expanded attr? The article i read said when aria-controls is set and aria-expanded="false" there will be a hidden attribute on the element it controls but im not seeing that in dev tools on #accordion-content-1 While i have you, what is the correct aria attr for close buttons? Would it be an aria controls for the parent element?
<div class="parent"
id="parent">
<button type="button" data-close aria-controls="parent">X</button>
<div>
<p>Some Content</p>
</div>
</div>
<div class="parent"
id="parent">
<button type="button" data-close aria-controls="parent">X</button>
<div>
<p>Some Content</p>
</div>
</div>
5 replies
KPCKevin Powell - Community
Created by clevermissfox on 12/17/2023 in #front-end
pseudo element thickness varies
So while hovering these links on windows OS and in chrome, the thickness of the pseudo element on the anchor tag hover state varies. It doesn’t seem to depend on the order, sometimes it’s the first, sometimes the last, sometimes first and last, sometimes the middle, sometimes first two etc. cannot find any pattern and on Firefox or on Mac in chrome, they all look to be the same thickness. Photo of how I see it on windows/chrome https://imgur.com/vmg4cXD Here’s the code https://scrimba.com/scrim/cgwPaGf4
8 replies