Skip to content
← Back to Community
Easy.css πŸ”΅
Profile icon
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:

howItLooksLike


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:

paste

Step 3)

You're all set! :) Start coding!

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

beautiful



(Some) Features ✨

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

Text

headers

  • 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

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

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>)

keyboardInput

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

Tables

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!

lato

Colors

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

dodgerblue

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

root

(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
Profile icon
lunchwebsite
Profile icon
JWZ6
Profile icon
DillonB07
Profile icon
tussiez
Profile icon
AveryLucas1
Profile icon
MarcusWeinberger
Profile icon
HenryRoenke
Profile icon
FlaminHotValdez
Profile icon
hg0428
Profile icon
personmandude
Comments
hotnewtop
Profile icon
inyourface3445

Mind if I use this for my site?

Profile icon
Bookie0

Sure, that's what this is for! @inyourface3445
Just credit somewhere :)

Profile icon
inyourface3445

@Bookie0 Thanks!

Profile icon
Bookie0
Profile icon
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!

Profile icon
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

Profile icon
Elias33506

Can you add darkmode?

Profile icon
Bookie0

@Elias33506 I might add it later on.

Profile icon
Elias33506
Profile icon
C3TMLive

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

Profile icon
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! :)

Profile icon
FlaminHotValdez

Radio buttons...
hmm...

hah

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

Profile icon
Bookie0
Profile icon
SpaceFire

oooh good stuff!

Profile icon
Bookie0

Thanks! :D @SpaceFire

Profile icon
nbash

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

Profile icon
Bookie0

Thank you! :D @nbash

Profile icon
nbash
Profile icon
Bunnytoes

this is so cool!

any chance you can make it so this works for javaFX

Profile icon
Bookie0

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

Profile icon
Bunnytoes

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

Profile icon
Bookie0
Profile icon
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

Profile icon
Bookie0

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

Profile icon
tussiez

Super!

Profile icon
Bookie0

Thanks! :) @tussiez

Profile icon
PixiGem

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

Profile icon
Bookie0

@PixiGem Lol thanks! :D

Profile icon
theamazingplant

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

Profile icon
Bookie0
Profile icon
ruiwenge2

cool!

Profile icon
Bookie0

Thank you! :D @ruiwenge2

Profile icon
rickysong

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

Profile icon
Bookie0

@rickysong Thanks! :D

Profile icon
rickysong

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

Profile icon
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

Profile icon
rickysong

@Bookie0 oh ok thanks :D

Profile icon
Bookie0
Profile icon
CosmicBear

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

Profile icon
rickysong

@CosmicBear oh ok cosmic

Profile icon
SomeBoyPlayz

thank you so much this will definitely help me!

Profile icon
Bookie0
Profile icon
SomeBoyPlayz

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

Profile icon
Bookie0

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

Profile icon
SomeBoyPlayz

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

Profile icon
Bookie0

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

Profile icon
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

Profile icon
Bookie0

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

Profile icon
SomeBoyPlayz
Profile icon
SomeBoyPlayz

I wish there was a dm feature

Profile icon
Subscribe2

hey, @Bookie0. Can you please fix the select field in safari. It looks nice in chrome, but in safari it's not that great
Screen Shot 2022-04-06 at 8.36.09 PM

Profile icon
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

Profile icon
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.

Profile icon
Subscribe2

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

Profile icon
Bookie0

@Subscribe2 yeah sorry lol just updating everything

Profile icon
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.

Profile icon
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. :)

Profile icon
Subscribe2

@Bookie0 ok ig, thanks.

Profile icon
Bookie0

yep
lmk if it doesn't work
@Subscribe2

Profile icon
SixBeeps

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

Profile icon
Bookie0

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

Profile icon
SixBeeps

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

gZ9ZzYUwDM

Profile icon
Bookie0

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

Profile icon
Bookie0

@SixBeeps
Okay, should be fixed now! :)

Profile icon
Yoplayer1py

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

Profile icon
Bookie0

Cool! Glad this helped! :) @Yoplayer1py

Profile icon
QuickV

poggers

Profile icon
Bookie0

@QuickV

Thanks!! :)

Profile icon
QuickV

np :)

@Bookie0

Profile icon
RayhanADev

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

Profile icon
Bookie0

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

Profile icon
MrVoo

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

Profile icon
Bookie0

@MrVoo Lmao thanks! :)