JSS is an authoring tool for CSS which uses JavaScript as a host language.

Overview

JSS

Version License Downlodas Size Contributors Build Status OpenCollective OpenCollective

A lib for generating Style Sheets with JavaScript.

For documentation see our docs.

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Supporters

Thanks to BrowserStack for providing the infrastructure that allows us to run our tests in real browsers and to all awesome contributors.

Comments
  • [jss-nested] target a rule from the same sheet when possible

    [jss-nested] target a rule from the same sheet when possible

    Sometimes we need to create a nested selector targeted to a child class from the same sheet, for e.g. when we want to change a style for some inner element.

    In this case, button is a global selector scoped to the container selector

    {
      container:  {
        '&:hover button': {
          color: 'red'
        }
      }
    }
    

    Results in something like this:

    .container-jss-0-0:hover button {
      color: red;
    }
    

    Now we want to target an element with generated class name:

    {
     button: {
       color: 'blue' 
     },
      container:  {
        '&:hover button': {
          color: 'red'
        }
      }
    }
    

    Now we checked that button is defined on the same sheet, so lets use the generated for it selector.

    .container-jss-0-1:hover .button-jss-0-0 {
      color: red;
    }
    
    enhancement 
    opened by kof 69
  • New old id generation algorithm - back to the future

    New old id generation algorithm - back to the future

    Me and @iamstarkov just had a discussion about #356 and decided to reimplement the id generation algorithm.

    Right know we JSON.stringify the rules and generate hashes with murmurhash in order to have predictable unique class names in order to support SSR.

    We found a way to avoid that overhead and still support SSR.

    1. We revert the algorithm to the very first version where simple counters have been used to ensure the uniqueness.
    2. In order to support SSR, JSS will generate a "rulesmap", which will be used then at runtime on the client in order to obtain the original ids, generated on the server.

    This will not only allow us to implement unique class names for dynamic rules in #356 but will also increase an overall performance by factor 3.

    cc @nathanmarks @cvle @iamstarkov @typical000 @sapegin @oliviertassinari

    enhancement important 
    opened by kof 53
  • [react-jss][jss-nested] function value doesn't work for nested levels

    [react-jss][jss-nested] function value doesn't work for nested levels

    From @tibbus on July 16, 2018 15:37

    It worked on 8.6.0 but it doesn't work on 8.6.1 Even though I saw this : https://github.com/cssinjs/jss/issues/682

    Ex. the below code works on 8.6.0, but it doesn't work anymore and a warning is displayed in the console :

    Warning: [JSS] Could not find the referenced rule fieldLabel ....

    export default {
      flowLayout: {
        padding: '5px'
      },
      fieldLabel: {
        background: 'blue'
      },
      layoutGroup: {
        '&.flowLayout': {
          '& $fieldLabel': {
            marginBottom: () => {
              return '500px';
            }
          }
        }
      }
    };
    

    Copied from original issue: cssinjs/react-jss#280

    bug complexity:moderate 
    opened by HenriBeck 39
  • Added jss keyframes helpers package

    Added jss keyframes helpers package

    What this package does:

    • Create keyframes with a unique id
    • Reuse stylesheets for the same jss instance
    • Support multiple jss instances
    • Server-side rendering support by collecting the stylesheets in a sheet registry
    enhancement idea 
    opened by HenriBeck 38
  • Mono Repo and NPM org

    Mono Repo and NPM org

    I would like to propose to move the whole Jss project into a Lerna mono repo like babel and other projects did. I would also then move to a fixed mode for the versioning (like babel). This would also solve some problems with maintaining all of the dev dependencies of the repositories.

    This would include the following repositories:

    • jss
    • react-jss, styled-jss and aphrodite-jss
    • all of the currently provided plugins by Jss

    Another idea would be to create npm organization and publish most packages under this organization.

    • jss -> @jss/core
    • react-jss (integrations) -> @jss/react
    • jss-expand (plugins): @jss/plugin-expand
    important complexity:moderate 
    opened by HenriBeck 38
  • [jss-expand] Plugin for using css shorthands in a MUCH nicer way

    [jss-expand] Plugin for using css shorthands in a MUCH nicer way

    Currently in CSS and JSS we write:

    button: {
      background: 'no-repeat 50% 50%'
      backgroundSize: 'auto 22px'
    }
    

    Much nicer would be to write:

    button: {
      background: {
        repeat: 'no-repeat',
        position: '50% 50%', 
        size: ['auto', 22] // bonus - numeric value will allow jss-default-unit to set the default unit.
      }
    }
    
    idea 
    opened by kof 38
  • Add `unpkg` key to package.json

    Add `unpkg` key to package.json

    This provides a completely bundled distribution, ready for importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work natively in the browser:

    import { create as createJSS } from 'https://unpkg.com/jss';
    

    The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get sizeSnapshot to work with the bundled version.

    I also wonder how best to handle plugins/presets. The easiest options would be to add unpkg entry points to each package, and force authors to use multiple imports:

    import { create as createJSS } from 'https://unpkg.com/jss';
    import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default';
    

    I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle jss-all that exports all the other packages. Then usage would be:

    import * as jssAll from 'https://unpkg.com/jss-all';
    
    const jss = jssAll.create(jssAll.preset());
    

    Todo

    • [x] Add unpkg field to every package
    • [ ] ~~Understand and fix the sizeSnapshot crash~~
    • [x] Make a jss-starter-kit package.
      • [x] console.warn that it's for learning and prototyping only, not bundled for production use.
    • [x] Changelog
    • [x] Docs here
    opened by appsforartists 37
  • Support conditional rule groups for named styles

    Support conditional rule groups for named styles

    As a result of https://github.com/jsstyles/jss/pull/45

    We need to support conditional rule groups like @media in named style sheet https://developer.mozilla.org/de/docs/Web/CSS/At-rule

    One proposal would be to write it like this

    {
        myName: {
            condition: '@media (min-width: 1024px)',
            color: 'blue'
        }
    }
    

    Another proposal

    {
        button1: {
            color: 'red'
        },
        '@media screen and (min-width: 768px)': {
            button1: {
                color: 'green'
            },
            button2: {
                color: 'blue'
            }
        }
    }
    
    
    opened by kof 37
  • [jss-important] Create a plugin which makes every value important.

    [jss-important] Create a plugin which makes every value important.

    To increase specificity and avoid external CSS can break your component, add !important flag to every property automatically.

    • [ ] make it possible to disable that plugin on style sheet level: jss.createStyleSheet({}, {important: false})
    • [ ] make it possible to disable that on a rule level: jss.createStyleSheet({button: { important: false, color: 'red'}})
    idea plugin 
    opened by kof 36
  • deleteRule causes lag when deleting many nodes

    deleteRule causes lag when deleting many nodes

    Hello, I noticed that when using with React, JSS causes a lag when removing many nodes. This is screenshot when removing 80 000 nodes.

    image

    Versions (please complete the following information):

    • jss: 10.4.0
    • Browser: Chrome
    • OS: macOS
    opened by mario1ua 35
  • [react-jss] Version 10.0.3 contains breaking change in Typescript definitions

    [react-jss] Version 10.0.3 contains breaking change in Typescript definitions

    Expected behavior: In version 10.0.0 and above, the TS definition clearly states that, if user wants to use theme in the function, Theme type must be supplied to the generic createUseStyles type as follows:

    declare function createUseStyles<T, C extends string>(
      styles: (theme: T) => Record<C, Style | string>,
      options?: {
        index?: number
        name?: string
        theming?: Theming<T>
      } & StyleSheetFactoryOptions
    ): (data?: any) => Record<C, string>
    

    Thus user could use types styles with provided theme as follows:

    const useStyles = createUseStyles<Theme, "checkboxWrapper" | "input">((theme: Theme) => ({
    	checkboxWrapper: {
    		display: "inline-flex",
    		alignItems: "center",
    		fontSize: theme.utils.pxToRem(14),
    	},
    	input: {
    		marginRight: theme.utils.pxToRem(6),
    	}
    }));
    

    And the useStyles hook would return proper classNames.

    Describe the bug: In [email protected] a new typescript definitions were introduced which are breaking against previous behavior. The Theme argument no longer needs to be supplied to the generic which means that every usage of createUseStyles is now broken.

    declare function createUseStyles<C extends string = string>(
      styles: ((theme: any) => Styles<C>),
      options?: CreateUseStylesOptions
    ): (data?: unknown) => Classes<C>
    

    Recommended fix Revert this behavior under 10.0.4 version and release a new major version with this breaking change, according to the semver.

    Codesandbox link: Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

    Versions (please complete the following information):

    • react-jss: 10.0.3
    • Browser [e.g. chrome, safari]: yes
    • OS [e.g. Windows, macOS]: yes Feel free to add any additional versions which you may think are relevant to the bug.
    typescript 
    opened by pajasevi 35
  • Docs are not able to load github's markdown files

    Docs are not able to load github's markdown files

    Expected behavior: The documentation site should display all the documentation correctly

    Describe the bug: The documentation pages that depend on file URLs like https://raw.githubusercontent.com/cssinjs/jss/v10.9.2/docs/features.md are blank because the URL is no longer valid.

    Reproduction: visit https://cssinjs.org/features?v=v10.9.2 or any other page that depends on .md files for documentation

    opened by Ashuto7h-0 0
  • Re-rendering root node breaks dynamic styles

    Re-rendering root node breaks dynamic styles

    Expected behavior: The root component of a React app that is using react-jss for styles should be able to re-render and not break the styling of its child components.

    Describe the bug: This bug occurs when the root node of a React app re-renders and then later an instance of a child component unmounts when another instance of the same component mounts.

    From my research, it looks like this is caused by the indexOf check in RuleList's remove function. The indexOf uses strict equality checks which fails to find a match after the re-render. The rule is no longer strictly equal due to something with how the provider works. This means that you are splicing with a -1 index, effectively removing the wrong items from the list.

    ['a', 'b', 'c'].splice(-1, 1)
    // ['c']
    

    This could be fixed by refactoring that line in RuleList from:

    this.index.splice(this.index.indexOf(rule), 1)
    

    to:

    const index = this.index.findIndex(v => v.key === rule.key);
    if (index > -1) {
        this.index.splice(index, 1)
    }
    

    You could also update the provider so that it doesn't return a different object instance.

    Reproduction: You can see an example of this failure on this codepen. In that example one instance of the component is unmounting while another is mounting. The cleanup function for the first instances's dynamic styles runs after the second instance has created its sheet and it removes the new sheet.

    Versions (please complete the following information):

    • jss: 10.9.2
    • Browser [e.g. chrome, safari]: Chrome
    • OS [e.g. Windows, macOS]: macOS

    This is possibly related to https://github.com/cssinjs/jss/issues/917, though that issue has been closed.

    opened by WalterWeidner 0
  • Support @layer property

    Support @layer property

    Hello, I'm trying to make new @layer property work with JSS (wrap all my JSS inside @layer test { /*all my jss here */ }), but the only way I was able to do it is hack methods that output JSS to string and hardcode it there. Any suggestions on how to do it properly?

    opened by pearcake 2
  • dynamic css issue under a certain condition since version 10.9.1-alpha.1

    dynamic css issue under a certain condition since version 10.9.1-alpha.1

    Expected behavior: work same as 10.9.1-alpha.0

    Describe the bug:

    when my component get re-rendered several times and it depends on another component which use dynamic function. then the dynamic css class of the dependent component is missing. From what I observer: there are several prerequisites to trigger the issue.

    1. make some operations to cause components re-render
    2. having a nested element inside a dynamic css function.

    Reproduction:

    https://codesandbox.io/s/stupefied-minsky-lw7wxs

    Versions (please complete the following information):

    • jss: 10.9.2
    • Browser [e.g. chrome, safari]: chrome
    • OS [e.g. Windows, macOS]: macOS encountered the issue since 10.9.1-alpha.1

    Managing expectations:

    Maintainers will not be fixing the problem you have unless they have it too, if you want it to get fixed:

    1. Submit a PR with a failing test
    2. Discuss a solution
    3. Implement it

    You can also do the first step only and wait for someone else to work on a fix. Anything is much better than nothing.

    opened by pei-wang 2
  • Support @container query

    Support @container query

    __Is your feature request related to a problem?

    I would like to be able to use the new media query property "@container" on my styles.

    Describe the solution you'd like I would like to be able to use the property @container in the same way as we use @media queries in the library.

    Are you willing to implement it? No

    opened by a-maggi 2
