Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

🔗 Don't know what type of hash it is? Name That Hash will name that hash type! 🤖 Identify MD5, SHA256 and 3000+ other hashes ☄ Comes with a neat web app 🔥

Stars: ✭ 540 (-22.08%)

Mutual labels: hash

Glamorous Native

React Native component styling solved💄

Stars: ✭ 566 (-18.33%)

Mutual labels: css-in-js

Gatsby Starter Hero Blog

A ready to use, easy to customize, fully equipped GatsbyJS starter with a 'Hero' section on the home page.

Stars: ✭ 500 (-27.85%)

Mutual labels: css-in-js

Robin Hood Hashing

Fast & memory efficient hashtable based on robin hood hashing for C++11/14/17/20

Stars: ✭ 658 (-5.05%)

Mutual labels: hash

Awesome Css In Js

Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision

Stars: ✭ 548 (-20.92%)

Mutual labels: css-in-js

Aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Stars: ✭ 5,257 (+658.59%)

Mutual labels: css-in-js

React Redux Saga Boilerplate

Starter kit with react-router, react-helmet, redux, redux-saga and styled-components

Stars: ✭ 535 (-22.8%)

Mutual labels: css-in-js

Specs

Content-addressed, authenticated, immutable data structures

Stars: ✭ 539 (-22.22%)

Mutual labels: hash

Csjs

✨ Modular, scoped CSS with ES6

Stars: ✭ 578 (-16.59%)

Mutual labels: css-in-js

John

John the Ripper jumbo - advanced offline password cracker, which supports hundreds of hash and cipher types, and runs on many operating systems, CPUs, GPUs, and even some FPGAs

Stars: ✭ 5,656 (+716.16%)

Mutual labels: hash

Design System

Priceline.com Design System

Stars: ✭ 604 (-12.84%)

Mutual labels: css-in-js

Securitydriven.inferno

✅ .NET crypto done right. Professionally audited.

Stars: ✭ 501 (-27.71%)

Mutual labels: hash

Otion

Atomic CSS-in-JS with a featherweight runtime

Stars: ✭ 563 (-18.76%)

Mutual labels: css-in-js

React Css Components

Define React presentational components with CSS

Stars: ✭ 689 (-0.58%)

Mutual labels: css-in-js

Jquery.localscroll

Animated anchor navigation made easy with jQuery

Stars: ✭ 624 (-9.96%)

Mutual labels: hash

Openhashtab

📝 File hashing and checking shell extension

Stars: ✭ 599 (-13.56%)

Mutual labels: hash

View All Similar Projects ➔

Free-Style

Free-Style is designed to make CSS easier and more maintainable by using JavaScript.

Installation

npm install free-style --save

Why?

There's a great presentation by Christopher Chedeau you should check out.

Solved by using CSS in JS

No global variables (What and where is .button? Why is it conflicting?)
Defined dependency systems (CommonJS, Require.js, <script />)
Dead code elimination automatically removes unused styles
Minification through JavaScript tooling
Shared constants and reusable styles
Every style is isolated, tested and namespaced to the JS component
Extensible - everything from Math to color manipulation already exists!

Also solved with Free-Style

Works with third-party DOM components (You can nest regular .class-name in your styles)
Consistently generates styles and class names, and will automatically merge duplicate styles
Develop components alongside the style (No more hunting CSS files for estranged ul > li > a)
Create universal applications and serve styles for only the components rendered (see React Free-Style)
Use the CSS you already know ({ '&:hover': { ... } })
Automatically namespace @-rule styles ({ '@media (min-width: 500px)': { ... } })
Overload CSS properties using arrays ({ backgroundColor: ['red', 'linear-gradient(to right, red 0%, blue 100%)'] })
Small and powerful API that works with any ecosystem (~360 SLOC)

But How?

Free-Style generates a consistent hash from the style, after alphabetical property ordering and formatting, to use as the class name. This allows duplicate styles to automatically be merged on duplicate hashes. Every style is "registered" and assigned to a variable, which gets the most out of linters that will warn on unused variables and features like dead code minification. Using "register" returns the class name used for the Style instance and style instances (returned by create()) can be merged together at runtime to output only the styles on page (e.g. React Free-Style). Styles should usually be created outside of the application run loop (e.g. render()) so the CSS string and hashes are only generated once.

Ways to Use

typestyle - Popular type-safe interface for working with CSS
react-free-style - React implementation that renders styles on the current page (for universal apps)
stylin - Simplest abstraction for creating styles, rules, and keyframes, and keeps <style /> in sync
ethcss - Library for writing CSS with literal objects
This module! - Manually create, compose and manipulate style instances

Usage

var FreeStyle = require("free-style");

// Create a stylesheet instance.
var Style = FreeStyle.create();

// Register a new style, returning a class name to use.
var backgroundStyle = Style.registerStyle({
  backgroundColor: "red",
}); //=> "f14svl5e"

