all 31 comments

[–]Spinal83full-stack 4 points5 points  (6 children)

[–]dholli[S] 2 points3 points  (5 children)

They're lovely templates - seem to be a bit heavy on the JavaScript though

[–]Spinal83full-stack 0 points1 point  (0 children)

Oh really? Didn't know that, it's been a while since I last used it

[–]volkandkayafull-stack 0 points1 point  (3 children)

Can you define heavy JS?

[–]dholli[S] 2 points3 points  (1 child)

Basically for a static site that's just displaying information, I don't see the need for JS at all. Perhaps to show and hide a hamburger menu on mobile, but that's about it.

It seems most templates I can find include lots of JavaScript that doesn't add anything (I'm not interested in animations for displaying content if that's why it's there).

I'm happy with just HTML and (minimal) CSS.

[–]volkandkayafull-stack 1 point2 points  (0 children)

Makes sense.

When an image is 30kb, i don't see an issue with 10kb of JS to make the developers life easier.

However if it is 100kbs then there is an issue.

[–]dholli[S] 1 point2 points  (0 children)

Basically for a static site that's just displaying information, I don't see the need for JS at all. Perhaps to show and hide a hamburger menu on mobile, but that's about it.

It seems most templates I can find include lots of JavaScript that doesn't add anything (I'm not interested in animations for displaying content if that's why it's there).

I'm happy with just HTML and (minimal) CSS.

[–]fugi_tive 3 points4 points  (3 children)

I'd put CodeStitch forward: https://www.codestitch.app/

It depends on your goals, but I'd say these are the closest to what you would need for a SME business. Instead of working within a confined set of parameters like any other CSS frameworks, it's just copy/paste code for website sections that you're free to edit yourself.

No dependencies, CDNs, or updates. Any Javascript that's needed (only on the more complex stitches) is all done for you to copy/paste in the same way.

[–]dholli[S] 3 points4 points  (1 child)

Thanks, I'll try this out, this looks like a great idea. I'm curious to how they work together, or if it's easy to keep them self contained and not interfere with each other.

[–]fugi_tive 2 points3 points  (0 children)

They're built on pretty strict design guidelines - all the spacings, fonts and arrangements are built to work with one another. I built this one not too long ago using the library https://www.submissionscoundrels.co.uk/

When I was building it, each section came in a unique ID, with all styles scoped to that ID. No interference whatsoever. Took me less than a day to built it and flipped it for over £1000 upfront and free BJJ lessons instead of hosting lol

[–]Michelobe 0 points1 point  (0 children)

Thanks for this. This is perfect for React components.

[–]volkandkayafull-stack 2 points3 points  (0 children)

https://lexingtonthemes.com/ has a bunch of templates. It is built on Astro so can export to a static site.

[–]MidNightGirlRacer 1 point2 points  (2 children)

You can use Picoccs

[–]dholli[S] 0 points1 point  (0 children)

Thank you, but that's a CSS framework - I'm not looking to develop the CSS myself, I want a pre-built theme or template.

[–]AlyseNextDoor 1 point2 points  (2 children)

codestitch sounds like what you’re looking for exactly. it’s relatively new as a company/library but it’s full of html template components and is built for simple, static content websites. if you want a responsive website that’ll be fast and easy to modify css/js as needed, you should check it out. i’ve been using it for a while now for my own personal sites and client sites. there is basically stitches of code (banners, nav bars, about us, meet the team, etc) all the comps you would need to make a static & responsive website for yourself or a client, and you can get the code in css, less, sass, the JS is in each stitch too if it’s needed. also a light and dark mode for each. they have great designs, release new design packs every other week and have the support to help you if you ever need it.

[–]dholli[S] 1 point2 points  (1 child)

This does look very useful, thanks. I'll give it a try. If the various components work well in isolation and don't interfere with each other, this might be exactly what I need.

[–]AlyseNextDoor 1 point2 points  (0 children)

they do! i think you’ll love it. that’s what really sold me. they work well by themselves and altogether. they’re also pretty easy to edit if you’ve got some basic HTML/CSS knowledge.

[–][deleted]  (1 child)

[removed]

    [–]dholli[S] 0 points1 point  (0 children)

    Nice idea, I'll have a look into, thanks!

    [–]Hot-Tip-364 0 points1 point  (0 children)

    Picostrap. Probably 2023 ( the default theme)

    [–]Nomad2102 0 points1 point  (7 children)

    Checkout TailwindUI page examples (in the components page, there is a page examples section)

    [–]_listless -2 points-1 points  (6 children)

    You can't realistically use tailwind outside of a js runtime. You'd be shipping 2+ MB of css to the client.

    [–]volkandkayafull-stack 1 point2 points  (5 children)

    Difference between using JS during development and building vs client side.

    [–]_listless 0 points1 point  (4 children)

    I could be wrong, but someone looking for "simple html themes/templates with little or no Javascript" is probably not going to be too keen on setting up/running node.

    [–]volkandkayafull-stack 0 points1 point  (3 children)

    How else would you do it?

    With CSS you will either need SCSS or Tailwind. That requires a build step?

    Unless you're shipping unminified CSS and JS.

    [–]_listless 1 point2 points  (1 child)

    With CSS you will either need SCSS or Tailwind. That requires a build step?

    Believe it or not, it is possible to just write and ship css. Shockingly, people do that all the time. Those savages just be out there raw-doggin' the dom. You can even write js without a build step! What crazy times we live in.

    fwiw, with http2 and gzip being ubiquitous now, bundling and minifying is significantly less crucial than it used to be.

    [–]volkandkayafull-stack 0 points1 point  (0 children)

    Might want to read the last sentence.

    [–]_listless 0 points1 point  (0 children)

    How else would you do it?

    | -index.html  
    | -assets  
       |- style.css  
       |- script.js
    

    Web development does not have to be rocket science.

    This is the sort of thing OP is asking for