Giter Site home page Giter Site logo

Layout primitives about polylux HOT 11 CLOSED

kaarmu avatar kaarmu commented on May 20, 2024
Layout primitives

from polylux.

Comments (11)

andreasKroepelin avatar andreasKroepelin commented on May 20, 2024

So you like this side by side content? I feel like this is covered by Typst builtins. For the title, that should be handled by the theme. Did you have anything else in mind?

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

It is fairly easy to build this sort of stuff with the builtins but I think side-by-side, title-body, etc. are layouts that are common for slides regardless of theme and it would be nice to have commands that you can call to just immediately get those layouts without colors, banners and more. What I find nice with PP/Google Slides is that you can very easily draft up something and group content like this. Then if I want to style it I can apply a proper theme on top of it or do the styling myself.

from polylux.

andreasKroepelin avatar andreasKroepelin commented on May 20, 2024

I think what you are proposing is rather that the default theme is less "opinionated"? So it looks more like the document you linked to above? We could discuss that.

Because right now, if you do "nothing", you get some colours and decoration by the default theme.

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

That's one way to look at it. I do like that typst-slides have one/many opinionated themes. It's just that I want to be able to control the content layout separately as well.

from polylux.

andreasKroepelin avatar andreasKroepelin commented on May 20, 2024

Maybe I don't fully understand what kind of layout controlling you want, yet. If it's "just" this side-by-side thing, then i suggest using #grid or #columns from Typst.

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

Yea, that's what I'm already doing. But I think there is something to be said about having slide-specific commands. The side-by-side layout is trivial but very common. So, my argument is that it's more comfortable to have something like

#let two-col(..options, left, right) = grid(columns: (1fr, 1fr),
  block(inset: .5cm, left),
  block(inset: .5cm, right),
)

where options are relevant, and have defaults, specifically for slides (but no theming with colors etc.).

There is a fine line between this and, as you said before, having the default theme less opinionated. I think what I'm looking for is something where I build my own theme on top of this. I really like #new-section and #slide but I don't want them to enforce how the content should look and flow. Same thing goes for the title page. I don't want to be forced to use a specific title page, I just want it to be a normal slide I add and then I apply a title-page layout on that.

In the end it would be cool to be able to compose layouts and build/style themes on top of these slide-specific "primitives", if you understand me better now?

from polylux.

andreasKroepelin avatar andreasKroepelin commented on May 20, 2024

Would something along these lines help you?
https://andreaskroepelin.github.io/typst-slides/book/themes.html#per-slide-escape-hatch

And then we could maybe provide a "theme tool box" containing those primitives. You are right that there are many repeating elements in theme creation. A bit of thought would have to go into good abstractions there.

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

Oh, I didn't see that feature! But yes, I agree. Here's a slightly better example of what I'm thinking...

// some primitives like this one provided by toolbox 
#let side-by-side(body) = {
  show: block.with(height: 80%, stroke: 1pt + luma(200))
  show: columns.with(2, gutter: .5cm)
  body
}

// written by user or theme-author
#let special-slide(
  layout: side-by-side,
  ..args,
) = {
  // here `special-slide` could do more theming etc.

  // `slide` is only a non-opinionated canvas that enable
  // typst-slide features like dynamic content
  slide(layout: layout, ..args)
}

#special-slide[
  #lorem(20)

  #lorem(20)

  #lorem(20)

  #lorem(20)
]

Layout primitives could be simple show-rules, but again, specially suited for slides and ready to use from the get-go. Maybe the toolbox/package can include ways of marking the content, like your pause, for certain layout placement or similar use.

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

This update is mostly for history.

Here's an even more involved example. Things to take note of:

  • I've recreated some uni slides, it does not have multiple themes but there is different layouts.
  • They are mainly for exploring API design and what abstractions are suitable.
  • I've taken out some parts of typst-slides which should remain (e.g. some styling etc).
  • I'm interested in ease-of-use for two perspectives, theme author and end-user.

https://github.com/kaarmu/typst-slides/tree/dev.

from polylux.

drupol avatar drupol commented on May 20, 2024

Cool ! I've also did a theme for the university, find it here: #21

I tried to create it as modular as possible, feel free to pick ideas and/or suggest improvements!

from polylux.

kaarmu avatar kaarmu commented on May 20, 2024

Nice theme @drupol, looks very beamer-esque! It would be cool to collect a few more official templates and recreate them (like I did for my university).

Do you have any thoughts after implementing it? In this issue I wanted to hear thoughts on the things I listed before. I haven't made very many or very complicated slides in Typst, yet, so if you have any insights I'd love to hear more.

from polylux.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.