Skip to content
Sign upLog in
ā† 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
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
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
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
CjPlayzTV1

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