5 ms·

Show HN: Sakura - a minimal classless css theme. Just drop it in and done.

62 points by oxalorg 9y ago

oxalorg 9y ago
So I just released `v1.0.0` of my classless css theme "sakura" and thought I'd share it with you guys. What is it?: It's a set of default css styles applied directly to HTML elements without needing to use classes. Just drop in `sakura.css` to any webpage and go from ugly looking 1900's website/plain html sites to a pretty modern website in literally 0 seconds. No need to change HTML of the page. I made this to bootstrap small websites quickly without having to add a ton of classes from the regular css frameworks. Demo: https://oxal.org/projects/sakura/demo/ https://oxal.org/projects/sakura/demo/ (click on "toggle" on top of the page)
fiatjaf 9y ago
I like it. Shameless plug: https://github.com/websitesfortrello/classless https://github.com/websitesfortrello/classless
- corobo 9y ago
  Your forms show up a little broken[1] [1] https://i.imgsir.com/1kPY.png https://i.imgsir.com/1kPY.png
meagher 9y ago
Cool! First time I have heard of such a thing, but makes complete sense!
- oxalorg 9y ago
  Thanks. I'm glad you liked it ^_^
kbr 9y ago
I like how there are no classes, that's how I personally like CSS. Shameless plug: I'm the author of a similar library, with a minimal amount of classes, but it offers more functionality (a grid, components, navigation, etc). http://usewing.ml http://usewing.ml
- zmoreira 9y ago
  Looks nice.
- mattbgates 9y ago
  You changed it up a bit, but it is like a cousin to the Skeleton framework. Anyways, every project I do gets a new CSS framework just to keep things interesting for my users and myself... I don't use the same one twice. I'm particular in what and how I choose a user-interface, and this framework is definitely on my list.
  - kbr 9y ago
    Yup, Skeleton is the main inspiration, Wing just provides a bit more: it uses flexbox, has a minimal grid system (one class), and navigation + card components. I like the idea of not using the same CSS framework, it seems pretty cool, and you can quickly learn about which one suits you best. Glad to see Wing is on your list :D
    - mattbgates 9y ago
      It's all about learning new things... if I keep using the same one over and over, than I'm sure I'd be great at it, but its the same code. And every CSS framework has a unique look that offers something new and different. I also think it helps give the creators a bit more exposure too for their work and I'm sure it is just as exciting for you to see what kind of designs people come up with using your framework. I tend to love the "minimalistic" look of frameworks. KISS.
      - kbr 9y ago
        Yup, getting exposed to a variety of new things is great, you learn a lot, and have a lot of different styles. I agree, and thank you for helping creators get exposure for their work. I'm sure it makes their day when someone uses their framework, and it sure does for me :) Minimalistic frameworks FTW! I don't like the ones where there are a ton of classes to learn, or when they are complex (like ".o-s-c-3-4").
pause_break 9y ago
#4a4a4a... Why is off-black text on white backgrounds so popular with designers? Darken this and the whole theme becomes even easier on the eyes
- detaro 9y ago
  This and the button style (which to me don't look enough like buttons to be 100% clearly identifiable) would be my criticisms as well. Other than that it looks nice.
  - oxalorg 9y ago
    Thanks. Author here, could you please expand on which to me don't look enough like buttons Perhaps I could add some sort of 3d effect/animation on button:hover.
    - detaro 9y ago
      I just looked at the demo again and it is only the <input type=… buttons that (since they have no extra styling compared to the other inputs?) don't stand out enough, when I imagine the <button type=… ones next to a form they look fine. (I personally like a 3D-effect on buttons, but that's really a matter of taste and doesn't always fit the other elements)
- captainmuon 9y ago
  I think it's due to people not having really bright screens. If your screen is too dim, you need the background to be as white as possible. Another factor is that off-white can be percieved as dirty. Ideally, I'd prefer if off-white was the standard for backgrounds, and you could use bright white for highlights and more contrast in images. Or maybe 100% white should be the standard, and you have a screen that goes to 110% :-). Maybe one day when HDR screens become standard...
  - pause_break 9y ago
    Just to clarify: I'm talking about the font color being too light against a light background :O
mzehrer 9y ago
This follows the idea of the (now aged) W3C core styles : https://www.w3.org/StyleSheets/Core/Overview.html https://www.w3.org/StyleSheets/Core/Overview.html
jlebrech 9y ago
yes, this is how we should do things. we also need react components to make official HTML markup look modern without needing to add classes or wrap things with divs. also maybe extend inputs a bit, such as have a type='slider' for example.
wayn3 9y ago
I like it.

