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

62 points by oxalorg 8 years ago | 22 comments
  • oxalorg 8 years 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/ (click on "toggle" on top of the page)

    • mzehrer 8 years ago
      This follows the idea of the (now aged) W3C core styles : https://www.w3.org/StyleSheets/Core/Overview.html
      • pause_break 8 years 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 8 years 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 8 years 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 8 years 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 8 years 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 8 years ago
              Just to clarify: I'm talking about the font color being too light against a light background :O
              • captainmuon 8 years ago
                I know. I was speculating why some website creators prefer dark grey on bright white, as opposed to pitch black on slightly off-white (which I think is easier on the eyes).
          • fiatjaf 8 years ago
            I like it.

            Shameless plug: https://github.com/websitesfortrello/classless

          • kbr 8 years 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

            • mattbgates 8 years 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 8 years 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 8 years 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.

              • zmoreira 8 years ago
                Looks nice.
              • meagher 8 years ago
                Cool! First time I have heard of such a thing, but makes complete sense!
                • oxalorg 8 years ago
                  Thanks. I'm glad you liked it ^_^
                • jlebrech 8 years 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 8 years ago
                    I like it.