OrganiCSS is a collection of mixins for writing logical CSS in different pre-processors and libraries.

Related tags

CSS css less styled-components stylus scss
Overview

OrganiCSS standard logo with icon and name

OrganiCSS is a collection of mixins and functions to support writing progressively-enhanced logical CSS in many different flavors.

Getting Started

To get started using OrganiCSS, install one of the available packages – SCSS, Styled Components, Emotion, Stylus or Less.

npm i @organicss/scss
yarn add @organicss/scss

For specific instructions on the implementation and API, visit the package's documentation.

Why OrganiCSS?

Using OrganiCSS allows writing logical CSS now with the appropriate fallbacks when necessary. Let's look at an example in SCSS.

.container {
    @include margin($blockEnd: 1rem, $inline: auto);
}

This will return the resulting CSS.

.container {
    margin-block-end: 1rem;
    margin-inline-start: auto;
    margin-inline-end: auto;

    @supports not (margin-block-end: 1rem) {
        margin-bottom: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
}

As browser support for logical CSS increases, the @supports query will be less and less necessary. Eventually, leaving only the modern CSS required to create the most flexible and inclusive UIs.

What is Logical CSS?

"The web has firmly shifted into an expectation of responsive, user-friendly sites and products. That fluidity has allowed the platform to scale at tremendous rates, and has fully altered entire markets and industries. But in the pursuit of supporting more and more devices, what happens if one of those devices isn't in English? Or French? Or any other language that flows from top to bottom, left to right?

Building inclusive products doesn't mean supporting devices, but supporting the people using them.

Looking at Hebrew specifically, a language written and read from right to left, there're plenty of styling challenges in handling this minor variation. Instances of text-align: left would need to be conditionally updated to text-align: right or an entirely separate set of styles is loaded, essentially creating a second unique version of the site or product.

What happens then with Japanese, where text flows from top to bottom, and content from right to left? Or Mongolian where the text flows the same, but the content is flipped to flow left to right?

This is where CSS Logical Properties shine. When writing text-align: left, it's likely because the text should be positioned where the content is expected to start. Only, as mentioned, content doesn't always start at the left. So what would be ideal is something like text-align: start to ensure our content is aligned with its expected starting point.

And that's exactly what CSS Logical Properties do."

Read more about Logical CSS

Packages

Package Version
Emotion npm version
Less npm version
SCSS npm version
Styled Components npm version
Stylus npm version
Comments
  • feat: setup base emotion package

    feat: setup base emotion package

    🔐 Closes

    N/A

    🚀 Changes

    • copied styled components package over and updates imports to emotion
    • updates docs to show emotion examples
    • updates root docs to include emotion package

    ⛳️ Testing

    • used a practice demo on codesandbox to test the typescript support and return values
    opened by yuschick 0
  • Support Padding Shorthand Properties

    Support Padding Shorthand Properties

    Is your feature request related to a problem? Please describe. The Padding and Margin mixins support shorthand values for the axis properties. This shorthand support should be extended to the base margin and padding properties.

    Describe the solution you'd like Ideally, these shorthand properties would support a list of up to 4 values.

    The style priority in the fallbacks would be as follows:

    1. Side specific (blockEnd)
    2. Axis specific (block)
    3. Shorthand (padding)
    enhancement All Packages 🚀 
    opened by yuschick 0
  • Support Margin Shorthand Properties

    Support Margin Shorthand Properties

    Is your feature request related to a problem? Please describe. The Padding and Margin mixins support shorthand values for the axis properties. This shorthand support should be extended to the base margin and padding properties.

    Describe the solution you'd like Ideally, these shorthand properties would support a list of up to 4 values.

    The style priority in the fallbacks would be as follows:

    1. Side specific (blockEnd)
    2. Axis specific (block)
    3. Shorthand (margin)
    enhancement All Packages 🚀 
    opened by yuschick 0
  • Support Shorthand Border Radius Property

    Support Shorthand Border Radius Property

    Is your feature request related to a problem? Please describe. The border-radius can support multiple lists of values. This shorthand syntax should be added to the borderRadius mixin.

    Describe the solution you'd like

    Much like the other shorthand properties, the radius prop should accept a variety of list values per MDN.

    enhancement All Packages 🚀 
    opened by yuschick 0
  • Support Shorthand Border Color/Style/Width Properties

    Support Shorthand Border Color/Style/Width Properties

    Is your feature request related to a problem? Please describe. In the border mixin, the borderColor/Style/Width props do not accept a list of values.

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Ideally, these shorthand properties would support a list of up to 4 values, per MDN.

    The style priority in the fallbacks would be as follows:

    1. Side specific (blockEndColor)
    2. Axis specific (blockColor)
    3. Shorthand (borderColor)
    enhancement All Packages 🚀 
    opened by yuschick 0
  • feat: add position mixin to sc package

    feat: add position mixin to sc package

    🔐 Closes

    N/A

    🚀 Changes

    • adds position mixin to sc package

    ⛳️ Testing

    • set up local project to test the mixin and verify the output
    • ran yarn build to ensure the build completes successfully
    opened by yuschick 0
  • feat: add border mixin to sc package

    feat: add border mixin to sc package

    🔐 Closes

    N/A

    🚀 Changes

    • adds border mixin to sc package

    ⛳️ Testing

    • set up local project to use the mixin to verify output
    • ran yarn build to ensure the package builds successfully
    opened by yuschick 0
  • feat: add padding mixin to sc package

    feat: add padding mixin to sc package

    🔐 Closes

    N/A

    🚀 Changes

    • adds padding mixin to sc package
    • removes a property from formatted type

    ⛳️ Testing

    • ran yarn build to ensure the package builds successfully
    opened by yuschick 0
  • feat: add margin mixin to sc package

    feat: add margin mixin to sc package

    🔐 Closes

    N/A

    🚀 Changes

    • add margin mixin to styled components package
    • exports global types from package

    ⛳️ Testing

    • set up local project to use and test the output
    • ran yarn build to ensure the package builds successfully
    opened by yuschick 0
  • feat: add support for axis properties in stylus package

    feat: add support for axis properties in stylus package

    🔐 Closes

    N/A

    🚀 Changes

    • adds support for inset-block/inline in stylus position mixin
    • refactors border, margin, and padding axis properties in stylus package
    • updates readme docs with new position props

    ⛳️ Testing

    • tested the mixins at Try Stylus to test new axis values
    opened by yuschick 0
  • feat: add support for inset axis properties in scss

    feat: add support for inset axis properties in scss

    🔐 Closes

    N/A

    🚀 Changes

    • adds support for inset-block/inline properties in scss position mixin
    • adds properties to readme docs

    ⛳️ Testing

    • wrote and tested mixin at https://www.sassmeister.com/ to verify output
    opened by yuschick 0
Owner
OrganiCSS
OrganiCSS
GitHub https://organicss.style
Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo Read the blog post Checkout the demo Developing By default, the content on the site is based off our public Notion page.

Vercel 389 Dec 21, 2022
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
CSSHell - Collection of common CSS mistakes, and how to fix them

CSS Hell - To Hell with bad CSS! Collection of common CSS mistakes, and how to f

Stefánia Péter 181 Nov 4, 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
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
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k 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
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
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
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
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
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
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
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
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
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
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Note You might also like my more recent take on this project, Utility OpenType: CSS utility classes for advanced typographic features. Normalize-OpenT

Kenneth Ormandy 795 Dec 23, 2022