Releases(v10.9.2)
  • v10.9.2(Jul 31, 2022)

  • v10.9.1(Jul 21, 2022)

  • v10.9.1-alpha.2(Apr 24, 2022)

  • v10.9.1-alpha.1(Apr 23, 2022)

  • v10.9.1-alpha.0(Apr 16, 2022)

  • v10.9.0(Dec 8, 2021)

    Bug fixes

    • [jss, jss-plugin-global, jss-plugin-nested, jss-plugin-rule-value-function] Fixes a memory leak with nested function rules 1574

    Improvements

    • Keep classes ref when sheet and dynamicRules have not any change 1573
    Source code(tar.gz)
    Source code(zip)
  • v10.8.2(Oct 25, 2021)

  • v10.8.1(Oct 16, 2021)

  • v10.8.0(Sep 18, 2021)

  • v10.7.1(Jun 28, 2021)

  • v10.7.0(Jun 27, 2021)

  • v10.6.0(Mar 14, 2021)

    Improvements

    • [*] Define specific polyfills for specific packages that will be required and define a policy for adding polyfills. Makes sure we will notice if a polyfill is needed in a supported browser by failing the CI. 1456
    • [jss] Use globalThis to support secure version of JavaScript called SES 1449
    • [jss][ts] Styles now supports ClassNames, Props/Data, and Theme as type parameters (eg. Styles<Names, Data, Theme>). 1460
    • [react-jss][ts] withStyles and createUseStyles now support ClassNames, Props, and Theme as type parameters (eg. createUseStyles<Names, Props, Theme>). 1460
    • [react-jss][ts] useStyles finally expects the correct argument type: a Props object with an optional Theme property (both determined from createUseStyles). 1460
    • [react-jss][ts] Support global TS theme definition 1453
    • [react-jss][ts] Allow partial classes prop in withStyles() 1428

    Breaking Changes

    • [react-jss][ts] Theme is no longer the first generic type parameter for createUseStyles. 1460
      • There are two main ways to tell TS your Theme's type without reaching over the other type parameters:

    Using the function argument.

    const useStyles = createUseStyles(theme: Theme => ({
      ruleName: { /* ... */ };
    }))
    

    Using the object argument with a function. (You will only need to specify the Theme type once.)

    const useStyles = createUseStyles({
      ruleName: ({theme}: {theme: Theme}) => ({
        /* ... */
      })
    })
    
    Source code(tar.gz)
    Source code(zip)
  • v10.5.1(Jan 23, 2021)

    Bug fixes

    • [jss-plugin-default-unit] Fix crash in Chrome 88 when NaN is used by the user 1446
    • [jss] Fix TS intellisense suggestions 1423

    Improvements

    • [jss-plugin-default-unit] Add px as default unit for text-decoration-thickness 1438
    • [jss-plugin-default-unit] Add px as default unit for row-gap 1436
    • [*] Allow project to be in a directory that contains spaces 1433
    Source code(tar.gz)
    Source code(zip)
  • v10.5.0(Nov 15, 2020)

    Bug fixes

    • [jss] Restore TypeScript support for Observable styles 1402
    • [jss-plugin-default-unit] Fix missing default unit for 0ms and 0% 1413

    Improvements

    • [*] Improve docs 1384, 1387, 1391,
    • [*] Remove test files from the package 1406
    • [*] Upgrade rollup 1426
    • [*] Upgrade flow to 0.138.0 1425
    • [jss-plugin-default-unit] aAdd gap unit 1403
    • [jss-plugin-default-unit] Add default units to logical properties 1415
    • [jss] Improve deleteRule() performance 1424
    Source code(tar.gz)
    Source code(zip)
  • v10.4.0(Aug 14, 2020)

    Bug fixes

    • [jss-plugin-extend] Fix can not extend rule name is array 1357
    • [*] Fix yarn build for windows 1376

    Improvements

    • [jss] Bump csstype to 3.0.2 1379
    • [react-jss] TypeScript support for innerRef prop 1355
    • [react-jss] TypeScript fix theme types 1349
    • [react-jss] Add properly react default props types calculation 1353
    • [react-jss] Upgrade Theming to 3.3.0 1382
    • [*] Upgrade flowtype to 0.131.0 1382
    Source code(tar.gz)
    Source code(zip)
  • v10.3.0(Jun 10, 2020)

  • v10.2.0(Jun 3, 2020)

    Improvements

    • [react-jss] TS fixes 1310
    • [jss] TS fixes 1318
    • [examples] Convert plugin examples to codesandbox 1316

    Bug fixes

    • [jss-plugin-rule-value-function] Fixed missing dependency to tiny-warning 1315
    • [jss-plugin-vendor-prefixer] Correct prefixing of writing-mode property 1326
    Source code(tar.gz)
    Source code(zip)
  • v10.1.1(Mar 15, 2020)

  • v10.1.0(Mar 15, 2020)

    Bug fixes

    • [jss] Fix multiple .addRule calls with font-face (1280)
    • [jss] Allow a Comment node as insertion point (1284)

    Improvements

    • [jss-plugin-rule-value-function] Add warning when using a function value inside a function rule (1285)
    • [react-jss] Typescript support for createUseStyles theme (1294)
    • [jss, react-jss] - getDynamicStyles utility function was originally exposed from jss package, but I don't think it was used externally, so I moved it to react-jss package and made it internal. If you have been using it as public API let me know, we will have to revert the change.
    • [examples] Migrate examples to monorepo (1306)

    Features

    • [jss-plugin-default-unit] Allow options to pass function transforms in (1292)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.4(Jan 28, 2020)

    Bug fixes

    • [react-jss] Add type alias for WithStyles (1254)
    • [react-jss] Fix ts typings for hook, created common interface for options (1266)
    • [react-jss] Revert strict style types for ts, since it's a breaking change and needs much more work done upfront (1270)

    Improvements

    • [css-jss] Add TypeScript type definitions (1247)
    • [react-jss] Accept options.generateId in useStyles() and withStyles() as an option (1263)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.3(Jan 1, 2020)

    Improvements

    • [jss] Improve JssStyle definition (1218)
    • [react-jss] Improve createUseStyles definition (1218)

    Bug fixes

    • [jss] Fix create definitions to allow minify: boolean (1218)
    • [jss] Fix Name Typescript constraint (1218)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.2(Dec 30, 2019)

  • v10.0.1(Dec 28, 2019)

    Bug fixes

    • [jss-plugin-vendor-prefixer] Upgrade css-vendor package to v2.0.7 (1208)
    • [jss] Fix sheet.addRule() support for duplicate rule names (1242)
    • [react-jss] Fix function values support inside of nested media queries when component is a list item (1242)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.0(Sep 22, 2019)

    Summary

    A higher level overview of v10 release.

    • [react-jss] A new hooks-based API has been released and became the new default way to use JSS with React.
    • [jss] Keyframe IDs are now scoped by default.
    • [jss] Function values, function rules and observables apply plugins by default now, which means they can support all kinds of syntaxes: e.g. fallbacks, media queries, nesting, global styles.
    • [jss] Houdini Typed CSSOM Values are supported now.
    • [all] Each package supports ESM modules import, also possible directly from https://unpkg.com/.
    • [all] Added TypeScript type definitions to this repository.

    For more details please read the rest of the changelog and migration guide

    Breaking Changes

    • [jss] SheetsRegistry.toString(options) will now return all sheets by default, no matter detached or attached. You can specify which one you want by using the option registry.toString({attached: true}) (1140)
    • [jss] Add option for opt-in minification of class names. (#1075)
    • [jss] Observables, function values and rules are now standalone packages, not part of the core. They are still part of the default preset though.
    • [jss] Function values, rules and observables apply plugins by default now, which means they can support all plugin defined syntaxes, but they are also slower by default. To speed them up use sheet.update(data, {process: false}) for fn values/rules and jss.use(pluginObservable({process: false})) when setting up observables plugin. (#682)
    • [jss] Rule @keyframes has now scoped name by default, which means that you can access it using $ref from the same sheet and generate global one as before using @global rule (#346).
    • [jss] Add scoped keyframes support (#346)
    • [react-jss] Move JssContext to new React Context, deprecate the sheetOptions prop on the JssProvider and support a media prop (#924)
    • [react-jss] Remove inject option (#934)
    • [react-jss] Extend classes instead of overwriting theme (#946)
    • [react-jss] Add forwardRef support (#943)
    • [react-jss] Upgrade to theming version 3 (#942)
    • [jss|react-jss] Options createGenerateClassName and generateClassName are renamed to createGenerateId and generateId because the same function is now used to scope @keyframes rules.
    • [react-jss] Drop support for older React versions, require v16.3 or higher (#868, #851)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.0-alpha.27(Sep 22, 2019)

    Bug fixes

    • [react-jss] Add fallback for Number.MIN_SAFE_INTEGER, because not supported by IE <= 11 (1197)
    • [jss-plugin-vendor-prefixer] Fix fallbacks syntax support regression (1198)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.0-alpha.26(Sep 22, 2019)

  • v10.0.0-alpha.25(Sep 16, 2019)

  • v10.0.0-alpha.24(Aug 13, 2019)

    Bug fixes

    • [react-jss] Fix nested dynamic rule updating (1144)
    • [jss] Support falsy value from fn rule (1164)

    Improvements

    • [react-jss] Improve TypeScript definitions and add missing definition for createUseStyles (1155)
    • [jss-plugin-default-unit] Consistent usage of the CSS browser API (1168)
    Source code(tar.gz)
    Source code(zip)
  • v10.0.0-alpha.23(Jul 20, 2019)

  • v10.0.0-alpha.22(Jul 2, 2019)

    Breaking Changes

    • [jss] SheetsRegistry.toString(options) will now return all sheets by default, no matter detached or attached. You can specify which one you want by using the option registry.toString({attached: true}) (1140)

    Bug fixes

    • [react-jss] SSR for the hooks based API will now work with the registry as expected (1140)
    • [react-jss] When id options passed to JssProvider, we need to create a new generateId function (#1147)

    Improvements

    • [react-jss] Document id prop for JssProvider, add "Class name generator options" to the docs. (#1147)
    • [react-jss] Use component name or displayName as a class name prefix also in production by default (#1147)
    Source code(tar.gz)
    Source code(zip)
Owner
JSS
This project contains a core library, plugins and number of related reusable packages.
JSS
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 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
Automatically convert those LESS file which is not using less function to CSS.

less-2-css Automatically convert those .less file which is not using less function to .css. Why Less is a powerful CSS pre-processor, but it also very

UmiJS 14 May 24, 2022
Semantic is a UI component framework based around useful principles from natural language.

Semantic UI Semantic is a UI framework designed for theming. Key Features 50+ UI elements 3000 + CSS variables 3 Levels of variable inheritance (simil

Semantic Org 50.3k Dec 31, 2022
A powerful little tool for managing CSS animations

NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.

Daniel Raftery 2.1k Jan 2, 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
Chrome extension that creates a button on Lever job application pages which shows you how their api parses your resume.

EDIT I have helped make a website that provides the same functionality. Repo: https://github.com/KnlnKS/resume-parser Site: https://resume-parser.verc

Kunalan Kevin Subagaran 17 May 19, 2022
A gnome-shell extension to keep the old topbar corners, which were removed for GNOME 42.

Panel corners A GNOME shell extension to keep the old topbar corners, which were removed for GNOME 42. It also allows you to customize the rounded cor

Aurélien Hamy 34 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