DEV Community

Cover image for Style your next blog with vanilla HTML. No CSS. 😵
Vaibhav Khulbe
Vaibhav Khulbe

Posted on • Updated on

Style your next blog with vanilla HTML. No CSS. 😵

For adding style to your websites, we need something called CSS HTML.

...said no one ever.

But what if we make it possible? Of course, our browsers understand the Cascading Style Sheets (CSS) to add styles to the HTML elements. It can't just use HTML to both create elements and style them together.

Let's take an edge case. You need to quickly develop a simple personal blogpost. You would usually seek out for a framework/library or some template to start. But you see, the more heavy thing you add to stuff which can be done with bare-bones can be a bit intimidating both for your implementation and website performance. So, we tend to use simple HTML for the content/structure and CSS for styling.

Dudes at XZ made something with the classless CSS concept by which you only write the required HTML syntax and boom, your styles will be automatically be applied.

Is this some dark magic? Nope. It's a ~4.5kb framework... new.css.


Also, not-just-another CSS framework 😌

So, what's the deal? Do you need to use this in your project everytime for styling? No no no!

new.css is a classless CSS framework to write modern websites using only HTML.

This is specifically useful for small projects, your portfolio site or your personal blog posts where there's not a heavy need of UI customisation. Also, if you actually hate writing CSS (for whatever reason because ideally you shouldn't ಠಿ_ಠ), you will find this utterly easy to style.

new.css focusses and gives the lost importance to the semantic HTML. You just write HTML code throughout and the result will be a nice-looking webpage.

Okay, enough of the intro. I see you're interested in making stuff instead of reading this entire sentence which I deliberately wrote that long.


Let's style a webpage without any styling! 🥷

I feel like a ninja writing the above statement. We'll make this (click the HTML button below to see the entire result):

So, who's ready to fall in love with HTML...again?

Ninja GIF

You the ninja!

Before we get out hands dirty with HTML code, we need to add the new.css stylesheets which are actually like a 'brain' to our blog styling.

Just before you end the <head> tag, add the following lines:



<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">


Enter fullscreen mode Exit fullscreen mode

The first one is the CSS file for the default font used i.e. Inter. The latter one is the actual stylesheet for adding the relevant styles you see.

If you want you get the Terminal theme which I used to make it a little nerdy. This can be done by adding another <link> which points to https://newcss.net/theme/terminal.css. Okay, now we're ready.

-> 🐱‍💻 Make the header and the blog heading

Blog header

In your favourite editor (or an online one like CodePen), use emmet to generate the <header>.

Next, we have the heading part of our blog. We use the regular <h1> tag for the heading and the <p> tag for the subheading. All the other tags can be used wherever you like to. So, I added <a> to use the hyperlink which goes to my About.me page.

To add any spacing (which we refer to as margin or padding space in CSS), just add the line break tag <br>.

Code till now:



<header>Welcome to a webpage written entirely in Vanilla <strike>JS</strike> HTML.</header>

<!-- Heading -->
<h1>THE ROCKET BLOG FROM THE FUTURE 🚀</h1>
<p>My thoughts and ideas on rockets and the science behind them. <a href="https://about.me/vaibhav_khulbe" target="_blank">Learn more</a>.</p>
<br>


Enter fullscreen mode Exit fullscreen mode

-> 🐱‍💻 Make the actual article card

Article card

It all comes down to your creativity and how much you know different elements of HTML to make something like this. By no means, this is a perfect card layout. We need to remember that we're only using the HTML code here to create this so we have zero control on CSS.

Let's break down the not-so-complex card. First, we have the image for the article, a tag, the article title, description and at last a button which should open up the full article.

We add the following code to make this:



<img src="https://images.pexels.com/photos/796206/pexels-photo-796206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Space shuttle"/>
<kbd>FEATURED</kbd>
<h4><a href="#">Lorem ipsum dolor sit, amet consectetur adipisicing elit</a></h4>
<p>Optio, beatae! Aut quis id voluptate ullam repellendus. Et sit, ipsa, non consequuntur magnam quaerat temporibus at officiis ab, expedita molestiae liber...</p>
<a href="#"><button><b>READ MORE</b></button></a>


Enter fullscreen mode Exit fullscreen mode

I've used an image from Pexels, an excellent resource for stock photos which we can use for free. To add the tag, I've used the <kbd> tag which stands for The Keyboard Input element. It's typically used to represent a keyboard key like shift.

Notice we have an anchor <a> tag inside the <h4> so that the article title is clickable and can be redirected to a new location. For the demo, it's just #. Same goes for the <button>.

Our first article card should be up and running! 🕺

