Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
greencss
Advanced tools
Readme
npm i greencss
To install the greenCSS dark mode add-on, head to @greencss/dark-mode.
import 'greencss/css/greencss.css'
import 'greencss/css/classes/animation/animation.css'
Currently, the following categories are available:
You will find all CSS categories here.
Instead of the normal version, you can also import a lightweight minified version.
import 'greencss/css/minified/greencss.css'
Compact imports also work with categories:
import 'greencss/css/minified/classes/animation/animation.css'
import 'greencss/css/minified/classes/color/color.css'
By default, all default browser settings are reset. This means that you enjoy unlimited freedom and can choose your own design. Create a default reset.css
file and specify your desired spacing, fonts, text sizes and font weights. Make sure that your reset file is imported after the greencss file. This way your file has a higher priority and you overwrite any greencss classes.
import 'greencss/css/greencss.css'.
import 'path-to-your-reset.css-file'.
By the way, when you use greenCSS, sustainability is not the only thing which is important. Writing CSS intuitively and easily is also crucial. For this reason, greenCSS has decided to reset the default font size to 62.5%. For you, this means that 1rem = 10px. This allows you to calculate in the simplified power of ten.
/* Set core root defaults */
html {
font-size: 62.5%; // default pixel size reset to 10px
}
All greenCSS classes have the same structure. An explanation of this principle can be given with the help of the examples below.
<p class="text-blue">a blue text</p>
If the text colour for an element is to be changed on small screens only (0px - 480px), the class is inserted with a prefix called "sm:".
<p class="text-blue sm:text-purple">a purple text for small screens</p>
If the text colour for an element should be changed on medium screens (480px - 768px), the "md:" needs to be inserted. Large screens (768px - 1080px) will use the "lg:" prefix.
<p class="text-blue sm:text-purple md:text-green lg:text-orange">Different colours for different screen sizes</p>
In addition to the responsive classes, all classes also have active, focus and hover classes, which can be combined as desired.
<p
class="text-blue sm:text-purple sm:active:text-purple-5 md:text-green md:focus:text-green-2 lg:text-orange lg:hover:text-orange-10">
Different text colours and different states for all screens
</p>
Values & unit sizes should have intuitive notation and resemble the original CSS where possible.
<div class="opacity-50per w-100px h-20rem sm:rotate-neg-180deg"></div>
In the example above, the element has an opacity of 50 percent, it is 100 pixels wide and 20 REM (200pixel) tall. On small screens it has a negative tilt of 180 degrees.
All examples mentioned above can also be adapted to the darkmode. Add the prefix "dark-" where applicable.
<p class="text-blue dark:text-blue-10 sm:text-purple dark:sm:text-purple-10 hover:dark:sm:text-purple-5">Darkmode example</p>
You want to collaborate? Have a look at the documentation in the information folder.
For commits, use semantig writing:
Commit | Usage |
---|---|
fix(pencil): stop graphite breaking when too much pressure applied | Fix Release |
feat(pencil): add 'graphiteWidth' option | Feature Release |
perf(pencil): remove graphiteWidth option | Breaking Release |
FAQs
The classy way to write sustainable CSS.
The npm package greencss receives a total of 2 weekly downloads. As such, greencss popularity was classified as not popular.
We found that greencss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.