sebastiaanvisser/clay

A CSS preprocessor as embedded Haskell.

clay's Issues

Implement better model for gradient

fontFamily wrong code generation

This code:

fontFamily [] [sansSerif]

Compiles to this:

font-family : , sans-serif;

This doesn't work like: font-family: sans-serif;. , should not be there, when deleted it works as expected.

I think this is a bug.

Print RGB values to hex syntax, only use RGBA for non opaque colors

Do not pretty print redundant * before refinements

Borders

Why is the border stuff in a different order to normal order? Instead of

border-left: 1px solid #aaa 

in Clay you instead write:

borderLeft solid (px 1) "#aaa"

For convenient partial application? It's rather jarring to have the args swapped from normal.

Add clay tests to Travis-CI

http://about.travis-ci.org/docs/user/languages/haskell/

Margins cannot be percentages

Hello! Quite enjoying your framework! Very easy to use!

When trying to set a margin using a percentage (example: margin (pct 25) 0 0 0) I get a compile error stating:
Couldn't match expected type 'Abs' with actual type 'Rel'

Looks like margins have been implemented as something you have to specify an exact width for rather than a width relative to the parent container. Quite straightforward to work around for the moment.

Thank you!

hsl percentages

AFAIK hsl/hsla values are meant to be expressed using percentages, as described: http://www.w3schools.com/cssref/css_colors_legal.asp

But Clay.Color.hsl :: Integer -> Integer -> Integer -> Color, which seems to output raw integers in every case, e.g. hsl 0 70 40 compiles to hsl(0,70,40) which is an invalid CSS value.

Why 0 is becoming 0px

e.g.

do borderWidth 0

-->

border-width : 0px;

If I remember correctly 0px is not common for css. It's better when 0 is just 0.

examples/Main.hs doesn't compile

Downloaded the latest 13293a2, cabal-dev install'd and loaded up cabal-dev ghci and examples/Main.hs and get:

examples/Main.hs:10:8: Not in scope: `css' …
    Perhaps you meant one of these:
      `cs' (line 15), `cos' (imported from Prelude)
