Share your repls and programming experiences

← Back to all posts
Easy.css 🔵
Bookie0

Haii!! 👋

Hope you you're doing well!

Do you wish you had a simple stylesheet to use for your websites? Does that stylesheet have to be beautiful, responsive, light, and have many useful elements? Well look no further, because Easy.css is what you need!

Like the generic name implies, it's a CSS stylesheet you can easily use in your websites to style things up!

Here's how a snippet of looks it like:


To use ➡️

Step 1)

Make a new HTML CSS JS repl (or click here).

Step 2)

Light mode or dark mode?

  • Copy <link href="https://easycss.bookie0.repl.co/light.css" rel="stylesheet" type="text/css"> for light mode.

  • Copy <link href="https://easycss.bookie0.repl.co/dark.css" rel="stylesheet" type="text/css"> for dark mode.

Paste it in the <head> tags:

Step 3)

You're all set! :) Start coding!

Here's an example repl that you can fork and test some of the elements:


Links 🔗


(Some) Features ✨

For the full demo with all the things you can use, check out easycss.bookie0.repl.co/

Text

  • Headers <h1> to <h6>
  • <p> tags for paragraphs
  • <subtitle> for subtitles
  • <b> for bold, <i> for italic, <u> for underline, and <s> for strikethrough
  • Font family is 'Lato', sans-serif

Quotes

  • Quoteblock with light background color
  • Blue accent color as left border
  • Big quote character (“)
  • Quote in italic
  • Citation in regular, with work in italic

Buttons

  • Default button
    • Blue accent color background that becomes darker on hover
    • Button gets bigger on click
  • Secondary button
    • Same as above, but by default doesn't have a blue accent background; only on hover does that background appear
  • Larger button
    • Same as default button, but everything is just bigger

Keyboard input (<kbd>)

  • Light gray background color
  • Shadow to make it seem "3D"
  • On click, appears to go down (as if the pressed)
  • Monospace font

Tables

  • Table header has blue accent color background
  • Each table row has an alternate background color
  • On hover, each table row becomes a bit darker

Everything else

There are of course a lot more elements that you can use (such as shapes, cards, codeblocks, inputs, radio/checkbox buttons, etc.) so be sure to check the demo site for more information! :D

Style

Font family

As I said above, the font family used is 'Lato', sans-serif. I chose it because, like the Google Fonts page, says, it has a sleek and modern look. I also love the semi-roundness of the characters; it makes the font feel a bit 'organic' and and comforting, while also keeping it serious and professional. It's a great font for all sorts of websites!

Colors

The main accent blue accent color is not exactly blue; it's dodgerblue (I use #1e90ff). It looks like this:

I used CSS variables in the :root pseudo-class (check out style.css):

(It's an image so you can see the colors in the small square boxes next to the variable.)

The primary color, used for the background color is white (#fdfdfd). The secondary color, used for input boxes, quotes, and tables is a light gray (#f0f0f0). There's also --secondary-color-hover (a darker shade of light gray, #ddd) for cases like when you hover on the inpput boxes.

For text colors, the primary color is a very dark brown that looks similar to black (#1a1110). The secondary text color is gray (#637379).

For borders, there is --border-color which is used for, well, borders. It's sort of a gray color but with the alpha parameter (because I used rgba in this case) set to 10% or 0.1, it's extremely light.

I talked about the accent color above, but there are also similar blue colors on hover and on focus.

You'll also see a variable called accent-color, without the 2 hyphens (-) in front. It's a new (I think) property set in the :root pseudoclass to replace the usual accent color based off of your computer system's accent color. Instead of having the default system's accent color that varies based off on browser/device, I set it to this stylesheet's accent color (the dodgerblue) to make it look more uniform.


Closing 🚪

Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D

If there are any issues/bugs/things breaking, please comment them or DM me on Discord @ Bookie0#7538.

If you use this stylesheet, please keep in mind that I'd love if you gave credit (like in the footer of your website or something), as I did put some effort into this! :)

Have a fantastic day!!!

Bye! 👋





TL;DR

In case you didn't read anything above (I hope you did; it takes quite some time to write the whole README)...

To view a demo of the stylesheet, click me!

To use copy <link href="https://easycss.bookie0.repl.co/light.css" rel="stylesheet" type="text/css"> for light mode and <link href="https://easycss.bookie0.repl.co/dark.css" rel="stylesheet" type="text/css"> for dark mode.

Also: I've included a multitude of references to certain things in the demo site. Can you find them all? :)

Check it out on Product Hunt! xD

Voters
AveryLucas1
MarcusWeinberger
HenryRoenke
FlaminHotValdez
hg0428
personmandude
CodeMaster007
SixBeeps
PixiGem
HTML-96-Expert
Comments
hotnewtop
STCollier

This is very cool! I, personally, am still going to use regular CSS because of its wide range of customization, but this is a great tool for beginners!

Bookie0

@STCollier Alright cool! You can use this stylesheet, and also have your own stylesheet and combine/edit things to match your preferences too! :D

Elias33506

Can you add darkmode?

Bookie0

@Elias33506 I might add it later on.

Elias33506
C3TMLive

Havent went through it yet
just one question
how hard it is to overwrite certian elements compared to bootstrap

Bookie0

@C3TMLive If you want to overwrite an element's style, just do it in CSS.

For example if you have a link with the <a> tag, and want to change the color, in a CSS file, just change the properties for that tag. Or you can add an id or class.

I don't do bootstrap so I wouldn't know how to compare them.

Lmk if you need more help! :)

FlaminHotValdez

Radio buttons...
hmm...

Hah, joke's on you, I'm a Divergent, so don't try to run an aptitude test on me.

Bookie0
SpaceFire

oooh good stuff!

Bookie0

Thanks! :D @SpaceFire

nbash

This is very cool! I really like how the code works and how it all fits! You are an amazing coder! Code on!

Bookie0

Thank you! :D @nbash

nbash
Bunnytoes

this is so cool!

any chance you can make it so this works for javaFX

Bookie0

@Bunnytoes Thanks! :) Sorry, I don't know what is javaFX

Bunnytoes

@Bookie0 it's a java library that u can use css with

Bookie0
Whippingdot

Hey, hovering over links moves the whole page down with the text-decoration underline. I don't know why...I don't think that should happen

Bookie0

@Whippingdot Yeah that's because on hover there's a border-bottom (not text-decoration).

tussiez

Super!

Bookie0

Thanks! :) @tussiez

