Giter Club home page Giter Club logo

dijit-claro-stylus's Introduction

Dijit Claro Stylus Conversion

This repository contains a port of Dijit's Claro theme (as of Dojo version 1.9.1) from LESS to Stylus.

Note: conversions for Dojo 1.7 and 1.8 are available on separate branches:

Usage

To generate the CSS resources, install Stylus (e.g. using NPM), then within the directory this repository was cloned to, run...

stylus . form layout

Notes

The results of this conversion have been checked for accuracy via the following processes:

  • Compared CSS output of both LESS and Stylus for (near-)matching values
  • Compared diffs between the previous and current Dojo version's LESS against the corresponding diffs between the 1.7 and 1.8 conversions in this repository
  • Visually compared using dijit/themes/themeTester.html

Differences

The intent of this conversion is generally to maintain parity with the CSS output by Claro's LESS resources. To some extent there are minor differences, including blank lines, line breaks between multiple selectors, and off-by-one differences from BIFs such as saturate, lighten, and darken.

Any notable or intentional differences between Claro's LESS resources and the Stylus resources in this conversion are explained below.

Disabled Text Input Styles

There was a noticeable difference in the result of 2 calculations for disabled textbox/textarea styles for WebKit in form/Common.css, which have had their source values tweaked such that the resulting output matches the output from Claro's form/Common.less.

The alpha-white-gradient Mixin

The input argument format to the alpha-white-gradient mixin differs from the overloaded set of mixins in Claro's variables.less, in order to allow a single mixin to handle any number of arguments.

In variables.styl, the alpha-white-gradient mixin expects an optional direction followed by any number of tuples containing 2 values, the first being an alpha value and the second being the position within the gradient at which to apply it. For example:

alpha-white-gradient((0.3 0%), (0 100%))

Or, with a direction:

alpha-white-gradient(left, (0.3 0%), (0 100%))

Note that this does not affect the CSS output at all, only the styl files.

License

The contents of this repository are available under the same dual modified BSD / AFL 2.1 license as the Dojo Toolkit.

dijit-claro-stylus's People

Contributors

csnover avatar kfranqueiro avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.