Skip to content
Sign upLog in
← Back to Community

HCSS, a CSS framework.

Profile icon
ThatGhost

Anyone else think that CSS is way too hard and takes way too long.

If not then your wrong, its way too hard and takes way too long.

If your good at CSS then you must be Jesus.

I decided, wouldn't CSS be easier if at had a syntax similar to HTML (for shadowing...)?

And someone else, a mysterious phenomenon to the replit site, know as

@JustCoding123
had the same idea, but he turned CSS and made it into english.

So we ganged up like the bad boys we are and we made this CSS framework (more of a library but we don't talk about that...)

The cdn is https://hcss.thatghost.repl.co/version/latest

For documentation go to https://hcss.thatghost.repl.co/docs

This is the first nice looking site I made so that should be proof enough that it works well.

Just like any other CSS library framework it takes in input and then compiles into CSS (but our compiling looks nice and not like it went through a terser, looking at you SCSS...)

Anyways check it out, its really cool and we are proud of it!

Voters
Profile icon
zain-haq
Profile icon
Macejkovic5
Profile icon
EdwardBentler
Profile icon
Nathanielx3rd
Profile icon
GordonHuang4
Profile icon
OldWizard209
Profile icon
RayhanADev
Profile icon
PixiGem
Profile icon
maxina
Profile icon
leafkn
Comments
hotnewtop
Profile icon
JakeHu2020

use

res.sendFile(__dirname+'/public/index.html')

instead of

fs.readFile("public/index.html", function(err,data){ res.writeHead(200, {"Content-Type": "text/html"}); res.write(data); res.end(); });
Profile icon
ThatGhost

they both do the same thing, its just how i learned to do it

@JakeHu2020

Profile icon
JakeHu2020

@ThatGhost
yea, but thats easier

Profile icon
ThatGhost

@JakeHu2020
again just how i learned

Profile icon
ZarmDev

It's good but you can just use html and add style="" everywhere...
Nice project!

Profile icon
ThatGhost

@ZarmDev
but the problem with adding style="" everywhere is it can get un organized and hard to find styles as they are everywhere.

with HCSS you dont have to do that, all your styles are in a separate file or in your hcss tag

thanks tho!

Profile icon
ZarmDev

@ThatGhost
Yeah that's a fair point :)

Profile icon
ThatGhost

@ZarmDev
im not tryna change what you do, i just think HCSS is easier

Profile icon
leafkn

This is superb!

Profile icon
ThatGhost

@leafkn
thanks!

Profile icon
Whippingdot

Noice

Though to be true your website looks nice but minimalistic - maybe add a little bit more work to it with colors? Also, maybe get someone who is good at explaining things (like me) to come and board and help you re-write the documentation cause rn, you just seem to be linking your stylesheet, in which there is also no exact example linked but just the whole thing.

Profile icon
ThatGhost

@Whippingdot
if you want i can give you access to the repl or you can tell me over discord and we can change it

Profile icon
ThatGhost

i do plan on adding more tho, thanks anyways!

Profile icon
Whippingdot

I don't have discord yet, wait 12 days

@ThatGhost

Profile icon
ThatGhost

@Whippingdot
lol ok, its up to you

Profile icon
ch1ck3n

quick suggestion

instead of <color value="rgb(255,0,0)"></color> make it so like I can do <color>rgb(255,0,0)</color> too

Profile icon
ThatGhost

@ch1ck3n
so your asking for both ways? ill add it soon, by the way, if you make anything using hcss let me know and ill check it out

Profile icon
ch1ck3n

@ThatGhost
ok

Profile icon
ThatGhost

@ch1ck3n
it should work now

Profile icon
ch1ck3n

wow nice!

Profile icon
ThatGhost

@ch1ck3n
thanks!

Profile icon
GordonHuang4

i rly don't know how to use css anyway

Profile icon
ThatGhost

@GordonHuang4
i suggest you learn real css and not a framework, although i can personally say this is a lot easier

Profile icon
Carolinefort

I found the other one after posting this but thanks for the helpful instruction. Hopefully it didn't confuse you too much. They should write instructions on how to handle two questions on the same topic.

https://www.advancedmd.run/

Profile icon
GordonHuang4

at the end of the website addressees, how do you make the slashes?

Profile icon
ThatGhost

@GordonHuang4
if your talking about website urls that look like https://replit.com/@GordonHuang4 what you do is make a new .html file and have a a tag that sends you to it, so if you had a html file called login.html you could do <a href="login.html">Login!</a> and it would send the user to that page and add slashes in the url.

Profile icon
AmoghTheCool

@GordonHuang4
there are multiple ways. You could use a server with Flask or ExpressJS, or if you wanted to go plain HTML, then look at
@ThatGhost
's comment.

Profile icon
ThatGhost

@AmoghTheCool
for the site i used express

Profile icon
GordonHuang4

how do u make the websites with slashes?

Profile icon
ThatGhost

@GordonHuang4
idk what you mean? can you elaborate?

Profile icon
Pelgriminal

@GordonHuang4

Thank you very much. I am also looking for the same. Can some one please respond. [mcdvoice]https://mcdvoice.me/)