PixiGem

the kbd is a life saver
i will use those rn!

Bookie0

@PixiGem Lol thanks! :D

theamazingplant

Great work, I will definitely use this (... one day)

Bookie0
ruiwenge2

cool!

Bookie0

Thank you! :D @ruiwenge2

rickysong

Cool (especially for someone who doesn't know css)

Bookie0

@rickysong Thanks! :D

rickysong

@Bookie0 hey uhh is this for html cause it doesnt work on css

Bookie0

What do you mean? Just copy <link href="https://easycss.bookie0.repl.co/style.css" rel="stylesheet" type="text/css">, and paste it in the <head> of your code.

Then create HTML elements such as <button>, <p>, <a>, etc. (check out the demo page for more inspiration. :) @rickysong

rickysong

@Bookie0 oh ok thanks :D

Bookie0
CosmicBear

@rickysong you should learn CSS. It will be really useful when making websites.

rickysong

@CosmicBear oh ok cosmic

SomeBoyPlayz

thank you so much this will definitely help me!

Bookie0

Cool! :) @SomeBoyPlayz

SomeBoyPlayz

@Bookie0 btw I did read the whole README, you put a lot of effort and you deserve that updoot <3

Bookie0

@SomeBoyPlayz ah glad to hear you read it lol
Thanks! :D

SomeBoyPlayz

@Bookie0 btw do you know how to make buttons that link to sites?

Bookie0

@SomeBoyPlayz Just add a <a> tag around the button

SomeBoyPlayz

@Bookie0 I've invited you to the repl, I was wondering if we could turn the website into something cool instead of just being a practice website

Bookie0

@SomeBoyPlayz yeah just be sure to ask me before inviting me next time :)

SomeBoyPlayz
SomeBoyPlayz

I wish there was a dm feature

Subscribe2

Bro, thanks so much for the dark mode. But can you make a file called style.css and keep it in light mode. Cause otherwise we have to update it. Thx m8

Bookie0

@Subscribe2 lol I’m not finished yet lol
Use <link href="https://easycss.bookie0.repl.co/light.css" rel="stylesheet" type="text/css"> for light mode and <link href="https://easycss.bookie0.repl.co/dark.css" rel="stylesheet" type="text/css"> for dark mode.

Subscribe2

@Bookie0 I did, but I had to update all my pages with new link

Bookie0

@Subscribe2 yeah sorry lol just updating everything

Subscribe2

@Bookie0 No problem, Really love this style sheet. Also When I make a button with a href tag it doesn't work. If you can, please fix this.

Bookie0

@Subscribe2 Thanks!

Yeah if you want a href you gotta use a link with the <a> tag.

If you want to make the button act as a link, wrap the <a> tag around that button, or add the onclick="window.location.href="link" attribute to the button. :)

Subscribe2

@Bookie0 ok ig, thanks.

Bookie0

yep
lmk if it doesn't work
@Subscribe2

SixBeeps

Hmm, a viable competitor to Water.css. Just add a dark theme and a bookmarklet and you're golden.

Bookie0

@SixBeeps Lol thanks, I'll see if I'll be adding new features :)

SixBeeps

@Bookie0 Wait, do you see something wrong here? (Open gif in new tab)

Bookie0

Yeah, I think it’s bc of the border. I’ll try to fix it later :)
@SixBeeps

Bookie0

@SixBeeps
Okay, should be fixed now! :)

Yoplayer1py

Good I needed something like this Bookie.. It's rlly good!!!

Bookie0

Cool! Glad this helped! :) @Yoplayer1py

QuickV

poggers

Bookie0

@QuickV

Thanks!! :)

QuickV

np :)

@Bookie0

RayhanADev

The new water.css here, pls post to Product Hunt :)

Bookie0

@RayhanADev Lmao I have not much idea how Product Hunt works or anything but okay lol :D

MrVoo

Looks spicy, but what doesn't that comes from the CSS god

Bookie0

@MrVoo Lmao thanks! :)