Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time πŸ™‚.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

CSSComb for nowadays SASS

i work for a long time now with a tool called CSSComb that allows me to order my CSS declarations in a content centric way - like this https://gist.github.com/awkale/ad46e2ade70e833fa178 Sadly over the years the maintainer of the project: https://github.com/csscomb There is stylelint, prettier and many other tools out there but nothing that works like CSSComb. ...

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

class MyCanvas extends HTMLCanvasElement is obviously out of the question, but there's surely some hacky stuff we can do with .prototype. I can't figure it out though, at least not in such a way that TypeScript will agree with me. The general idea I'm thinking of is;...

How can I align some paragraphs to start at the centered title's starting point

I am working on this the whole day, still can't manage to do it. The problem is I have titles in my cards centered, and I want the paragraphs to start at the starting point of the title. I would really appreciate some help.

flow

Hi Gays, I found this code but I don't know what it does : ```css .flow > *:where(:not(:first-child)) { margin-top: var(--flow-spacer, 1em);...

how do i get input values inputted into input field 'in real-time' and use the input values?

here's code i've tried: ```tipButtons.forEach(tipButton => { tipButton.addEventListener('click', (e) => { ...

How can I create gap between text & text-decoration underline?

Here I want 10px gap between text & underline. I can not use border-bottom; need to keep the underline part of the anchor tag for my project.
<a href="#" target="_blank" style="color:#000001; text-decoration:underline;">Link</a>
<a href="#" target="_blank" style="color:#000001; text-decoration:underline;">Link</a>
...

make input field expand vertically

hi, i want to make my input field expand vertically when the text overflows, i attached a quick video snippet to show you what i mean

Grid Layout Query

Hi guys! I am working on this Frontend Mentor design and decided to make some grid decisions beforehand. I didn't want to use position absolute so decided to overlaying arrow buttons and navbar using grid. I ended up dividing the layout in 10 columns and 10 rows based on the size of arrow buttons. Is this approach a good idea?...

text alignment problem

i have this design but the problem is text is not aligning properly

What is the typographic scale ratio used in tailwind font sizes?

What is the typographic scale ratio used in tailwind font sizes?

How can i start getting clients as a Front End Developer?

How can i start getting clients as a Front End Developer? Like what app / website should i use?

Inheriting a clickable area

Hi all, I have an issue… I want to find a way in CSS to inherit a clickable area from a parent. I have a text link inside what should be a button although the only clickable area is the text. ...

need help in highlighting an div when it clicked

hey folks this is my jsx ```jsx <Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}> <Box className={styles.pluginButtons}>All Plugins</Box> <Box className={styles.pluginButtons}>Popular Plugins</Box>...

Accessing child properties when calling a function from its parent

So I've a Shape parent class and a Circle child class. The child class calls the parent's constructor with super, which then callsgenerateMarkup - a function all children have. Problem is this function uses an instance variable in the child class, and this appear not to have been set yet....

Can't get flexbox to do anything

My biggest issue when working with css is trying to get the selectors to actually target what they're suppose to. In this case, I can't get the flex display to do flex-end in the upper right hand corner and I need to make the svg white. Any thoughts on what im doing wrong? https://codepen.io/MD-2016/pen/KKBwaXy...

How to recreate this resize handle in CSS?

I got this design for a resize handle (in black), and I'm wondering how I can re-create it with CSS. Note that the outline is curved in all ends. Any help would be appreciated. ...

Image wont float to right

```.img{ margin-top: 5%; width: 360px; height: 400px; float: right;...

Complex HTML setup and layout question

Hello, I'm working on a more complex layout for a website (see added sketch image). It has topics, and those topics have different articles you can read. I've been mulling over what would be a good approach to tackle this, and would like some thoughts on this. So I was thinking about putting the topics in a list, and those topic articles in their own list. So a list in a list. The topics would be anchor tags. I don't know if this is a handy way to tackle this. The other thing I was thinking about, is how those anchor tags would work. Is it a good idea to make separate new HTML pages for each topic/article? Or better to have them stacked on top of each other in one HTML file, and then have a display none/JS button combo? Would iframes work too? Or is that more for bringing in websites outside of the one you're on? Would love to hear some thoughts on this, thanks in advance!...

Hamburger ICON issue

I have a hamburger icon svg, it should toggle the navigation on/off, and my problem is when anyone loads the page they have to click on it 2 times to see the navigation items. The first click on it doesn't toggle the navigation.

why does innerHTML return number as NaN?

here's my code: ```const bill = document.getElementById('bill'); const billAmount = parseFloat(bill.value); const numOfPeople = document.getElementById('numberOfPeople');...