Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Overview


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 the premade styles by the browser. It normalizes the browser's stylesheet for a better cross-browser experience.

Twitter URL GitHub Repo stars

Join 6785 People Already Using Reseter.css

Table Of Contents

Features

  • Adds New Better Styles For Elements
  • Source In 4 Different Formats
  • Reboots styles for a wide range of elements.
  • Corrects bugs and browser inconsistencies.
  • Sized 2.6kb
  • Includes all normalizations
  • Sets `box-sizing: border-box
  • Fully tested

Back To Top

Reseter.css vs Normalize.css vs Sanitize.css vs Reset.css

Feature Reseter.css Normalize.css Sanitize.css Reset.css
Normalizations ✔️ ✔️ ✔️
Basic Elemental Styles ✔️ ✔️
Size (By Bundlephobia) GitHub file size in bytes GitHub file size in bytes GitHub file size in bytes GitHub file size in bytes
Minified Version npm bundle size (Minify Yourself) (Minify Yourself) (Minify Yourself)
GZIP Version npm bundle size (Compress Yourself) (Compress Yourself) (Compress Yourself)
Box Sizing ✔️ ✔️
Browser Support Last 5 Versions
All Not Dead Browsers
Customisable
IE 10+
Safari 8+
Chrome
Firefox ESR+
Opera
Edge
Last 3 Versions
Exception: Safari Last 2
Also Firefox ESR, IE 9+
Unkown

Legend

✔️ - Yes

- No

- Partial

Why Use Reseter.css (Must Read)

Down is the result of a same html file of 3 browsers, all of chrome's headings are bolded nicely. Firefox ones are also bolded but IE ones are bolded too much. The ,font on paragraphs is also bolded in IE. The border of the button is blue in IE. There's A little less border on buttons in Firefox. These Are Only 3 browsers and 5 kinds of tags but there are more then 100 browsers available to the public. No one knows how many of them are not public. In fact 1000's of versions of these 100's of browsers are available. How to keep us with these browsers. The answer is Reseter.css.

Chrome Internet Explorer With Reseter.css
Result Result

Back To Top

Quick Start

Manual

Don't Want To The Manual Method Click Here

Step 1

Create A HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing Reseter.css</title>
  </head>
  <body>
    <h1>This Is The Biggest Heading</h1>
    <h2>This Is A Slightly Smaller Heading</h2>
    <h3>This Is A Slightly Smaller Heading</h3>
    <h4>This Is A Slightly Smaller Heading</h4>
    <h5>This Is A Slightly Smaller Heading</h5>
    <h6>This Is The Smallest Heading</h6>
    <p>A Paragraph</p>
    <a href="">A Link</a>
    <button>A Button</button>
    <ol>
      <li>An List Item Of A Orderd List</li>
    </ol>
    <ul>
      <li>An List Item Of A Unordered List</li>
    </ul>
  </body>
</html>

Step 2

To the head tag add this code

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css/css/reseter.min.css"
/>

You All Set Now!

CodeSandBox

Use This Template

CodePen

Use This Template

Back To Top

Installation

There are various ways to install reseter.css. Like Package Managers, CDNs, Local Copies And Stuff.

Package Managers

NPM - A NodeJs Based Package Manager.

npm install reseter.css

Yarn - A Better Equivalent To NPM.

yarn add reseter.css

PNPM - A Faster NodeJS Based Package Manager

pnpm install reseter.css

Meteor - Another NodeJs Based Package Manager

meteor add krishdevdb:resetercss

Composer - The PHP Package Manager

composer require krishdevdb/reseter.css

Bower - A Package Manager For The Web

bower install krishdevdb/reseter.css

Back To Top

CDN

JsDelivir

Production Ready
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />
Development Version
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css/css/reseter.min.css"
/>

Unpkg

<link rel="stylesheet" href="https://unpkg.com/reseter.css" />

Github

Please Note GitHub CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://github.com/krishdevdb/reseter.css/raw/master/css/reseter.min.css"
/>

RawGit

Please Note RawGit CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://ghcdn.rawgit.org/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

Raw GitHack

Please Note Raw GitHack CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://raw.githack.com/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

Back To Top

Statically

Please Note Statically CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://cdn.statically.io/gh/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

Downloads

Back To Top

Clone Repository

Using Git

git clone https://github.com/krishdevdb/reseter.css.git

Back To Top

Github Cli

gh repo clone krishdevdb/reseter.css

Hub

hub clone krishdevdb/reseter.css

Back To Top

Usage

Import In CSS

This Is The Best Way To Use Reseter.css. First Import Reseter.css then add your custom styles

@import "path/to/reseter.min.css";

.element {
  /** Your Custom Style's Here **/
}
<link
  rel="stylesheet"
  type="text/css"
  href="path/to/your-custom-stylesheet.css"
/>

Back To Top

Link Tag

Using It With A Browser Is Really Simple. First Link To Reseter.css Then Your Custom Stylesheet

<head>
  <link rel="stylesheet" type="text/css" href="path/to/reseter.min.css" />
  <link
    rel="stylesheet"
    type="text/css"
    href="path/to/your-custom-stylesheet.css"
  />
</head>

Back To Top

Warning!

Make Sure To Link Your Custom Stylesheet After Reseter.css Else Your Custom Styles Might Not Be Implemented

React

Apply It Globaly

In your js file

import "path/to/reseter.min.css";

Back To Top

Or

In your global css file

@import "path/to/reseter.min.css";

.element {
  /** Custom Styles **/
}

Then in your js file

import React from "react";
import ReactDOM from "react-dom";
import "./path/to/global.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Back To Top

In A Single Page Using React Helmet

import React from "react";
import { Helmet } from "react-helmet";

export default function Page() {
  return (
    <div>
      <Helmet>
        <link rel="stylesheet" href="path/to/reseter.css" />
        <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

Back To Top

Or

In Your Custom Stylesheet

@import "path/to/reseter.min.css";

.element {
  /**Custom Styles Here**/
}

In Your JS File

import React from "react";
import { Helmet } from "react-helmet";

export default function Page() {
  return (
    <div>
      <Helmet>
        <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

Back To Top

Styled-Components

Globaly

// styles/index.js
import { createGlobalStyle } from "styled-components";
import resetercss from "reseter.css/src/styled-components/js/reseter.js";
/** We also have ts and mjs available
import resetercss from 'reseter.css/src/styled-components/ts/reseter.ts'
import resetercss from 'reseter.css/src/styled-components/js/reseter.mjs'
*/

export const GlobalStyle = createGlobalStyle`
  ${resetercss}

  // You can continue writing global styles here
  body {
    padding: 0;
    background-color: black;
  }
