loading...
Cover image for DEV.TO in Web Comics Style ?

DEV.TO in Web Comics Style ?

gochev profile image Nayden Gochev ・4 min read

Disclaimer : I am a big fan of comics !

First time when when I saw http://dev.to for some reason the style of it reminded me so so much of comics (that as I said I love) !

So at some point several days ago I switched to Minimal Light Theme for more clear look, but it was not my thing :(

Alt Text

You know there are themes right ? Anyway this theme is good but I don't know, something was missing and it was not cartoony and fun and comics enough maybe.

I am not a frontend guy, I have 0 knowledge in CSS even -1 and I am proud of it! I hate the DOM and I hate styling it with anything especially CSS, but I just had to see how it will look in a bit more... comicsish style?

So I used Stylus plugin for chrome to inject a bit of CSS into the page, basically just changed the border-styles and some alignments.


/* feeds view */


.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header{
   text-align:right;
}

.widget {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 2% 162% 3%/9% 96% 2% 99% !important;
}

.widget header {
    text-align:right;
}

.single-article  {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

/* article view */

.article article{
    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;
}

.inner-comment{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

.primary-sticky-nav-author{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.primary-sticky-nav-element{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

And YES I put !important everywhere cuz... it's only for me! My precious!

Anyway I think the results are quite good and I will use it this way from now on, but what do you think, should someone KNOWING how to do it properly can and will create a theme ?

Full feeds page:
feeds page

And a single article page:

single article

Also I tried to change the fonts.. I would love to have the Bangers font for the h4 headings but didn't had any luck :D

@font-face {
  font-family: Bangers;
  src: url(https://fonts.googleapis.com/css?family=Bangers);
}

h4{
    font-family: Bangers !important;
}

Adding this for some idea doesn't work, the HTTP request is made properly the font is downloaded but...
at the end I would LOVE something like this for the right side :
Right side

It would be cool, but without CSS knowledge and for around 30mins this was my limit :D

Cya all, I will love to hear your thoughts - back to the backend and debugging Java.

Oh yes... I forgot I was experimenting here before applying CSS to DEV.TO

here we have the Bangers fonts and etc I was curious how to make the borders.

UPDATE.
Ah I am an idiot, it looks the value of @font-face src was incorrect it works in a link since it gets added in a style as stylesheet pf anyway, so

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

Works (the url above was incorect) !

so VERSION 2 !

  • Changed the sidebar titles
  • Changed the shape of buttons
  • Changed my name and username

I think this 2 screenshots show most of it:
I LOVE the new and improved header:

new header

And the full look:

version 2

And what I added to the previous CSS:

/* feeds view */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

.sidebar-profile-name{
    font-family: Bangers !important;
    font-size:12px;
}

.sidebar-profile-username {
    font-family: Bangers !important;
    font-size:20px;
}

.widget header h4{
    font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}

.widget .cta-button {
        border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.articles-list .nav-chronofiter-link {
        border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header:first-child{
   text-align:right;
        font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;

The full file (since the post is already too long) :

https://gist.github.com/gochev/1ee874a0bb6218ffcb652170ef3bb3a7

Anyone for up for how to make it a real theme thing ? :)

Discussion

pic
Editor guide
Collapse
codemouse92 profile image
Jason C. McDonald

Fantastic! I'm likely to stick with my dark theme, but this seems absolutely perfect as an addition to the DEV themes. You should totally make a PR.

Collapse
somedood profile image
Basti Ortiz (Some Dood)

I second this. What a fun addition this would be! The !important tags could use some cleaning up, but it's nonetheless a cool theme.

Collapse
gochev profile image
Nayden Gochev Author

haha yes, well the !important tags are mostly what I didn't like and the backend developer thing ;)) :D:D but I know they magically fix everything :D:D and I didn't had time to check what is actually rewriting what, so I just put them ... everywhere.. ops :))

Thread Thread
somedood profile image
Basti Ortiz (Some Dood)

That's fine! I'm sure folks would be happy to help in your pull request.

Thread Thread
gochev profile image
Nayden Gochev Author

haha :) yeah maybe this is the next step :), but there are a lot more views that needs styling ... I have styled only 2 of them :) and maybe the way how a theme is made is easier :)

Jason C. McDonald big thanks to you as well :)

Thread Thread
gochev profile image
Nayden Gochev Author

@somedood do you happens to know how to create a theme, because checking at the github it is some crazyness :D:D

github.com/thepracticaldev/dev.to/...

or if it happens to know who I have to contact; )

Thread Thread
somedood profile image
Basti Ortiz (Some Dood)

I have good news! This document has all that you need to know in oder to start theming. πŸ˜‰

Here is the file you would want to edit.

Thread Thread
gochev profile image
Nayden Gochev Author

I have found the first document but the file is helpful as well :) will definitely do that ones I had it running :D:D: since I had some issues: D:D:D with running the project ;) but I am trying ! :D

Thread Thread
somedood profile image
Basti Ortiz (Some Dood)

That's good to hear, Nayden! Keep it up! πŸ₯³πŸ₯³πŸ₯³

Setting up the development environment has always been a pain in the back side.

Collapse
sierrafayad profile image
Frank Sierrafayad

Wow... This is pretty awesome. Nice work

Collapse
gochev profile image
Nayden Gochev Author

thanks man - looks pretty , written ugly like a backend dev :):):):)

Collapse
exadra37 profile image
Paulo Renato

Disliking or liking it, for a non-css guy, and one that says it hates it, you have achieved a lot in only 30 minutes, so congrats are in order ;)

Collapse
gochev profile image
Nayden Gochev Author

haha thanks, actually the applying the stuff to dev.to took me around 10ish mins, I spend more time in writing the initial CSS and playing with codepen prior to moving the stuff to stylus and putting !important anywhere cuz I was angry :D:D

You can check the codepen vision here

I will actually put this in the post.

btw I was more angry to the CSS Grid... then anything else but that's a different story.

Collapse
khalyomede profile image
Khalyomede

Amazing job have been done here! Guys, what is the name of that library that provide this exact style?! Can't remember myself...

Collapse
gochev profile image
Nayden Gochev Author

never heard of such thing but if it exists.. oh my oh my :D so I hope you will find it.

Collapse
khalyomede profile image
Khalyomede

Dude I friggin found it πŸ€‘

wiredjs.com/

@ben whayu think about it for a new theme πŸ€“

Thread Thread
gochev profile image
Nayden Gochev Author

omg are u kidding me THIS is fcuking GREAT , are u kidding this is amazinggg

BTW maybe you will not like it but I am a games fan as well and I find this amazing as well nostalgic-css.github.io/NES.css/

Thread Thread
khalyomede profile image
Khalyomede

Damn Nayden you and me are on the same line Ness.css is dope as heck haha πŸ˜‰πŸ˜ 2 themes in a row if this ever became themes for Dev we will be so proud πŸ˜…

Collapse
nestedsoftware profile image
Nested Software

Really well done. You have great design sense for someone not into design!

Collapse
delta456 profile image
Swastik Baranwal

Wow amazing!

Collapse
rncrtr profile image
Ryan Carter

Good on you for giving CSS a shot. I'm sure you won't find a single comics nerd on this site. Ha!

Collapse
gochev profile image
Nayden Gochev Author

haha well I am sure about LEGO fans because of the connection of people loving lego and loving programming, about the comics I was not sure it turns out there are a lot of nerds like me here :)) happy place ! :)

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

This is so beautifully done🌻 great workπŸ¦„πŸ¦„

Collapse
gochev profile image
Collapse
waylonwalker profile image
Waylon Walker

So freaking innovative! Love the look of it.