<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: xz</title>
    <description>The latest articles on DEV Community by xz (@xz).</description>
    <link>https://dev.to/xz</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F2401%2F7b92f255-2b11-4cf1-b088-e5e3b456ef30.png</url>
      <title>DEV Community: xz</title>
      <link>https://dev.to/xz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/xz"/>
    <language>en</language>
    <item>
      <title>new.css - modern websites with only HTML</title>
      <dc:creator>bdn</dc:creator>
      <pubDate>Sun, 17 May 2020 02:40:29 +0000</pubDate>
      <link>https://dev.to/xz/new-css-modern-websites-with-only-html-4ik</link>
      <guid>https://dev.to/xz/new-css-modern-websites-with-only-html-4ik</guid>
      <description>&lt;p&gt;&lt;a href="https://newcss.net"&gt;Home&lt;/a&gt; / &lt;a href="https://github.com/xz/new.css"&gt;GitHub&lt;/a&gt; / &lt;a href="https://discord.gg/hhuuC4w"&gt;Discord&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;new.css&lt;/strong&gt; is a classless CSS framework to write modern websites using only HTML. It weighs &lt;strong&gt;~4.5kb&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I make a lot of websites. It's a common sight, while making a super simple website, to find myself writing the same CSS over and over just to clean up ugly 90's styling.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fTyBIWae--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ihtorhcrh1ri3jxcy358.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fTyBIWae--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ihtorhcrh1ri3jxcy358.png" alt="the interweb"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In these situations, it would be a waste to import a giant framework like Bootstrap when I'm going to use precisely 3 components. I made new.css to fill this void, and to start creating websites differently.&lt;/p&gt;

&lt;p&gt;The web was made for semantic HTML—let's start using it. You can import new.css into your body's &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; using one line.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"https://newcss.net/new.min.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Here's how that site looks now.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KpswTBBX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/z5kho7mw9dwd14wcusmm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KpswTBBX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/z5kho7mw9dwd14wcusmm.png" alt="new.css-ified"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's not going to make you a fancy carousel. It's not going to give you 12 different column elements. All it does is turn basic HTML into something that the Smithsonian isn't going to request for their &lt;em&gt;History of Computing&lt;/em&gt; exhibit.&lt;/p&gt;

&lt;p&gt;There's a demo on &lt;a href="https://newcss.net"&gt;newcss.net&lt;/a&gt; and it's fully open-source on &lt;a href="https://github.com/xz/new.css"&gt;github.com/xz/new.css&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Let me know what you think. If you have any comments, questions, please let me know!&lt;/p&gt;

</description>
      <category>css</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
