atom-pigments - An Atom package to display colors in project and files.

  •        17

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level. By default colors in every file will be highlighted, to limit the display of colors to the desired filetype only please see the Defining Where Pigments Applies below. Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn't mean pigments is able to parse and understand all of these languages constructs. For the moment, Pigments' aim is to support the widest range of usage, even if it implies reducing its ability to parse certain complex constructs. You can refer to the parser specs for an exhaustive list of the supported expressions.

https://github.com/abe33/atom-pigments

Dependencies:

underscore-plus : 1.x
event-kit : 2.x
fs-plus : 2.x
async : 0.2.6
css-color-function : 0.1.x
minimatch : 0.3.x
delegato : ^1.0.0
atom-utils : >=0.9.2

Tags
Implementation
License
Platform

   




Related Projects

atom-beautify - :lipstick: Universal beautification package for Atom editor (:warning: Currently migrating to https://github

  •    CoffeeScript

Atom-Beautify respects the core.telemetryConsent configuration option from Atom editor. If you do not wish to have usage data sent to Google Analytics then please set core.telemetryConsent to no or undecided option before using Atom-Beautify. See Anonymous Analytics section of docs for details. Thank you. Atom-Beautify is going to be completely rewritten with Unibeautify at its core! See unibeautify branch for work in progress and Issue #1174.

brand-colors - 🎨 A color collection available in sass, less, stylus and css

  •    Javascript

Full list of colors A lot fo the colors comes from brandcolors.net, so a huge shout out to @galengidman.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

css-sprite - css sprite generator

  •    Javascript

A css sprite generator. Generates sprites and proper css files out of a directory of images.


jeet - The most advanced, yet intuitive, grid system available for Sass or Stylus

  •    CSS

Jeet is a simple fractional grid system for Sass and Stylus. Learn the API in minutes and begin tossing together grids.

grunt-styleguide - Universal CSS styleguide generator for grunt

  •    HTML

If you are looking for a replacement and are using kss or styledocco see below. Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.

wenk - :wink: Lightweight pure CSS tooltip for the greater good

  •    CSS

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS. Simply add the data-wenk attribute to your HTML with the text you want to display.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

syntastic - Syntax checking hacks for vim

  •    Vim

Syntastic is a syntax checking plugin for Vim created by Martin Grenfell. It runs files through external syntax checkers and displays any resulting errors to the user. This can be done on demand, or automatically as files are saved. If syntax errors are detected, the user is notified and is happy because they didn't have to compile their code or execute their script to find them. At the time of this writing, syntastic has checking plugins for ACPI Source Language, ActionScript, Ada, Ansible configurations, API Blueprint, AppleScript, AsciiDoc, Assembly languages, BEMHTML, Bro, Bourne shell, C, C++, C#, Cabal, Chef, CMake, CoffeeScript, Coco, Coq, CSS, Cucumber, CUDA, D, Dart, DocBook, Dockerfile, Dust, Elixir, Erlang, eRuby, Fortran, Gentoo metadata, GLSL, Go, Haml, Haskell, Haxe, Handlebars, HSS, HTML, Java, JavaScript, JSON, JSX, Julia, LESS, Lex, Limbo, LISP, LLVM intermediate language, Lua, Markdown, MATLAB, Mercury, NASM, Nix, Objective-C, Objective-C++, OCaml, Perl, Perl 6, Perl POD, PHP, gettext Portable Object, OS X and iOS property lists, Pug (formerly Jade), Puppet, Python, QML, R, Racket, RDF TriG, RDF Turtle, Relax NG, reStructuredText, RPM spec, Ruby, SASS/SCSS, Scala, Slim, SML, Solidity, Sphinx, SQL, Stylus, Tcl, TeX, Texinfo, Twig, TypeScript, Vala, Verilog, VHDL, Vim help, VimL, Vue.js, xHtml, XML, XSLT, XQuery, YACC, YAML, YANG data models, YARA rules, z80, Zope page templates, and Zsh. See the manual for details about the corresponding supported checkers (:help syntastic-checkers in Vim).

rfs - Automated responsive font sizes

  •    CSS

The source files can also be downloaded manually and used in a project. This method is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency.

theo - Theo is a an abstraction for transforming and formatting Design Tokens

  •    Javascript

Theo is an abstraction for transforming and formatting Design Tokens. As of Theo v6, the gulp plugin is distributed as a separate package: gulp-theo.

harp - Static Site Server/Generator with built-in preprocessing

  •    Javascript

Harp is a static web server that also serves Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeScript as HTML, CSS, and JavaScript without any configuration. It supports the beloved layout/partial paradigm and it has flexible metadata and global objects for traversing the file system and injecting custom data into templates. Optionally, Harp can also compile your project down to static assets for hosting behind any valid HTTP server. Pre-compilers are becoming extremely powerful and shipping front-ends as static assets has many upsides. It's simple, it's easy to maintain, it's low risk, easy to scale, and requires low cognitive overhead. I wanted a lightweight web server that was powerful enough for me to abandon web frameworks for dead simple front-end publishing.

awesome-sass - 🎨 Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources

  •    

Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources. Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

node-sass - :rainbow: Node.js bindings to libsass

  •    C++

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

marx - The classless CSS reset (perfect for Communists).

  •    CSS

The classless CSS reset (perfect for Communists). Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.

sass-build-structure - An example SASS build structure sample to start a project

  •    CSS

After reading the book SMACSS and finding it very helpful the Front End team at Evernote has used some of the ideas in our SASS build. We've found breaking the SASS files out into directories (Base, Layout, Modules, and Views) helps organize our files in a project and compile CSS into a clean, logical file. Each page has a SASS (.scss) file created that acts as a project file that imports the individual modular components from Base, Layout, Modules, and Views that are needed to build the particular page. This build methodology is currently being used on Evernote.com.

sassdash - The Sass implementation of lodash.

  •    CSS

It's lodash for Sass. Sassdash. Why? Developed with Sass toolkit developer in mind, Sassdash gives you nearly the full expressive power of lodash for JavaScript, inside your SCSS projects. Developers can also build SCSS libraries on top of Sassdash for concepts such as advanced animation composition and timing, 3D CSS rendering, geometrical rendering, complex grid frameworks, and more.

sass.js - Sass.js - API for emscripted libsass to run in the browser

  •    Javascript

Sass parser in JavaScript. Have a look at the Interactive Playground to play around with compiling SCSS to CSS in your browser.This is a convenience API for emscripted libsass (at v3.4.8). If you're looking to run Sass in node, you're probably looking for node-sass. Sass.js and node-sass should generate the same results.