A modern programming language that makes developers happier.

kotlinlang

Hey team! need help! i need to create a UI like a List of Users. Which componente should i use? a Columns and Row inside?

also im not good at design an css styles? where i can learn more? thanks

If you want a vertical layout, go with `Column`. If you want a horizontal layout, `Row` should be your go-to. So I think you have the right idea there.

As an Android engineer, I also am on the CSS learning curve.  This has been a good resource for me: <https://www.w3schools.com/>

but keep in mind that there is no LazyColumn yet. So depending on how much data you have you need to consider pagination and probably splitting the data.

There is already a prototype implementation for a web LazyColumn here <https://gitlab.com/opensavvy/ui/compose-lazy-html> , but it currently has some recomposition bugs. (<#C078Z1QRHL3|opensavvy>)

also for css/js/html docs prefer <https://developer.mozilla.org/en-US/|mdn>

(<@UFGCACPE0> FYI re: your lazy column implementation project, see <@U02RTVCF717>’s comment if you weren't aware)

<@U06K67D0JTU> in general I would start getting in the habit of trying to figure out how things work in the web world, as in googling "html css list of elements" and looking at some of the results to see if any look good to you

That being said, `Row` and `Column` Kobweb primitives can be pretty good for this.

This page: <https://bitspittle.dev/blog/>
is implemented using Column:

Relevant code #1: <https://github.com/bitspittle/bitspittle.dev/blob/1e5bcb1331fcfd896c5a9896216ed5377d45d738/site/build.gradle.kts#L122>

Relevant code #2:
<https://github.com/bitspittle/bitspittle.dev/blob/1e5bcb1331fcfd896c5a9896216ed5377d45d738/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt#L75|https://github.com/bitspittle/bitspittle.dev/blob/1e5bcb1331fcfd896c5a9896216ed537[…]ain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt>

is Any way to convert for example Css code into kobweb style. For example: i have this CSS styile:
```&lt;style&gt;
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
&lt;/style&gt;```

how do i know this `td`  or `th` thing to use in a modifier

yes there is! <https://opletter.github.io/css2kobweb/>

That looks like a really useful tool, <@U02RTVCF717>

&gt;  how do i know this `td`  or `th` thing to use in a modifier
Generally looks something like this:

```val CustomerTableStyle = CssStyle {
  cssRule("td") { ... }
  cssRule("th") { ... }
  cssRule("tr:hover") { ... }
}

Table(CustomerTableStyle.toAttrs() {
  ...
}```
