I believe we need a thread dedicated to layouts 
I’m hoping this will be a place where people who are designing their own layouts, or even just tweaking the defaults, can ask questions and find answers about how to do specific things with their card layouts, or discuss different design approaches from a pedagogical viewpoint.
Perhaps the latter actually needs a separate thread 
well, whatever, I can always make more…
Mostly I’m creating this thread because I have questions, hehehe…
Cool idea! I’ll be glad to help with any questions :>
I recently made new default layouts for Kitsun which make use of css grid. I’d recommend everyone who’s a bit familiar with css to take a look since it’s great for creating responsive layouts that fit the screen.
Oh, interesting! How does that compare to using things like flexbox (which is literally the only thing I have experience with in CSS 
)? You don’t have to get embroiled in a discussion of different CSS design approaches right now if you don’t have time 
That said, I figure this is a good opportunity to show a very early (and by now outdated) prototype of what I’ve been working on as well:
(check it enlarged to actually see what’s happening )
Do not look at the styling, the end product won’t look anything like this! But anyways, I wanted to create a way for users to easily create any layouts that they might want without any coding. Each cell has a button which you can click to split the cell either horizontally or vertically. Clicking on a cell will also allow you to make it larger or smaller relative to its “neighbours”.
After creating the basic layout, you’d be able to drag and drop preset elements (e.g. text, input fields) into the cells and adjust basic settings like text color, background color/img, borders and such.
By now the prototype is better than what you see in the video above in terms of styling and functionality tweaks. I hope to have some time to resume working on this in the near future 
THIS IS INCREDIBLE I LOVE
Glad to have given you an excuse to showcase it too 
Flexbox is great, but I find css grid to be even easier and more logical to think about, as you can literally divide the screen into a X by X grid like this:
.wrapper{
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
'b b b b b b'
'a a a a a a'
'a a a a a a'
'c c c c c c' ;
}
and assign a specific Div to be “b” so it takes up the full top row of the screen automatically and so forth.
@hinekidori is also super enthusiastic about css grid, and was the first one to implement it in their layouts on Kitsun That said, this is the perfect thread for you hine
Glad you like it hehe
Okay, my first actual question…
At the moment my cards automatically display quite a lot of information on the back when you answer a review. I’d like to make it so that this information is only automatically displayed if you get the answer wrong (or if you click a button to display more, but that’s for my next question ).
I can see from the Guide that it’s possible to use IF queries to determine whether or not a particular part of the HTML is generated/displayed. From what I can understand, this seems to be restricted to querying whether a particular template field contains a value or not for that card though.
Is there any way to control the behaviour based on correct/incorrect answers? I can see from my own layout that ‘typeans’ has both ‘correct’ and ‘wrong’ classes…
I realise that I could just use the ‘display more’ approach regardless of whether somebody answers correctly or incorrectly, but I’d like the increased speed this would bring to users, and even if I ultimately go for a different approach it would just be interesting to know whether I can style the card differently for correct/incorrect answers. If not, then I guess I’ll be using the ‘display more’ button!
Correct, this is only for things like showing either a katakana input or a hiragana input based on the values of a card.
You should be able to hide elements based on the “correct_card” “wrong_card” classes on the wrapper.
So something like this should work:
.wrong_card{
.divtoshow{
display: block;
}
}
You can combine it with the classes for lessons/quiz/reviews/back/front etc as well if you want to get super fancy ^^
Sweet, thank you!
I do, I do, haha 
Just to piggyback off of the usage of flex vs grid. My understanding is they are at their most effective when used together. There are times when flex is preferable to grid. It can be really useful when working with content in a specific grid cel.
So you would use grid to define your overall layout, and then flex to tell items how to behave within their domains?
For the most part yes. But it depends if you need one dimensional vs two dimensional mobility. Flex is still the best choice for one dimension.But there are cases where you may want to place a grid within a grid. I haven’t messed with that yet. Too scared. 
The new defaults have a grid within a grid (which became useless in the end). But every cell inside it uses flex for centering/wrapping the content inside it. So yeah, I totally agree on using both at the same time for maximum effectiveness
I also wanted to add a button for more info and lifted some code from the old Kitsun templates (using classes expand_button and expand_content), but I fear that this is not really expected and might disappear soon
I request a spoiler tag \o/
Not that I’ll create decks with it… But imagine having spoiler tags on EN translations… wink wink no checking EN first muahahah
This functionality is fully supported! (Just not documented yet)
I’ve been talking with @hinekidori about having a toggle as well, where you would be able to switch from value A to B.
Aside from that I’d also like to implement cloze functionality soon (so pretty much like a spoiler tag @jprspereira )
Ca I ask here questions about how to creat templates in Anki as well? xD
I think Anki is just a stripped down browser, so everything should apply there as well, minus browser features that are not available there.
There are some Anki experts here, anyway
I made a handful of tutorials for some basic Anki styling on YouTube way back when. You can start there if you like and ask any questions. I will answer what I can.