10 ms·
Show HN: Cs16.css – CSS library based on Counter Strike 1.6 UI
- Dilettante_ 2y agoGuys will see this and just think "Hell yeah"
- phplovesong 2y agoNOSTALGIA! Awesome job!
- dvh 2y agoWhy you didn't use progress or meter for progress bar?
- dylan604 2y agowhy make everything need a class rather than just styling the DOM elements directly. Why wrap a checkbox into a div rather than just a <form>? why did you skin the cat that way when there's 98 other ways to do it? maybe there's a logical reason more than "that's just what came to mind", maybe not. that's the beauty of the whole thing. there is no one way
- Bjartr 2y agoNot every question is a criticism that needs to be defended against. The person you're responding to could very well just like to know the reason if one exists, no more, no less. If you know a better way to get that info than asking the question, I'm all ears. (major digression ahead) This is actually something I've been digging into for a while, trying to improve my own communication. My own current best answer for this sort of situation is the social expectation is that a neutral question will always be accompanied by praise and gratitude, and any question asked that lacks that accompaniment will be interpreted as antagonistic. For example, the comment you're responding too could have started with "This looks really cool, ..." or "Wow, this takes me back..." or "I can see a lot of effort went into this..." and it would have resulted in the question coming off as neutral instead of critical to some people. What's fascinating is when I mention this kind of thing I almost always get one of two responses * Of course that's how it works, everyone knows that! * That's ridiculous, no one can be expected to do that!
- richardlblair 2y agoI think I'm more cynical. Almost everything stated on the internet will be perceived as antagonistic. At least by some. It's more a representation of the reader's internal state rather than an issue with the question / statement. Unless, of course, the question / statement is overtly antagonistic.
- Bjartr 2y agoIt's definitely not just on the internet, I've been working for years to learn how to not upset people for asking reasonable and genuine questions IRL. It's a real struggle to this day to notice I'm failing to engage in the social ritual correctly and come up with appropriate extra positivity on the spot just so I can be considered a non-antagonist.
- richardlblair 2y agoI think internalization is important for self improvement, so I admire the way you frame this. Try not to downplay the other part's role, though. They are also making a choice in the exchange.
- elktown 2y agoTo be fair, software discussions in particular are absolutely overflowing with snark, reflexive dismissals, and just general one-upmanship. So I can understand people assuming the worst.
- sgc 2y agoPrecisely why it is perfectly fine and good to be inquisitive, and ask why people do things the way they do. It's the point of a show and tell.
- marcellus23 2y agoI'm not sure that argument holds here, not every solution in programming is equally good just because. A <progress> element has the advantage of semantically actually representing a progress bar, which improves accessibility and who knows what other browser behavior and heuristics. In general you should try to use semantically correct HTML tags unless you have a really good reason not to. Maybe in this case he couldn't get the appearance he wanted using <progress>, which would be an acceptable reason. Obviously this is nitpicking and this UI was made for fun rather than being a serious library intended for production. But that's a different criticism of the GP than the one you made.
- dylan604 2y agoIt's released with an MIT license so you're free to made any "improvements" you see fit to make. Fork away my friend. Then come back and do a Show HN with a full and complete write up for every little decision you've made. Not just you, but anyone else in this thread that needs to know.
- aniviacat 2y agoI think it's fair to discuss design decisions of open source project, even if you never plan on actually implementing suggested changes.
- sedatk 2y agoThis one does: https://news.ycombinator.com/item?id=42817979 https://news.ycombinator.com/item?id=42817979
- fnikacevic 2y agoJust looking at this makes me feel like a noob. I tried installing CS 1.6 20 years after launch roughly and it was pointless trying to compete.
- pelagicAustral 2y agoThat's because the servers that are left are filled with die-hard players that know the maps, and every little quirk about the gameplay to the pixel level... There still a lot of fun in there, some mini games, more esoteric modes, deathmatch... The other characteristic of many server is that they are modded to the gills, and in some cases the work that has been done on the game over the years ends up giving some very pleasant surprises... I logged in about 120 hours in 2024 after not playing for 12 years, and everything was different and the same. You got a lot of 30-something's playing after office hours, keeping the servers alive, and like I said, some servers are at a completely different level, I had so much laughs and met quite a few new people... I recommend to look a bit more and I'm sure you'll find a few servers to stick around to, even if you get headshotted by an AWP from across the map on each round.
- pknerd 2y agoAwesome Though I am not a gamer I have seen my son playing different games, I loved it not because it belonged to a certain game but because it is clean and different. Are there any other unique CSS libs that could be used on pages?
- graypegg 2y agohttps://github.com/matt-auckland/retro-css https://github.com/matt-auckland/retro-css Some fun ones on here!
- chrisweekly 2y agoawesome, thanks for the link!
- duxup 2y agoI was watching my son play Half Life 2 recently and it occurred to me how much more real or immersive it seemed when the menus and such had this style and they look like actual computer system UI. Dated maybe, but they feel industrial and real.... and easy to use all in one. Meanwhile many games have hyper stylized menus with flowery wingdings all over them and makes it unrealistic / a horrible experience / chore.
- kenrick95 2y agoikr, the old UIs have good affordance: whether or not the UI elements are interactable or not unlike the "modern" UIs which are kind of terrible in this aspect
- lelanthran 2y agoI liked the menu system in Crysis 2 (or 3 - not too sure). Really made you feel like you were inside the cryosuit.
- bakugo 2y ago> many games have hyper stylized menus with flowery wingdings all over them It can work depending on the style/tone of the game. The real problem, in my opinion, is all the games nowadays with perfectly flat, generic, colorless UIs with absolutely no style or identity. Nintendo has been doing this a lot, for example.
- duxup 2y agoI'll be honest, I went back to some OLD bootstrap styling for some things and I liked it a lot. The candy looking buttons are nice ... I'm done with flat and muted all the time. Also (more to my example) it looks like a realistic UI. A lot of game stylized UI are UI nobody would ever make intentionally for a thing you're supposed to use often. So yeah like you say just some depth and realistic UI feel goes a long way.
- skydhash 2y agoI don't mind style or identity. But I want good UX with a good menu tree and clear active/inactive state and menu/background separation.
- sweaterkokuro 2y agoThis is awesome!
- mavamaarten 2y agoNot gonna lie, I expected bleep bloop sound effects when clicking buttons
- HexDecOctBin 2y agoWhat are the best lightweight CSS UI libraries containing widgets like tabs, trees, etc.? I don't have webdev experience (only GTK, etc.), but I need to write a web dashboard. I tried looking around but the only alternatives seem to be either bloated JS frameworks or abandoned experiments.
- oorza 2y agoTailwind might not be the most perfect fit, but it's "just" CSS.
- CharlesW 2y agoAnd Tailwind v4 is notably better than v3 in terms of being "CSS first": https://tailwindcss.com/blog/tailwindcss-v4 https://tailwindcss.com/blog/tailwindcss-v4
- grimgrin 2y agono suggestions in this reply, nor can I speak to if this is a good or bad idea, but you may like to learn about "classless css frameworks", basically just targeting the html5 semantics https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css also, https://github.com/troxler/awesome-css-frameworks https://github.com/troxler/awesome-css-frameworks others may give you a _real_ recommendation. cheers
- nonethewiser 2y agoYup this is the place to start if you dont want to have to learn something new. Doesn't get you too far but it's great bang for your buck.
- HexDecOctBin 2y agoThanks, I found this[0] which looks somewhat promising [0]: http://classless.de http://classless.de
- dylan604 2y agoHow invested in CSS do you want to be? If you're just wanting to include someone else's .css file and then assign classes where needed, that's one way to go. However, CSS isn't as daunting as many people make it out to be for the vast majority of a user's needs--adding colors, borders, padding/margin, and other basic styling. Looking to use CSS for layout is where things can get "interesting", sometimes challenging, and sometimes arghhhh! I've hand written the CSS for all of the sites I've worked on, and the CSS is smaller than some all encompassing library. Plus, I'm much better at CSS. But I decided I wanted to invest that effort. No shame if you don't
- volkk 2y agoreally takes me back. i love this. that progress bar is how i remember steam being stuck updating for ages (meanhwile it was just entirely frozen and i had to restart it)
- Propelloni 2y agoLooks a lot like Lesstif. Nice!
- fourseventy 2y agoThis is the kind of thing I browse Hacker News for. Well done.
- nonethewiser 2y agoThis is really excellent. It could use some styles for tables.
- nolan_wyss 2y agoVery nice! I installed CS 1.6 last year again, after almost 15 years of not playing, and now I almost play every day 10 - 15 mins against bots to clear my mind. To make it more fun I even created my own bot team and a whole tournament where I play against all the pro teams of the ±2008ties. I also rediscovered a map I created back then on a super old hard disk - never thought that with almost 40 I would still play it - so thank you past-me.
- albertgoeswoof 2y agoCS has always been a great mind clearer. A ranked 5v5 game is high pressure and intense, lasts about 30-45 mins, and has enough human contact to satisfy me. I haven’t found anything to replace it since I quit a few years ago.
- thot_experiment 2y agoDotA is the same thing for me, though I assume you quit for a reason that would probably hold true for DotA as well. I hate how harshly CS punishes acting rashly, it really encourages you to hold angles and play methodically/strategically and I feel like in DotA I'm afforded more leeway to gamble with flashy plays. That all being said they are both brilliant games. There's something particularly appealing about the round model in CS, buy vs save rounds and the way the game gives you an opportunity for a series of rematches where you can learn from the way your opponents played the last round to try and get a better outcome is just a really compelling gameplay loop, even if I don't love it personally. (rather be playing q3dm17)
- jmb99 2y ago> I hate how harshly CS punishes acting rashly, it really encourages you to hold angles and play methodically/strategically It does, but at the same time it doesn’t. If you spend as much time practicing rushing/+w as you do playing methodically/intelligently/holding angles, it works really well. Especially considering most people don’t expect it and don’t have a good counter to it since most people don’t play like that. This is true at all levels of play (except maybe tier 1/2/3 professionals teams). Check out the streamer/youtuber renyan for an example (on de_vertigo in particular). His play style worked well enough to get him to 4400 elo on faceit in csgo, so it can’t be that bad.
- andrewmcwatters 2y agoVGUI!
- IYasha 2y agoGood job! But it reminds me of the dreaded VGUI.dll. (0_0) For those who wrote code for the GS engine it's probaby one of the worst experiences.
- GranPC 2y agoIt didn't get much better in Source either, much to my dismay.
- IYasha 2y agoThey also added, like, 80MB DLL (AFAIR, chromium) just to render HTML MOTD at some point. I personally had to rewrite most of mod's VGUI code to make it less leaky and more usable, and not once have I thought of using CSS instead of those INI-style theme configs. But CSS is too complicated to parse (and no one will use that anyway). :(
- GranPC 2y agoOriginally it used Windows's built-in embeddable IE thing, which as you can imagine was not stellar for security. IIRC there have been some incidents with bad servers serving up MOTDs that exploited vulnerabilities in Trident to execute arbitrary code. I believe they switched to Chromium while preparing for the OS X port. You'd think this would be good for security, but they then proceeded to update to the latest version approximately once a decade.
- nxobject 2y agoI know a lot of servers exploited that as well to play music in the background... in retrospect, the idea of a web view hanging around while you're in a game is terrifying.
- IYasha 2y agoYes! And all of that just to parse some <font> and <img> tags? :D Also, to be fair: it was VGUI2, which, AFAIK, was introduced with Steam UI and still used in HL2. And was never made available to modders of GS.
- wiseowise 2y ago90s, early 2000s were peak times for UI.
- IYasha 2y agoCan't agree more! But, to be fair, I still use win7 in native (unthemed) UI mode and haven't played many modern games to have a proper comparison :D
- Sohcahtoa82 2y agoIt was a time when tech companies were trying to make computers a common household item, so they did tons of user testing and we made great strides in UX as discoverability became king. Then, starting about 10 years ago, they started throwing all that research out the window in favor of minimal, clean, flat, "sleek" UIs because the screenshots are easier to market. They started appealing to the lowest common denominator. We've lost choice and customizability in favor of allowing Apple and Microsoft to decide what our desktops should look like because some people might be confused if they open up an options panel. I hate nearly every single thing about the MacOS UX. The dock is awful, and so many insane defaults all over the place. Hiding scrollbars is a bug, not a feature. Pointer acceleration is a bug, not a feature. The scroll wheel operating in reverse is a bug, not a feature. At least with Windows, I can make it tolerable with third party software to make my task bar and Start menu look and feel like the Win2K days. My biggest complaint about the modern UX is coalescing multiple windows from one program into a single item and not having text. If I have 3 Firefox windows open, that should be 3 items on my task bar. It makes it so I can switch to any of them in a single click. It also means that I can use a window as a widget to monitor something by having the status as the title of the window.
- dimgl 2y ago> I hate nearly every single thing about the MacOS UX. The dock is awful, and so many insane defaults all over the place. Hiding scrollbars is a bug, not a feature. Pointer acceleration is a bug, not a feature. The scroll wheel operating in reverse is a bug, not a feature. I disagree with every single thing you've said here. And I'd be willing to bet most Apple users do too. That being said, I do think there's some charm in simple, "outdated" UIs.
- Edd314159 2y agoIsn’t this technically the original _Steam_ UI, not just Counter Strike?
- bakugo 2y agoYes, the Steam client was originally built on top of the same VGUI library used in Valve's games, and used the same style as HL1/CS/etc back then.
- c_r_w 2y agoWas VGUI built on GTK back then? It looked exactly the same as other GTK apps I was using in the early 00s.
- jamesfinlayson 2y agoNot sure - the VGUI code in the Half-Life SDK was a bunch of header files and a .lib file but I'm not sure what actually implemented it. Back in the early 2000s I assume it was either Windows-specific or rendered using DirectX/OpenGL.
- rtehfm 2y agoTrue, but the original Steam was created for managing updates to Counter Strike and their anti-cheap system (VAC if memory serves me right). Also back when having a low WON ID (now SteamID) was a badge of honor (like having a low Slashdot account ID).
- Ringz 2y agoSorry for the useless comment but I really like the idea of a „anti-cheap system“. I will use it in my next presentation for shareholders. /s
- nxobject 2y agoI'm sure the behavioral economics people at Activision and EA trying to get kids to buy more cosmetics would have a lot to say about that...
- phatfish 2y agoThis is the Steam UI (server browser and config), rather that CS 1.6 specifically i think? I'm having a hard time remembering what it looked like before Steam integration though.
- least 2y agoCS 1.6 was exclusive to Steam; I remember waiting quite a while to register because I didn't like the idea of Steam but ultimately caved (still have a 6 digit steam id, which used to sort of but not really mean something). The server browser in CS 1.5 and below was built into the menu's on the application. This is indeed the Steam UI, not Counter-Strike. This was also back when they had games like Go built in that you could play with people on your friends list.
- jamesfinlayson 2y agoOh yeah, I remember those game .dll files shipping with Steam long after they were disabled.
- sedatk 2y agoSteam was pretty much a CS 1.6 launcher at the time.
- jamesfinlayson 2y agoIt's VGUI2 which was created for the Source engine, re-used for Steam and back-ported to the GoldSource engine when the games were launched on Steam.
- giancarlostoro 2y agoI really like this asthetic.
- benatkin 2y agoNeeds even worse kerning for more nostalgia :D Also ought to be paired with https://github.com/ocornut/imgui https://github.com/ocornut/imgui I came up with a terrible pun shortly after seeing this: "Kern you feel the love tonight"
- deleted 2y ago[deleted]
- Lammy 2y agoMore reading about VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI https://developer.valvesoftware.com/wiki/Category:VGUI Fun fact: in CS 1.6 it could actually be reverted to the old-style WON UI by with `setinfo "_vgui_menus" "0"` in config.cfg or in the console, or buried in the menus as "Options > Multiplayer > Advanced > Buy menu type > VGUI Menus".
- jamesfinlayson 2y agoYeah the text-based menus were what Half-Life launched with in 1998. Counter-Strike used these same text-based menus in 1999 and it wasn't until 2000 that the engine was updated to include VGUI. I guess Counter-Strike left the old ones in place for those that preferred them.
- culi 2y agoI've been eagerly awaiting the opportunity to expand my collection! https://alexbsoft.github.io/win95.css/ https://alexbsoft.github.io/win95.css/ windows 95 https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ windows xp https://cs16.samke.me/ https://cs16.samke.me/ counter strike 1.6 https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/ edward tufte https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ windows 98 https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/ windows 7 https://micah5.github.io/PSone.css/ https://micah5.github.io/PSone.css/ playstation one https://nostalgic-css.github.io/NES.css/ https://nostalgic-css.github.io/NES.css/ nes https://sakofchit.github.io/system.css/ https://sakofchit.github.io/system.css/ apple system https://thesimscss.inbn.dev/ https://thesimscss.inbn.dev/ the sims
- fusedshadow 2y agoBelongs here: https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/
- culi 2y agoI like it! But how would you describe this one? This collection is meant more for tight/inspired themes. But I also included https://bootstra386.com/ https://bootstra386.com/ which is on the edge too so I'm not against including this
- fusedshadow 2y agoGeocities is infamous.
- culi 2y agoohhh that's what the geo is in reference to. Awesome, thanks! Still a bit of a gray area because there's not set "geocities" or "myspace" style, but I'll include stuff like this for now
- progmetaldev 2y ago
- pachouli-please 2y agoThis is so epic. Makes me want to create web pages myself which I never really have to date.
- simlevesque 2y agoThat's my childhood.
- myheartisinohio 2y agoEveryone runs faster with a knife.
- mattigames 2y agoA bit funny how that's still true in modern games like Call of duty black ops 6 (melee weapons in general, not just knife)
- myheartisinohio 2y agoTruly.
- unethical_ban 2y agoMy heart's beating! My hands are shaking!
- theandrewbailey 2y agoBoom! Headshot! Boom! Headshot! BOOM! HEAD-SHOT!
- Plagman 2y agohttps://alpynedreams.github.io/vgui.css/demo_greensteam https://alpynedreams.github.io/vgui.css/demo_greensteam
- sedatk 2y agoThis one uses <progress> element for progress bar too.
- petarb 2y agoAs some one who used to play CS 1.6 for countless hours as a teenager, this is amazing and I can’t wait to use this for a fun project.
- dpunjabi24 2y agoDude, I was looking for something like this earlier today. Thank you.
- sonvv 2y agoIs there a way to generate a vim colorscheme given the background and foreground as used in this CSS?
- habakul 2y ago[flagged]
- jp1016 2y agonice , going to add this template to https://codekeep.io/screenshot https://codekeep.io/screenshot i have added 98, xp, nes before which was shared in hn.
- ychn114 2y ago[dead]
- deleted 2y ago[deleted]
- SomeRainIsGood 2y agofucking love it
- linkshof 2y agoAwesome stuff. Thankyou.
- steve_aldrin 2y agocoolest thing i found out today, gotta redesign my personal sites using this.