It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

Related tags

Learning resource responsive_stylesheet
Overview

@skynexui/responsive_stylesheet

You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱

licence mit Downloads Current Version Flutter Package NPM Package

It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter

Summary

Dart/Flutter 🐦

How to install?

flutter pub add skynexui_responsive_stylesheet

Get started

Demo

CleanShot 2022-07-27 at 16 27 30

body: Container(
  color: responsive.value({
    Breakpoints.xs: Colors.red.shade200,
    Breakpoints.sm: Colors.yellow.shade200,
    Breakpoints.md: Colors.green.shade200,
    Breakpoints.lg: Colors.blue.shade200,
    Breakpoints.xl: Colors.purple.shade200,
  }),
)

Learn more looking at the code example with a small implementation

Or this one of the gif with the Web "Holy Grail Layout"

Other demos

JavaScript/React ⚛

How to install?

yarn add @skynexui/responsive_stylesheet

Get started

Demo

Docs

What are the default values for the breakpoints?

  • xs: 0 From 0 screen width until 479
  • sm: 480 From 480 screen width until 767
  • md: 768 From 768 screen width until 991
  • lg: 992 From 992 screen width until 1199
  • xl: 1200 From 1200 and beyond

All values from here came from other libraries and responsive Front End frameworks.

Can I customize the breakpoints?

Today, no. But it's in the have a way to do this but the names xs...xl will remain part of the library to make it easier to use the abstractions.

Resources and features

Feature. Dart/Flutter JavaScript/React
Responsive ✅ ❌
breakpoints ✅ ✅
GridItem ✅ 🚧
BreakpointsProvider 🚧 🚧
parseStylesheet 🚧 ✅
StyleSheet 🚧 ✅
BaseComponent 🚧 🚧

✅ Ready, 🚧 WIP, ❌ Not in roadmap by now, 🗺️ Inside roadmap

Other project stuff

Contributing

Want to contribute to the project? Check our guide with how and our code guidelines

How to report a bug?

Please just open an issue with a link do a small reproduction of the bug and let's discuss it

License

MIT License © Mario Souto

You might also like...

An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Dec 28, 2022

A set of small, responsive CSS modules that you can use in every web project.

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. https://purecss.io/ This project is looking for maintainers to supp

Jan 9, 2023

A drop-in collection of CSS styles to make simple websites just a little nicer

Water.css 🌊 A drop-in collection of CSS styles to make simple websites just a little nicer Goals Responsive Themeable Good browser support (works on

Jan 4, 2023

Convert Tailwind CSS class names into their CSS3-equivalent styles — right from Alfred.

alfred-tailwind2css Tailwind2CSS offers you the ability to convert TailwindCSS classes into their CSS3-equivalent styles -- right from within Alfred.

Dec 7, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

Functionalty.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Cr

Aug 30, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project C

May 25, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Created

Jun 23, 2022

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing

Jan 7, 2023

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Nov 4, 2021
Comments
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the main branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

    Invalid npm token.

    The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

    If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default " Authorization and writes" level.

    Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by omariosouto 0
Releases(v1.11.0)
Owner
SkynexUI
An ecosystem for cross platform native UI written on top of JavaScript/TypeScript and Dart with awesome defaults focused in performance and a11y
SkynexUI
GitHub https://responsive-stylesheet-flutter-demo.vercel.app/
A set of common UI Components using the power of CSS and without Javascript

A set of common UI Components using the power of CSS and without Javascript

Felipe Fialho 650 Dec 31, 2022
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
A collection of social media strategies for remix-auth

Remix Auth Socials A collection of Remix Auth strategies for Oauth2 Social logins. ?? If you are interested in creating one of the planned strategies,

Tom Rowe 80 Jan 5, 2023
FACEIT (OAuth2) authentication strategies for Passport.

passport-faceit FACEIT is a trademark or registered trademark of FACEIT LIMITED in the U.S. and/or other countries. "@ambergg/passport-faceit" is not

Amber.gg 5 Oct 26, 2022
Detect F12 open console, protect web static resources, support redirect, rewrite, callback strategies.

console-ban Detect F12 open browser console. protect web site static resources, support redirect, rewrite, custom callback strategies. Language: Engli

Yingci 623 Dec 26, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
@nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and patterns

NodeSecure CI Action @nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and p

null 7 Jul 29, 2022
Collection of utility functions for common JavaScript/TypeScript task

@oysterlee/utils Collection of utility functions for common JavaScript/TypeScript task Features Tree-shakable No dependencies Installation pnpm i @oys

Oyster Lee 3 Apr 4, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. Why use Preline UI? Based on the Tailwin

Html Stream 1.1k Jan 3, 2023