examples/Main.hs:41:17: Not in scope: data constructor `FontOptional'
examples/Main.hs:42:17: Not in scope: data constructor `FontMandatory'
examples/Main.hs:70:33: Not in scope: `with' …

Seems like it's expecting an older API?

Full monoid instance for Selector

I would have loved if Selector was a full monoid. I could have written mconcat
instead of using a auxilary function like selectors as in

https://github.com/piyush-kurur/pottery/blob/master/Pottery/Reset.hs

While it is understandable that there is no such thing as an empty list of selector, may be we can invent one called EmptySelector and report error in the css monad instead
when we try some thing like

EmptySelector ? do
     background black

This EmptySelector can then be the mzero

Document why fontFamily requires two lists

http://hackage.haskell.org/packages/archive/clay/0.6/doc/html/Clay-Font.html#v:fontFamily says the type of fontFamily is [Text] -> [Text] -> Css. It's unclear to me why this is the case, so if this is intentional I think it should be documented what these parameters mean. 'a' and 'b' in the source code does not go far to clarify this either.

Give hints for fusing rules using classes?

Add all of CSS

http://www.w3.org/TR/CSS21/propidx.html

Add dynamic values like scrollTop and pageWidth?

Semigroup on refinements?

I wanted to set outline-style:none for both a:active and a:visited, and thought I could do (":active" <> ":hover") & outlineStyle none, but Refinement is not a Monoid or Semigroup instance. In the end I did:

forM_ [":active", ":focus"] (& outlineStyle none)

Which does the job, but it is a tad verbose.

It also doesn't produce a:active, a:focus as I wanted, but instead gives me two separate blocks.

Can we run Clay in the client using Fay?

fontFamily: serif, sansSerif, monospace should not be Literals

serif, sansSerif, and monospace are Literal types, hence broken. I.e.,

fontFamily [serif]

gets compiled into

font-family:"serif"

and the double quotes in "serif" make it become interpreted as a font description, not a font-family. The correct result should be

font-family:serif

without the double quotes.

Please fix the website, it was pretty!

http://fvisser.nl/clay

Maybe ditch the Num instances for sizes

How can I apply style for an elements list?

what am I trying to do:

{-# LANGUAGE OverloadedStrings #-}

import Clay

import Prelude hiding (div,span,(**))

import Data.Monoid

generalcss = foldl1 (Clay.**) [html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td]

main = putCss $
  do generalcss ?
      do fontSize (em 0.6)

what do I get:

html body div span object iframe h1 h2 h3 h4 h5 h6 p blockquote pre a abbr address code del dfn img q dl dt dd ol ul li fieldset form label legend table caption tbody tfoot thead tr th td
{
  font-size : 0.6em;
}

How to make it proper? Though there should be comas...

How to create class without invoking element?

How can I skip invoking elements as div, and use just "." ?

Currently I have following code:

carouselS :: Css
carouselS =  ".carousel" & do
                         border    solid  (px 10)  white
                         boxShadow (em 0) (em 0.3) (em 0.8) black
                         margin    (px 0) auto auto auto
                         padding   (px 0) auto auto auto

Printning with:

putCss $ div ? carouselS

Gives ouput as:

div.carousel
{
  border             : solid 10px rgb(255,255,255);
  -webkit-box-shadow : 0.0em 0.3em 0.8em rgb(0,0,0);
  -moz-box-shadow    : 0.0em 0.3em 0.8em rgb(0,0,0);
  -ms-box-shadow     : 0.0em 0.3em 0.8em rgb(0,0,0);
  -o-box-shadow      : 0.0em 0.3em 0.8em rgb(0,0,0);
  box-shadow         : 0.0em 0.3em 0.8em rgb(0,0,0);
  margin             : 0px auto auto auto;
  padding            : 0px auto auto auto;
} 

but I want:

.carousel
{
   ...

Include an example of how to split clay css over multiple files

Hi guys

First, thanks for this cool project! :)
I'm new to Haskell, so excuse me if I'm asking a silly question here.

With SCSS I can use the @import function to split my SCSS into multiple files and then reimport them back into the files I want.

Here's an example project directory. I keep mixins, variables, etc in the modules directory, and my code that directly compiles to CSS in the partials directory.
The main.scss file contains nothing but @import statements, and it's the file that I point my scss compiler at to output main.css

_scss/
├── modules
│   └── _variables.scss
│   └── _clearfix.scss
├── partials
│   ├── _buttons.scss
│   └── _forms.scss
└── vendor
│   └── _something.scss
└── main.scss

I'm keen to replicate this modular way of working with clay, as I find it much more manageable than one giant file. Is there a recommended method for doing this sort of thing?

Thanks,
Louis

move the sym functions out of Size.hs

Can I add #something to top level?

Just question... as I don't know where to ask it. When I'm doing

"#hello" & world

or

".hello" & world

on top level

I'm getting "this should be fixed soon"

Maybe I should be just safe with

"#hello" ? world

and

*#hello ...

I guess but I'm not that good in css and maybe there other ways to make it?

Better support for computing with colors

Simulating sass expand

Hi, this is a question rather than a bug, but might be a feature request. In sass you can do the following (example in sass homepage):
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
@extend .error;
border-width: 3px;
}

Which results in the following:
.error, .badError {
border: 1px #f00;
background: #fdd;
}

.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
border-width: 3px;
}

Is there any facility for that with clay? I managed to do something similar (inclusion perhaps) by factorizing out the .error css in a function, but that wouldn't compact the css like sass does.

Fix mostly harmless but annoying exponential blowup when using <> multiple times in selectors

Split out CSS rendering, optimizing, and parsing into a different package

Homepage has a reference to the todo file

Hi, in the homepage there's a reference to "the todo list" which is a 404.

Provide CLI tool for building stylesheets

The idea is that the tool would take files that have Clay code in them, generate a file with the correct trivial import, main, and extensions added, and compile and run this (or just use runhaskell).

Try to strip even more whitespace from compacted version

@font-face?

I don't see anything to deal with this. Is there any way to write @font-face rules in the DSL, or should I just prepend this kind of thing to clay's output?

Add not selector

is `borderRadius` type correct ?

I was trying to generate this CSS code:

border-radius: 3px 3px 0 0;

But borderRadius :: Size a -> Css type is just not allowing this. I thought maybe it's type should be like margin :: Size Abs -> Size Abs -> Size Abs -> Size Abs -> Css,

Any ideas?

Test project site in other browsers + mobile

printer bug when printing negative `em` values

letterSpacing ((-0.05) `em`)

compiles to

letter-spacing : -5.0e-2em;

css properties overflowY is overflow-x and overflowX is overflow-y

I'm using the latest version...

Try to avoid changing order too much when printing either nested rules or media queries

Add more size types

Allow multiple box-shadows

Write some unit tests

Check if we need more color types

VerticalAlign is missing valid value "super"

According to this, the verticle-align property has the following valid values:

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

Unforchunently, currently in clay there is no way to specify the property:

vertical-align: super;

This is because VerticleAlignValue isn't exported (and it should remain this way). Anyways, the fix (to Clay.Display) is as simple as:

 vAlignSuper :: VerticalAlignValue Value
 vAlignSuper = VerticalAlignValue "super"

A workaround is to use the "-:" combinator like so:

p ? do
  "vertical-align" -: "super"

Can we validate the styles against an HTML file?

Rename the Css monad to Clay

@sebastiaanvisser opinion on this? It's only a breaking change in users' types and it's a trivial fix.

Motivation: minimal pollution of namespace, idiomatic naming (other libraries with a central monad often use the library name), and it's not really a Css data structure until it gets rendered.

Fix the Direction/Position/Sided/Location mess

Create output printer to concise Less, to be able to liberate your style from Haskell

Can we optimize duplicate style rules into one?

Render for one browser only?