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

Related tags

CSS new.css
Overview

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">

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">

npm

npm i @exampledev/new.css

Yarn

yarn add @exampledev/new.css

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

See pre-made themes at newcss.net/themes.

Customizing Themes

Information is available on the wiki.

FAQ

Why should I use this instead of (popular framework)?

new.css wasn't made to be a true framework. It's made for rapidly prototyping your raw HTML or setting up a good-looking simple HTML site with zero configuration.

Does this work with (platform/service)?

new.css was designed to work with nothing but raw HTML, but some awesome community members are porting it to other platforms.

Check if your platform or service supports custom CSS. If it does, it'll probably work. You're welcome to ask the community as well.

Sponsors

Special Thanks



Powered by Vercel

Comments
  • Remove bottom margin on clickable images

    Remove bottom margin on clickable images

    Here is current rule applied to img:

    img {
	/* Margins for most elements */
	margin-bottom: 1rem;
}

    A clickable image appeared with an empty space below it:

    image

    So I added a rule to prevent this.

    opened by alexislefebvre 3
  • change font size of code

    change font size of code

    Hello! I have made this small change so that code scales based on its containing element. For example, code included in a title is title-sized.

    Before: Screenshot 2020-06-25 at 18 21 15

    After: Screenshot 2020-06-25 at 18 20 38

    Hopefully I've followed the right procedure and etiquette for this - I've never done a pull request before! Thanks for making this project, it's really useful.

    opened by alexandergill 2
  • Cleaner rem-values, fixed input zoom mobile

    Cleaner rem-values, fixed input zoom mobile

    Small updates which enhances the CSS quality

    • removed body border-radius
    • changed main body font-size to 1rem
    • increased headline line-height to 1.3
    • fixed some uneven rem-values with 8pt-grid-system in mind
    • added font-size: 1rem; to text input fields to prevent zooming in mobile browsers
    opened by halfmage 2
  • Remove font import in lite.css

    Remove font import in lite.css

    https://newcss.net/ claims that the lite.css "uses the system font stack rather than importing one.". This commit actually removes the line from the lite.css that imports the font according to the CONTRIBUTING.md guide.

    opened by Takios 2
  • Fix CSS links, and create Material theme

    Fix CSS links, and create Material theme

    Strangely, hrefs for CSS started by a /, instead of nothing that caused CSS not loading.

    Also, I added a Material theme thanks to the colors of Material Oceanic theme from Material Theme UI.

    A quick preview of how the theme is looking: image

    opened by QuiiBz 2
  • Fix header width on Safari (13.0.4) and Chromium (78.0.3882.0) / Chrome

    Fix header width on Safari (13.0.4) and Chromium (78.0.3882.0) / Chrome

    On Safari 13.0.4, the following is rendered on newcss.net:

    image

    Also on Chromium (78.0.3882.0) / Default Chrome:

    image

    Comparing this to Firefox (76.0.1):

    image

    I think Firefox is how it's supposed to look.

    opened by jeff-kroot 2
  • Markdown to html with new.css

    Markdown to html with new.css

    Thanks for this great framework!

    I wrote a simple python converter from a plain markdown to an html with new.css. Just for your information :smile:

    https://github.com/matsui528/markdown2newcss

    opened by matsui528 1
  • Prevent hover action when disabled

    Prevent hover action when disabled

    Summary

    I made the hover action only when enabled. Because if there is a hover action when disabled, an affordance that expects to be pressed will occur.

    Screenshot

    | before | after | | ---- | ---- | | before-output | after-output |

    opened by ln-north 1
  • Update README.md

    Update README.md

    Features of new.css added Note about being a learning resource for novice web developers added Answers FAQ if new.css allows websites to be mobile-friendly Link to contributing guidelines added

    opened by nehemieyac 1
  • Calendar icon in date input is barely visible (dark mode)

    Calendar icon in date input is barely visible (dark mode)

    Description

    When the web browser is in "dark" mode, the calendar icon on the right side of the date input is barely visible, as shown here:

    image

    The issue is not present when the web browser is in "light" mode, as shown here:

    image

    To reproduce

    1. Configure your computer so that apps use their "dark" mode by default.

      image

    2. Use a web browser to visit the official new.css demo site: https://newcss.net/demo/

    3. Use the web browser's Developer Tools to edit an existing <input ... /> element so its type attribute has a value of date. For example:

      - <input type="email" name="email" required="">
