Skip to content

Commit

Permalink
Removed most of README and replaced with pointer to website.
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamldavis
adamldavis committed Mar 9, 2019
1 parent ce48a1c commit f7cad23
Showing 1 changed file with 8 additions and 295 deletions.
303 changes: 8 additions & 295 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,305 +29,18 @@ It was created by Adam L. Davis (@adamldavis) and inspired by the many other Gro
- Available pretty print (using Config)
- Ability to create and reuse groups of styles using styles{} syntax.
- Methods for getting an image's width, height, or size.
- Validates some values by default and can be configured with custom validators and/or processors.
- Uses Groovy extension modules

## New in 0.7 - 0.12
## Tested

- Better pseudo-class support with %
- Measurements are now fully supported including math between different compatible types.
- Added [Gradle Plugin](https://plugins.gradle.org/plugin/org.groocss.groocss-gradle-plugin)
- Some measurement values are validated (for example, passing 10.deg to maxWidth will throw an AssertionError).
- New "styles" method for created unattached styles (re: issue #3)
- Added varieties of convert and process that take String, In/OutputStreams, and Reader/PrintWriter (re: issue #2)
- Added limited support for using spaces and ~ syntax in Selector definition (limited to two elements)
- Added mix, tint, shade, and greyscale methods.
- Added saturate, desaturate, fadein, fadeout, fade, and hue, saturation and brightness methods.
- Added many colors methods: rgba, hsl, hsla, lighten, darken, etc.
- Added option (convertUnderline) to convert all underlines in style-classes to dashes.
- 0.10 Added ability to use three or more element selectors without xor.
- 0.10 Added ability to configure to use some element names as style-classes just in case you need "main" for example to be used as a style-class.
- 0.10 Added imports, raw, and comment (ability to import file/reader/stream with parameters; and ability to include comments for output)
- 0.12 Gradle GroocssTask now extends Copy task and supports -t option (requires Gradle 4)
- 0.12 Support for transitions using closures.
- 0.12 Improvements to the CSS Translator
Uses Spock for testing. Well tested.

*The best way to learn is to look at the tests.*
## Open Source

## Using Gradle with Plugin
Apache 2 licensed. Open Source.

Using Gradle 2.1 or later, you simply apply the plugin, provide any optional configuration, and provide a list of files to convert.
The plugin adds a `convertCss` task for converting your groocss files into css.
For example:
## Website

plugins {
id "org.groocss.groocss-gradle-plugin" version "0.12"
}
def cssDir = "$parent.buildDir/../www/css"
_Check out the [website](http://www.groocss.org/) for more info._

groocss { // any config
addOpera = false
prettyPrint = true
}
groocssfiles { // a list of in/out files
index {
inFile = file('index.groocss')
outFile = file("$cssDir/index.css")
}
}

If you have a lot of files, `inFile` and `outFile` can be directories (it will assume groocss files end in `.groocss`).

There's also a `GroocssTask` available if you want to have finer-grained control. Here's an example using a task:

task css(type: org.groocss.GroocssTask) {
conf = new org.groocss.Config(compress: true, addOpera: false)
from "$rootDir/gcss"
from "styles"
into "$cssDir/min"
}

This also allows the "-t" continuous build option to be used (requires Gradle 4).

## Using Gradle without Plugin

import org.groocss.GrooCSS

buildscript {
repositories { jcenter() }
dependencies { classpath 'org.groocss:groocss:0.11' }
}
task css << {
def file = file('css/out.css')
GrooCSS.process {
// DSL goes here
}.writeTo(file)
}

## Examples

### Imports, Raw, and Comment

The ability to import other groocss files is supported by importFile, importStream, and importString methods which take
a parameter map and input. For example:

importFile otherCss.absoluteFile, linkColor: '#456789'

This would allow you to make a "template file" for example with variables replaced in multiple ways.

There are also "raw" and "comment" commands, for including raw CSS and comments respectively.


### Using convert methods

import org.groocss.GrooCSS

GrooCSS.convertFile('infile.groocss', 'outfile.css')
//or
GrooCSS.convert(new File('in'), new File('out'))

### Styles DSL

def myColor = c('#fe33ac')

_.box {
color myColor
borderColor '#fdcdea'
}
_.box ^div { // => .box div
boxShadow '0 0 5px rgba(0, 0, 0, 0.3)'
}
table {
color myColor
}
table.myClass {
color myColor.darker()
}
input['class$="test"'] = {
background yellow
}
sg '#formId', { // sg useful for ID's or complex selectors
minWidth 100.px // resolves to 100px
}
p + div {
border '1px solid black'
}
p.red | a.red { color red } // | => ,
p >> a { color blue } //>> => >
p * a { color blue } // * => *
p - a { color blue } // - => ~(tilde)
p ^ a { color blue } // ^ => (space)

### XOR Not always needed

For many cases, XOR is not actually needed. For example (CSS on left):

"div p.test a{text-decoration: none;}" => { div p.test a { textDecoration 'none' } }
"div.man p.test a{text-decoration: none;}" => { div.man p.test a { textDecoration 'none' } }
"div.man .test a{text-decoration: none;}" => { div.man _.test a { textDecoration 'none' } }
"body div p a{text-decoration: none;}" => { body div p a { textDecoration 'none' } }
"body div.test p a{text-decoration: none;}" => { body div.test p a { textDecoration 'none' } }
"body div.test p li a{text-decoration: none;}" => { body div.test p li a { textDecoration 'none' } }

### Measurement Math

def myWidth = 100.pt + 1.in // converts to pt
def myDelay = 100.ms + 1.s // converts to ms
def mySize = myWidth / 2 // you can multiply/divide with any number
def doubleSize = myWidth * 2

### Extending

_.warn { color red }
_.error {
extend(_.warn) // extend '.warn' also works
background black
}

Produces:

.warn,.error {color: Red;}
.error {background: Black;}

### Nesting

a {
color '#000'
add ':hover', { color blue }
}
div {
add '> p', { color '#eee' }
}

Produces:

a { color: #000; }
a:hover { color: Blue; }
div > p { color: #eee; }

### Keyframes and Transforms DSL

def css = GrooCSS.process(new Config(addWebkit: false, addMoz: false, addOpera: false)) {

keyframes('bounce') {
40 % {
translateY(-30.px)
}
60 % {
translateY(-15.px)
}
frame([0,20,50,80,100]) {
translateY(0)
}
}
}

Produces:

@keyframes bounce {
40%{transform: translateY(-30px);}
60%{transform: translateY(-15px);}
0%, 20%, 50%, 80%, 100%{transform: translateY(0);}
}

### Colors

Use the "c", "clr", "rgb" or "rgba" methods to create a color. For example:

def css = GrooCSS.process {
def sea = c('5512ab') //OR rgb(85, 18, 171)
_.sea {
color sea.darker()
background sea.brighter()
border "5px solid ${sea.alpha(0.5)}"
}
}

You can also use named colors:

_.blue {
color darkBlue
background aliceBlue
}

### Font-face

fontFace {
fontFamily 'myFirstFont'
fontWeight 'normal'
src 'url(sensational.woff)'
}

Resolves to:

@font-face { font-family: myFirstFont; font-weight: normal; src:url(sensational.woff); }

### Custom styles

body {
add style('-webkit-touch-callout', 'none')
add style('-webkit-textSize-adjust', 'none')
add style('-webkit-user-select', 'none')
}

## Compressing (Minimization)

To "compress" the output (no new-lines), just pass in a Config object:

GrooCSS.process(new Config(compress: true))
//OR
GrooCSS.convert(new Config(compress: true), infile, outfile)
//OR
groocss { compress = true } // using Gradle plugin

## Media

media 'screen', {
body { width '100%' }
}

Produces:

@media screen {
body { width: 100%; }
}

## Pseudo-classes

input % hover { color blue }
li % nthChild('3n') { color blue }

Produces:

input:hover { color: Blue; }
li:nth-child(3n) { color: Blue; }

## Config

There are three different ways to configure GrooCSS:

- Using the groovy constructor: new Config(compress: true)
- Using the builder syntax: Config.builder().compress(true).build()
- Using the DSL: GrooCSS.withConfig { noExts().compress().utf8() }.process {}

Of these options, the third is most recommended.
With the DSL there are several chainable methods available to easily configure your CSS:
- noExts() - sets all extension flags to false (addOpera, etc.)
- onlyMs(), onlyWebkit(), etc. - sets all extensions flags to false except one.
- utf8() - sets the charset to UTF-8.
- compress() - sets compress flag to true.

## Converting from CSS

You can use the Translator to convert existing CSS into GrooCSS syntax:

GrooCSS.convertFromCSS(File inFile, File outFile)

This allows you to get started quickly with GrooCSS in existing projects.

## Transitions

Allows you to specify one or more transitions using closures. Example:

_.highlight {
transition {flex '2s'} {borderColor '1s' ease '0'}
}

0 comments on commit f7cad23

Please sign in to comment.