// Inject `<style>` into the `<head>`.
var styleElement = document.createElement("style");
styleElement.textContent = Style.getStyles();
document.head.appendChild(styleElement);

// Render the style by using the class name.
React.render(
  <div className={backgroundStyle}>Hello world!</div>,
  document.body
);

Style

var buttonStyle = Style.registerStyle({
  $displayName: "button",
  backgroundColor: "red",
  padding: 10,
});

console.log(buttonStyle); //=> "button_f65pi0b"

Tip: The string returned by registerStyle is a unique hash of the content and used as the HTML class name. The $displayName is only used during development, and stripped in production (process.env.NODE_ENV === 'production').

Overload CSS Properties

Style.registerStyle({
  background: [
    "red",
    "-moz-linear-gradient(left, red 0%, blue 100%)",
    "-webkit-linear-gradient(left, red 0%, blue 100%)",
    "-o-linear-gradient(left, red 0%, blue 100%)",
    "-ms-linear-gradient(left, red 0%, blue 100%)",
    "linear-gradient(to right, red 0%, blue 100%)",
  ],
}); //=> "f1n85iiq"

Nested Rules

Style.registerStyle({
  color: "red",
  "@media (min-width: 500px)": {
    //=> "@media (min-width: 500px){.fk9tfor{color:blue}}"
    color: "blue",
  },
}); //=> "fk9tfor"

Nested Selectors

Style.registerStyle({
  color: "red",
  ".classy": {
    //=> ".fc1zv17 .classy"
    color: "blue",
  },
}); //=> "fc1zv17"

Parent Selector Reference

Style.registerStyle({
  color: "red",
  "&:hover": {
    //=> ".f1h42yg6:hover"
    color: "blue",
  },
}); //=> "f1h42yg6"

Tip: The ampersand (&) will be replaced by the parent selector at runtime.

Use JavaScript

const ellipsisStyle = {
  whiteSpace: "nowrap",
  overflow: "hidden",
  textOverflow: "ellipsis",
};

const redEllipsisStyle = Style.registerStyle({
  color: "red",
  ...ellipsisStyle,
}); //=> "fvxl8qs"

// Share rule between styles using computed properties.
const mediaQuery = "@media (min-width: 400px)";

const style = Style.registerStyle({
  backgroundColor: "red",
  [mediaQuery]: {
    backgroundColor: "pink",
  },
});

Unique Style Output

Sometimes you need to skip the de-duping behavior of free-style. Use $unique to force separate styles:

Style.registerStyle({
  color: "blue",
  "&::-webkit-input-placeholder": {
    color: `rgba(0, 0, 0, 0)`,
    $unique: true,
  },
  "&::-moz-placeholder": {
    color: `rgba(0, 0, 0, 0)`,
    $unique: true,
  },
  "&::-ms-input-placeholder": {
    color: `rgba(0, 0, 0, 0)`,
    $unique: true,
  },
}); //=> "f13byakl"

Style.getStyles(); //=> ".f13byakl{color:blue}.f13byakl::-webkit-input-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-moz-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-ms-input-placeholder{color:rgba(0, 0, 0, 0)}"

Rules

const colorAnimation = Style.registerStyle({
  $global: true,
  "@keyframes &": {
    from: { color: "red" },
    to: { color: "blue" },
  },
}); //=> "h1j3ughx"

const style = Style.registerStyle({
  animationName: colorAnimation,
  animationDuration: "1s",
}); //=> "fibanyf"

Global Rules

Style.registerStyle({
  $global: true,
  "@font-face": {
    fontFamily: '"Bitstream Vera Serif Bold"',
    src: 'url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf")',
  },
});

Style.registerStyle({
  $global: true,
  "@media print": {
    body: {
      color: "red",
    },
  },
});

Style.registerStyle({
  $global: true,
  body: {
    margin: 0,
    padding: 0,
  },
});

Global Styles

Style.registerStyle({
  $global: true,
  body: {
    margin: 0,
    padding: 0,
    "@print": {
      color: "#000",
    },
  },
  h1: {
    fontSize: "2em",
  },
});

CSS String

Style.getStyles(); //=> ".f65pi0b{background-color:red;padding:10px}"

Useful Libraries

Implementation Details

Debugging

Display names will automatically be removed when process.env.NODE_ENV === "production".

Changes

The only argument to create() is a map of change function handlers. All functions are required:

add(style: Container<any>, index: number)
change(style: Container<any>, oldIndex: number, newIndex: number)
remove(style: Container<any>, index: number)

All classes implement Container, so you can call getStyles(), clone() or get id.

Other Properties and Methods

var OtherStyle = Style.create();

Style.merge(OtherStyle); // Merge the current styles of `OtherStyle` into `Style`.
Style.unmerge(OtherStyle); // Remove the current styles of `OtherStyle` from `Style`.

Legacy Browsers

Version 3 requires support for class, see #82. As of April 2020, that's 95% of browsers. You can import from free-style/dist.es5 for a version compatible with ES5 (IE 11).

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 693

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (3) 🔗