62 points by oxalorg 9y ago

So I just released `v1.0.0` of my classless css theme "sakura" and thought I'd share it with you guys. What is it?: It's a set of default css styles applied directly to HTML elements without needing to use classes. Just drop in `sakura.css` to any webpage and go from ugly looking 1900's website/plain html sites to a pretty modern website in literally 0 seconds. No need to change HTML of the page. I made this to bootstrap small websites quickly without having to add a ton of classes from the regular css frameworks. Demo: https://oxal.org/projects/sakura/demo/ https://oxal.org/projects/sakura/demo/ (click on "toggle" on top of the page)

fiatjaf 9y ago

I like it. Shameless plug: https://github.com/websitesfortrello/classless https://github.com/websitesfortrello/classless

corobo 9y ago
Your forms show up a little broken[1] [1] https://i.imgsir.com/1kPY.png https://i.imgsir.com/1kPY.png

meagher 9y ago

Cool! First time I have heard of such a thing, but makes complete sense!

oxalorg 9y ago
Thanks. I'm glad you liked it ^_^

kbr 9y ago

I like how there are no classes, that's how I personally like CSS. Shameless plug: I'm the author of a similar library, with a minimal amount of classes, but it offers more functionality (a grid, components, navigation, etc). http://usewing.ml http://usewing.ml

zmoreira 9y ago
Looks nice.
mattbgates 9y ago
You changed it up a bit, but it is like a cousin to the Skeleton framework. Anyways, every project I do gets a new CSS framework just to keep things interesting for my users and myself... I don't use the same one twice. I'm particular in what and how I choose a user-interface, and this framework is definitely on my list.
- kbr 9y ago
  Yup, Skeleton is the main inspiration, Wing just provides a bit more: it uses flexbox, has a minimal grid system (one class), and navigation + card components. I like the idea of not using the same CSS framework, it seems pretty cool, and you can quickly learn about which one suits you best. Glad to see Wing is on your list :D
  - mattbgates 9y ago
    It's all about learning new things... if I keep using the same one over and over, than I'm sure I'd be great at it, but its the same code. And every CSS framework has a unique look that offers something new and different. I also think it helps give the creators a bit more exposure too for their work and I'm sure it is just as exciting for you to see what kind of designs people come up with using your framework. I tend to love the "minimalistic" look of frameworks. KISS.
    - kbr 9y ago
      Yup, getting exposed to a variety of new things is great, you learn a lot, and have a lot of different styles. I agree, and thank you for helping creators get exposure for their work. I'm sure it makes their day when someone uses their framework, and it sure does for me :) Minimalistic frameworks FTW! I don't like the ones where there are a ton of classes to learn, or when they are complex (like ".o-s-c-3-4").

pause_break 9y ago

#4a4a4a... Why is off-black text on white backgrounds so popular with designers? Darken this and the whole theme becomes even easier on the eyes

detaro 9y ago
This and the button style (which to me don't look enough like buttons to be 100% clearly identifiable) would be my criticisms as well. Other than that it looks nice.
- oxalorg 9y ago
  Thanks. Author here, could you please expand on which to me don't look enough like buttons Perhaps I could add some sort of 3d effect/animation on button:hover.
  - detaro 9y ago
    I just looked at the demo again and it is only the <input type=… buttons that (since they have no extra styling compared to the other inputs?) don't stand out enough, when I imagine the <button type=… ones next to a form they look fine. (I personally like a 3D-effect on buttons, but that's really a matter of taste and doesn't always fit the other elements)
captainmuon 9y ago
I think it's due to people not having really bright screens. If your screen is too dim, you need the background to be as white as possible. Another factor is that off-white can be percieved as dirty. Ideally, I'd prefer if off-white was the standard for backgrounds, and you could use bright white for highlights and more contrast in images. Or maybe 100% white should be the standard, and you have a screen that goes to 110% :-). Maybe one day when HDR screens become standard...
- pause_break 9y ago
  Just to clarify: I'm talking about the font color being too light against a light background :O

mzehrer 9y ago

This follows the idea of the (now aged) W3C core styles : https://www.w3.org/StyleSheets/Core/Overview.html https://www.w3.org/StyleSheets/Core/Overview.html

jlebrech 9y ago

yes, this is how we should do things. we also need react components to make official HTML markup look modern without needing to add classes or wrap things with divs. also maybe extend inputs a bit, such as have a type='slider' for example.

wayn3 9y ago

I like it.