`;

On A Specific Page

// index.js
import React from "react";
import ReactDOM from "react-dom";

import { GlobalStyle } from "./styles";
import { App } from "./app";

const Root = () => (
  <React.Fragment>
    <GlobalStyle />
    <App />
  </React.Fragment>
);

ReactDOM.render(<Root />, document.querySelector("#root"));
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Normalize } from "styled-normalize";

import { App } from "./app";

const Root = () => (
  <React.Fragment>
    <Normalize />
    <App />
  </React.Fragment>
);

ReactDOM.render(<Root />, document.querySelector("#root"));

Vue

In Your Vue File Add This Code

<style>
@import "path/to/reseter.min.css";
</style>

Or

<style scoped src="@/path/to/reseter.min.css"></style>

Or

import Vue from "vue";

require("@/path/to/reseter.min.css");

Next.js

Apply It Globaly

In _app.js inside your pages directory

import "path/to/reseter.min.css";

Or

In your global css file

@import "path/to/reseter.min.css";
.element {
  /** Custom Styles **/
}

Then In Your _app.js

import "path/to/global-styles.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Back To Top

Apply It To A Specific Page

import * from "react";
import Head from "next/head";

export default function Page(){
    return(
        <div>
              <Head>
                  <link rel="stylesheet" href="path/to/reseter.min.css">
                  <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
              </Head>
         </div>
    )
}

Back To Top

Or

In your css file

@import "path/to/reseter.min.css";
.element {
  /** Custom Styles **/
}

Then In Your _app.js

import * from "react";
import Head from "next/head";

export default function Page(){
 return(
 <div>
       <Head>
           <link rel="stylesheet" href="path/to/your-custom.css">
       </Head>
  </div>
 )
}

Back To Top

Know/Want Any Other Usage Option/Platform

Please Add A Issue In Github With The Label Feature Request.

Get Support

This project has a code of conduct. By interacting with this repository, or community you agree to abide by its terms.

Hi! 👋 We’re excited that you’re using reseter.css and we’d love to help.

Support Us

Review

  • Reseter.css - A futuristic CSS reset and normalize | Product Hunt

Spread

  • Twitter: Twitter URL
  • Facebook:
  • Linkedin:
  • Pinterest:
  • Email:

Sponsor

Roadmap

  • Comment Blocks In The Sources

  • Long Documentation

  • Guide

  • And Whatever You Put On The Github Issues WIth The Label Of Feature Request

Authors

krishdevdb
Krish
Github
Email

Contributors


Michael J. Ryan

💻

joejenett

🐛 📖

Vincent Will

📝

phuoc-ng

🔧

Krish Dev DB

💻

Supporters

Stargazers

Forks

Thanks

Stars

Stargazers over time

License

MIT License

Copyright (c) 2021 Krish Dev DB

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Status

This project is currently being maintained. And Will Be Maintained. If You Like This Project And Want This Project To Never Exhaust. Please Consider Donating.

Comments
  • Request: Support Old Tags

    Request: Support Old Tags

    Is your feature request related to a problem? Please describe. Support tags like acronym

    Describe the solution you'd like Use abbr, acronym instead of abbr.

    code improvement good first issue 
    opened by ghost 20
  • font-family for pre/code

    font-family for pre/code

    FYI, using the following, from my own list, and integrated the one in the repository.

    pre,
    code,
    kbd,
    samp {
      font-family: "Fira Code", 
        "Cascadia Code", 
        Consolas, 
        "Inconsolata",
        Monaco,
        Menlo,
        "Noto Mono",
        "Roboto Mono",
        "Droid Sans Mono", 
        "Ubuntu Mono",
        "Ubuntu Monospace",
        "Source Code Pro", 
        "Oxygen Mono",
        "Liberation Mono", 
        "DejaVu Sans Mono", 
        "Bitstream Vera Sans Mono", 
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
      font-size: 1.04rem;
    }
    

    The developer fonts above represent some of the more common fonts, all of which will render/display better than the default which is often a Courier derivative. The above fonts list are all sans-serif developer fonts with an aesthetic which will at least be closer to the default font family.

    Reason on the ordering...

    • Fira Code - the most complete font in terms of fixed width with width-proper emojii support.
    • Cascadia Code - Windows (newer)
    • Consolas - Windows (common)
    • Inconsolata - Consolas look-alike, open-source.
    • Droid Sans Mono - Android
    • Monaco - MacOS
    • Menlo - iOS
    • others - more common alternative fonts installed on different platforms
    • monospace - Default fallback
    • *Emoji - emoji character supprt as fallback
    code improvement 
    opened by tracker1 10
  • Update reseter.css

    Update reseter.css

    Thank you for contributing! Please confirm this pull request meets the following requirements:

    Which change are you proposing?

    • [ ] Adding A New Element's Reset
    • [x] Editing A Old Element's Reset
    • [ ] Removing A Elements's Reset

    Write Something About It Here works on the opacity of placeholder in input. (pseudoelement)


    My PR Meets The Following Criterias:

    • [x] It Redifines Usefull Defaults (If you are doing it for h1 you redifine the font size to be big enough)
    • [x] My Content Is Responsive If Applicable (If you are defining any px values please convert them to rem for responsiveness)
    • [x] My Content Is Tested. That It Doesn't Breaks The Element
    • [x] My Content Is Not My Personal Opinion
    • [ ] I have used the command yarn *:build

    I've added the following sources:

    • [ ] less
    • [ ] scss
    • [ ] sass
    • [ ] stylus

    Fixes #16 Check #16

    opened by himanshu007-creator 9
  • Docs:  Reseter.css Web Site Display Bug

    Docs: Reseter.css Web Site Display Bug

    Describe the bug Under the Tweet and GitHub star buttons display bug

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://krishdevdb.github.io/reseter.css/
    2. See bug

    Expected behavior Not display bug

    Screenshots Screen Shot 2021-04-13 at 12 16 24 Screen Shot 2021-04-13 at 12 16 32

    Desktop (please complete the following information):

    • OS: macOS Catalina ver 10.15.7
    • Browser: Chrome
    • Version: Version 89.0.4389.114 (Official Build) (x86_64)

    Additional context Is it a bug specific to GitHub Pages?

    text fixture 
    opened by yamanoku 8
  • [Feat]: paragraph spacing

    [Feat]: paragraph spacing

    Detailed Description

    Don't have time for a PR at the moment, appended to my local copy, but probably a good idea to add..

    p + p {
      margin-top: 1rem;
    }
    

    Contributing

    • [X] I have read the project's contribution guidelines.

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct

    Anything else?

    No response

    code improvement 
    opened by tracker1 7
  • Word Break inconsistency between Chrome and Firefox

    Word Break inconsistency between Chrome and Firefox

    Is your feature request related to a problem? Please describe. Chrome doesn't wrap its links at all while Firefox does. Chrome uses a different default value for word-break then Firefox as after adding word-break: break-word; on its links it behaved the same way as Firefox did. I also saw that similar questions have come up before and they were put aside because of "unexpected behaviors", but this seems like a special case as it to only happens with the tag so it could be an exception.

    Describe the solution you'd like

    a {
      cursor: pointer;
      color: #3333e1;
      background-color: transparent;
      text-decoration: none;
      word-break: normal;
    }
    

    Additional context Originally Opened By @Gaboris at necolas/normalize.css#851 Plus, Original Solution By @VixieTSQ in necolas/normalize.css#852

    code improvement 
    opened by ghost 7
  • docs: add krishdevdb as a contributor

    docs: add krishdevdb as a contributor

    Adds @krishdevdb as a contributor for blog, content, doc, design, example, ideas, maintenance, infra, platform, review, tool, translation, test, tutorial, talk, video.

    This was requested by krishdevdb in this comment

    opened by allcontributors[bot] 6
  • Bug: Linguistic Issue and referential issue in the readme.md

    Bug: Linguistic Issue and referential issue in the readme.md

    Describe the bug Going through the 'Why do I use a CSS Reset' part, I noticed that there is a Firefox browser referenced in the table, but instead of the firefox heading, the heading says 'with Resetter.css'.

    Also, on the first line of this section, instead of using 'Down is the result', which could be misleading as the status of the website, 'Below is the result' can be used.

    To Reproduce Steps to reproduce the behaviour:

    1. Go to the ReadMe.md page.
    2. Go to section 'Why do I use a CSS Reset'
    3. See the error

    Expected behaviour The table heading should say Firefox, instead of 'with Resetter.css'

    Screenshots image

    Desktop (please complete the following information):

    • NA

    Smartphone (please complete the following information):

    • NA

    Additional context Add any other context about the problem here.

    improvement text 
    opened by meenal21 5
  • Placeholder opacity in FireFox

    Placeholder opacity in FireFox

    Is your feature request related to a problem? Please describe. FireFox (latest version as of posting) has a slightly lower opacity for input placeholders. See my screenshot below. You fix this with:

    I suggest adding it to reseter.css.

    Describe the solution you'd like Fix The Issue By Adding input::placeholder { opacity: 1; } to reseter.css

    Additional context screeshot

    Originally Publish By @starkana in sindresorhus/modern-normalize#46

    code addition 
    opened by ghost 5
  • Request: Downgrade node requirement unless you really need it

    Request: Downgrade node requirement unless you really need it

    Is your feature request related to a problem? Please describe. We are using the LTS version of Node which is not supported by this package.

    Describe the solution you'd like Downgrade the required Node version to the latest LTS.

    Describe alternatives you've considered Upgrading to a non-LTS version is not possible on the project I'm currently working, so not much that can be done here.

    Additional context Screenshot 2021-04-08 at 20 31 59

    fixture dependencies 
    opened by leandrooriente 4
  • showcase.png Image not showing

    showcase.png Image not showing

    @krishdevdb

    showcase image needs to be fixed 
    
    • There seems to be some issue with Image
    • and there is no space after the mark sign I think It will look better if it's fixed

    Screenshot_1

    good first issue help wanted 
    opened by AjRadwan 3
  • [DOCS] Fix `README.md` table

    [DOCS] Fix `README.md` table

    Related Issue

    • Solves #168.
    • Temporarily fixes #169.

    Describe the changes you've made

    • Deleted broken badges in README.md
    • Corrected table markup in README.md

    How has this been tested?

    Looking at the README.md from GitHub's website.

    Checklist

    • [x] I have performed a self-review of my own code.
    • [x] I have followed the code style of the project
    • [x] I have tested my code, and it works without errors

    Additional Information

    Before: Screenshot before changes

    After: Screenshot after changes

    Code of Conduct

    opened by GaryStriving 0
  • [Docs]: Broken badges in the README.md

    [Docs]: Broken badges in the README.md

    Description

    Some badges in the README.md are displaying "File not found".

    Anything else?

    image

    Code of Conduct

    opened by GaryStriving 0
  • [Docs]: Table markup is not displaying correctly

    [Docs]: Table markup is not displaying correctly

    Description

    The table markup in the README.md is displaying the markup as text instead of the actual table

    Anything else?

    README.md table screenshot

    Code of Conduct

    opened by GaryStriving 0
  • chore(deps-dev): bump postcss-cli from 9.0.2 to 10.1.0

    chore(deps-dev): bump postcss-cli from 9.0.2 to 10.1.0

    Bumps postcss-cli from 9.0.2 to 10.1.0.

    Changelog

    Sourced from postcss-cli's changelog.

    10.1.0 / 2022-11-29

    • Allow running --watch mode in non-TTY contexts, like Docker (#448)
    • Update dependencies

    10.0.0 / 2022-06-29

    • BREAKING: Drop Node 12 support (#438)
    • Add support for ESM config files (#437)

    9.1.0 / 2021-12-10

    • Don't write to files if they're unchanged (#320, #417)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • From normalize: Line-height should be 1.5 to comply the WCAG guideline

    From normalize: Line-height should be 1.5 to comply the WCAG guideline

    Original issue in Normalize: https://github.com/necolas/normalize.css/issues/864

    Particularly the bit about Turkish characters is interesting.

    The guideline in question: https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

    Currently using 1.15 in this repo (https://github.com/resetercss/reseter.css/blob/main/css/reseter.css#L10)

    opened by thomashockaday 1
  • Adding colours to the documentation website for better experience.

    Adding colours to the documentation website for better experience.

    Screenshot (66)

    I liked the documentation a lot. Could you add some colourful shades so that the docs become a bit easy to read? I tried changing the color temporarily, which looked better.

    opened by bhavyasingh75 2
Releases(v2.1.0)
Owner
Krish Dev DB
I am developer, who works on opensource projects. Sometimes, I write articles on Medium and Dev.to. I also make some tutorials for coding on YouTube.
Krish Dev DB
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
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
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
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
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
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
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
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
Functional css for humans

TACHYONS Functional CSS for humans. Quickly build and design new UI without writing CSS. Principles Everything should be 100% responsive Everything sh

null 11.3k Jan 4, 2023