+ <input type="date" name="email" required="">

      image

    4. See that the calendar icon in the date input field is barely visible.

    Environment information:

    • OS: Windows 10
    • Browser: Brave Version 1.36.116 Chromium: 99.0.4844.74 (Official Build) (64-bit)

    Based upon what I see in the demo site's HTML source code (excerpt shown below), I think it is using new.css version 1.1.2:

    <head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/inter.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
</head>
    opened by gitname 0
  • Pre-made themes are not working at the moment

    Pre-made themes are not working at the moment

    Night and Terminal themes are currently not working, or at least they don't work for me, what I did was pasting <link rel="stylesheet" href="https://newcss.net/theme/night.css"> inside <head>, default theme does work though

    opened by 9ndres 0
  • Accent Color

    Accent Color

    accent-color property is still not fully supported, but this will be pretty neat feature. It will change background color of checkboxes and radios to the theme color.

    Read more on mdn

    Can I use

    opened by logotip4ik 0
Releases(v1.1.3)

  • v1.1.3(May 20, 2020)

    Since 1.0.0:

    Style

    • fixed header size issue on Chrome and Safari
    • form fields are more visible

    Package

    • published on npm as @exampledev/new.css

    Optimization

    • files now delivered through jsDelivr
      • minified files are generated automatically, so seperate .min.css file was redundant and removed
    • Inter font no longer delivered through new.css file, instead imported through xz/fonts
    Source code(tar.gz)
    Source code(zip)
Owner
xz makes free, open-source web dev tools and curated resource lists.
null
GitHub https://newcss.net
A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.

REVENGE.CSS The premise of revenge.css is simple: A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in com

Heydon Pickering 724 Dec 31, 2022
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Modern framework to print the web correctly.                                               

Modern framework to print web pages correctly How to use Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg

Fabien Salathe 4.6k Dec 29, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
A modern alternative to CSS resets

normalize.css A modern alternative to CSS resets NPM npm install --save normalize.css CDN See https://yarnpkg.com/en/package/normalize.css Download Se

Nicolas Gallagher 49.4k Jan 5, 2023
A tiny modern CSS reset

minireset.css A tiny modern CSS reset that covers the basics: resets the font sizes: so that using semantic markup doesn't affect the styling resets t

Jeremy Thomas 2.6k Dec 29, 2022
A bare-bones CSS reset for modern web development.

A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm

Andy Bell 2.7k Jan 1, 2023
🚿 A modern CSS reset

Modern CSS reset Installation npm install --save ress or bower install --save ress Features Apply box-sizing: border-box; in all elements. Reset paddi

● filipe 1.9k Jan 4, 2023
A modern alternative to CSS resets

A modern alternative to CSS resets

Nicolas Gallagher 49.4k Jan 1, 2023
A modern, responsive CSS boilerplate library to kickstart any web-based project.

Peacock CSS Peacock is a modern, responsive CSS boilerplate library to kickstart any web-based project. It is simple, lightweight and it contains all

Binary Birds 8 Jan 23, 2022
RxHtmlButtonLibrary - Html Button Styling Library by roxunlimited.com using CSS and jQuery.

rxHTMLButton Library v0.3 rxHTMLButton Library will work on almost every HTML tag. It will smoothly work on 'a href link', 'button type button', 'inpu

roxunlimited 0 Sep 16, 2022
The fastest way to build beautiful Electron apps using simple HTML and CSS

Photon UI toolkit for building desktop apps with Electron. Getting started Clone the repo with git clone https://github.com/connors/photon.git Read th

Connor Sears 9.9k Dec 29, 2022
Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy A Collection of some of the best jokes. This is a Web Application with some jokes related to coding & Dark Humor. Created with data from the Jok

Awais Amjed 7 Jul 28, 2022
A small codebase to simulate environment of a real software engineering job built using html/css/js

How to setup your development environment? Before you can begin, you will need git, node, and a text editor. If you are running Windows, we recommend

JobSimulator 89 Dec 21, 2022
Write your resume in Markdown online.

Oh, Resume! Word and LaTex are too overkill for a resume. So why not write it in Markdown? Have fun: oh-resume.zxh.io WIP Notice Highly recommend usin

Xiaohan Zou 42 Dec 24, 2022
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022