-> 🐱‍💻 Add the card break elements

Card break elements

The two elements are the ones having the red border around them.

The first one is the Details disclosure element represented by <details>. This is very useful when you have to hide the information initially and only by clicking the <summary> element, you can see the entire info. You can put any other HTML element alongside the <summary>. For fun, I used a GIF :')



<details>
    <summary>What was the secret behind this mission?</summary>
    <img src="https://media.giphy.com/media/NdKVEei95yvIY/giphy.gif" alt="Secret GIF">
    <p>Okay, go watch The Office.</p>
</details>


Enter fullscreen mode Exit fullscreen mode

The next one is the regular quote element represented by <blockquote>.



<blockquote>
  “The Earth is the cradle of humanity, but mankind cannot stay in the cradle forever.” <i> - Konstantin Tsiolkovsky</i>
</blockquote>


Enter fullscreen mode Exit fullscreen mode

This simply contains a sentence from a source. Notice the use of <i> to format the name in italics.

It's done! So, how does it feel to write no CSS? 😜


Where to next? 🤔

If you ask me, this can be used to make quick and easy webpages. But I won't use this much for my personal or professional projects simply because first, I LOVE CSS, second, I need a lot of customisation in styling. Who doesn't love centring items! 😉

  • Go ahead and if you can then contribute to this awesome framework:

GitHub logo xz / new.css

A classless CSS framework to write modern websites using only HTML.

new.css

Discord GitHub stars

new.css

A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb.

All it does is set some sensible defaults and styles your HTML to look reasonable. It's perfect for:

  • A dead-simple blog
  • Collecting your most used links
  • Making a simple "about me" site
  • Rendering markdown-generated HTML

Demo: newcss.net


Table of Contents

  • Usage
  • Themes
    • Theme Library
    • Customizing Themes
  • FAQ
  • Made with new.css
  • Sponsors
  • Support

Usage

HTML

Add this line to the end of your HTML's <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
Enter fullscreen mode Exit fullscreen mode

If you'd like the font Inter as well (recommended), add this line as well:

<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
Enter fullscreen mode Exit fullscreen mode

npm

npm i @exampledev/new.css
Enter fullscreen mode Exit fullscreen mode

Yarn

yarn add @exampledev/new.css
Enter fullscreen mode Exit fullscreen mode

Themes

new.css uses a color palette that can be easily customized. These are declared as a CSS variable in the :root attribute.

Theme Library


May we suggest cleaning out your fans? Or earplugs. 😭

Source: https://t.co/qrge5lELZL#DevHumour #Developer #Programming pic.twitter.com/VJrehlTc4t

— Microsoft Developer UK (@msdevUK) June 9, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Top comments (22)

Collapse
 
madza profile image
Madza

I went from (⌐■■) to ( ••)>⌐■-■ when I saw the title :)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

(❁´◡`❁)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

Correct. It is focussed on both semantic HTML and classless CSS framework.

The default browser styling is simply too basic. Black text on a white background... :'( Not what most of us would like to have. new.css usage is for a static webpage like your about page or a blog as written in the article. Also....there are colours and you can make your own custom theme ;)

Collapse
 
leob profile image
leob

Well, the idea is kind of refreshing :-)

You still use CSS obviously, it's just that you don't use classes.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Yes! It's a classless framework :)

Collapse
 
leob profile image
leob

Classless but classy ;)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I style stuff with aria-* where possible because A its stateful, B its style that depends on good accessibility, yes thats right force yourself to write good accessible websites. and for anything not aria, schema.org has you covered. either way, you are not allowed to make crap wasteful websites with my method.

[itemprop='product'] {
    [itemprop='price'] {
        color: reallygreen;
        font-size: 3em;
    }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Definitely! Accessibility is really important. ARIA labels seem really promising. Thanks for addressing this.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

You might try some of the ARIA linters out there.

If you use no framework, no NPM, no eslint, there still seems to be enabler CLI.

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀

Agreed, Aria can be harmful if used in incorrectly. Great suggestion.

Collapse
 
robole profile image
Rob OLeary

It's like CSS communism, classless! 😁

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

It's called Marx.

Collapse
 
robole profile image
Rob OLeary

Someome is way ahead of me then😄

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Gotcha! 👀

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Yeah!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Yes. They're quite similar!

Collapse
 
manyrios56 profile image
Manuel Rios

Good, I really like this well done.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Thank you!

Collapse
 
djpandab profile image
Stephen Smith

Yeah definitely a throwback and refreshing. Good job!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Thank you!

Collapse
 
malcode profile image
malcode

You are a god of HTML :)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

God to its creation:

Hello World