Hey Joel thanks for that! I actually started work on translating the semantic grid to Clojure, it's just that I didn't finish as about half-way I kept the sense we could a bit more with Clojure.
What the semantic grid does it just does is to use the float left and display block properties and sets the width of those dynamically based on the required (if any) minimum or fixed size. It's nice start and I like it because mainly it is much cleaner, yet I imagine a Clojure framework would also allow for another, second case, which is far more popular. Most grid systems use explicit class names (like column-1 or column-one etc) which are just in their main stylesheet. We could, for people who like this solution, just generate these. Also I wonder if perhaps this is an interesting approach: http://www.problem.se/labs/gridcalc/ as in, to calculate possible outcomes etc. Something along those lines in a very naive fashion (defn make-columns > "Creates a range of column sizes." > [width columns gutter] > (let [rng (map #(px %) (range 0 width columns))] > (doall (interpose (px gutter) rng)))) ;; => (0px 10px 60px 10px 120px 10px 180px 10px 240px 10px 300px 10px 360px 10px 420px 10px 480px 10px 540px 10px 600px 10px 660px 10px 720px 10px 780px 10px 840px 10px 900px 10px 960px 10px 1020px) There could even be a grid protocol and fluid, responsive, fixed, mobile, etc be implementations of it, or multi-methods, or maybe its an overkill. Also semanticgs doesn't know min/max on column/gutter sizes nor does it distinguish between an outer margin and gutter. With gutter its the question if you count it as 1 value to use or split in two, that 20px is really 10 and 10. Those are some considerations people might forever argue about. Personally I don't need it this fine grained but some might I guess. (some image overlay though, that could be really nice since a lot of designers still hand in photoshop illustrations that developers need to fit in. Any thoughts? Some links btw: http://hugogiraudel.com/2013/04/04/css-grid-layout/ - the future of CSS will be in a W3C spec but don't hold your breath http://gridpak.com/ http://www.gridsystemgenerator.com/gs01.php - generates also indented cells Op donderdag 27 juni 2013 05:51:22 UTC+2 schreef Joel Holdbrooks het volgende: > > Cool. I haven't seen this one before. Since it was fairly simple I > reimplemented it in Clojure with Garden. *Here's the > gist.*<https://gist.github.com/noprompt/5873715> > > I took a functional approach using higher order functions. It could be a > little cleaner but then again *the arithmetic isn't all on one 168 > character line > either*<https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss#L63>. > > There are a few refactorings and nearly all of it is documented in a > literate programming style. > > On Wednesday, June 26, 2013 5:41:56 AM UTC-7, Rob Jens wrote: >> >> Hey Jeremy, >> >> You might be interested, in case you hadn't heard of it yet, of the >> Semantic Grid (http://semantic.gs) probably in particular their Stylus >> version >> https://github.com/twigkit/semantic.gs/blob/master/stylesheets/styl/grid.styl >> but >> depending on your taste/clarity might also wish to check out their grid in >> Sass/SCSS. >> >> Its math is quite elegant and simple. >> >> Cheers, >> Rob >> >> Op woensdag 19 juni 2013 13:14:03 UTC+2 schreef JeremyS het volgende: >>> >>> Hi Joel, >>> >>> Thank for the interest ! You can also take a look at some code have done >>> around css unit types there <https://github.com/JeremS/units>. It's got >>> arithmetic for >>> units and a namespace dedicated to colors. In it you'll find conversions >>> between rgb en hsl (that I have taken from the color >>> library<https://github.com/jolby/colors> >>> ) >>> and the implementation of SASS color helpers. May be you could adapt my >>> library to garden. From what I have seen Garden uses >>> protocols to compile different types into css and every unit (including >>> colors) I define is a record. So you might be able to extend my library >>> with Garden protocols and use it in garden without much effort. I'd be glad >>> to see that ! >>> >>> About higher order function I have thought about that and went back, my >>> first approach made for to complicated function (complected even). With the >>> actual implementation I can just define stuff like: >>> >>> (def grid {}) ; grid spec with column, gutter... >>> >>> (def width (partial grid/witdh grid)) >>> (def push (partial grid/push grid)) >>> >>> >>> and then : >>> >>> (def side-style [:#side (width 4) >>> (push 1)]) >>> >>> for a side element spanning onto 4 columns and pushed off 1. >>> >>> >>> Regarding more advanced systems like Foundation I haven't spent much >>> time trying to implement them with my DSL. >>> To do so I need to up my CSS game because I am not yet well versed into >>> the art of responsive design and it will take me >>> a bit of time wrapping my head around the media queries involved. If I >>> try to got responsive, I might probably study >>> the Unsemantic <http://unsemantic.com> system from the creator of the >>> 960 one I think. >>> >>> Good luck with your work and don't hesitate on browsing my github, right >>> now most of the projects are oriented around CSS and there >>> might be some ideas there who knows ! >>> >>> On Wednesday, June 19, 2013 8:54:48 AM UTC+2, Joel Holdbrooks wrote: >>>> >>>> Jeremy, >>>> >>>> Looks good. I've been tinkering with grid systems on and off for the >>>> past month or so. Have you thought of trying your hand at porting >>>> something >>>> like the Foundation or Gumby grid system? >>>> >>>> One thing I've discovered, and you might try this with your 960 >>>> implementation, is that using higher order functions can be very handy for >>>> building them out. For example, a *make-grid* function which accepts a >>>> map of configuration options and returns a function which takes a column >>>> number and optional parameters for, say, push and pull. It's a nice way to >>>> package things up. >>>> >>>> I'm close to wrapping up a small colors framework for Garden which will >>>> be available in the next beta (hopefully it won't be in beta much longer). >>>> When I take it out of beta it'll probably include a Clojure flavored >>>> implementation of either the grid system that ships with Bootstrap or >>>> Foundation (including the mobile parts). >>>> >>>> On the side I've been taking of advantage of Clojure to create a new >>>> concept for a *layout* system. It's based on the font-size/line-height >>>> ratio and allows for the construction of stylesheets such that the grid >>>> system and typography are harmonious. IOW it's a fat pain in the ass, but >>>> I >>>> don't think I could even fathom the idea of doing it in Sass. >>>> >>>> TL;DR you have Clojure at your disposal! Though we're SOL on some very >>>> nice Sass libraries, we can potentially do more and at a higher level! >>>> >>>> Thanks for sharing! It's inspiring. >>>> >>>> On Jun 18, 2013, at 4:41 AM, JeremyS <jschof...@gmail.com> wrote: >>>> >>>> Hi Joel, >>>> >>>> I have a quick and dirty implementation of a 960-ish grid >>>> system<https://github.com/JeremS/cljss-grid>using a DSL similar to garden >>>> If you want to take a look. >>>> >>>> >>>> >>>> On Friday, April 26, 2013 1:01:44 AM UTC+2, Joel Holdbrooks wrote: >>>>> >>>>> It's funny you should bring that up! I've actually been working on >>>>> extracting the grid system from Bootstrap and modular scale from >>>>> Foundation. But it's mostly been tinkering. >>>>> >>>>> * I am sorely tempted to give this a try.* >>>>> >>>>> Please do! If I come up with something I'll be sure to share a Gist. >>>>> >>>>> >>>>> On Thu, Apr 25, 2013 at 3:27 PM, Clinton Dreisbach < >>>>> cli...@dreisbach.us> wrote: >>>>> >>>>>> One interesting thing you could do, given both Garden and >>>>>> ClojureScript, is package CSS frameworks like Twitter Bootstrap or >>>>>> Zurb Foundation as a Clojure library. I am sorely tempted to give this >>>>>> a try. >>>>>> >>>>>> On Thu, Apr 25, 2013 at 6:12 PM, Joel Holdbrooks <cjhold...@gmail.com> >>>>>> wrote: >>>>>> > Murtaza, >>>>>> > >>>>>> > Thanks for having a look at the library. I'll try to answer you >>>>>> questions as >>>>>> > best as I can. >>>>>> > >>>>>> > >>>>>> > How does Garden compare to other pre processors such as sass and >>>>>> less? >>>>>> > >>>>>> > There are some similarities with Garden and other CSS >>>>>> preprocessors. I've >>>>>> > tried to bring over the ones I found most useful when using them. >>>>>> Nested >>>>>> > selectors and declarations, parent selector references, and unit >>>>>> arithmetic >>>>>> > are all currently available to stylesheet authors. >>>>>> > >>>>>> > The big difference and, in my opinion, the big win is you can build >>>>>> your >>>>>> > stylesheets with regular Clojure. This gives you a lot of power and >>>>>> freedom >>>>>> > you won't find anywhere else (AFAIK). To name just a few benefits: >>>>>> > >>>>>> > There's no file parsing or interpretation step. It's just data >>>>>> > transformation. >>>>>> > There's no need for any sort of special @mixin syntax or macros, >>>>>> you can use >>>>>> > Clojure function. >>>>>> > There's no need for an @include directive thanks to clojure >>>>>> namespaces. This >>>>>> > can help you organize your stylesheet in ways (I think) are much >>>>>> cleaner and >>>>>> > less surprising than SASS and other preprocessors. >>>>>> > Thanks to Clojure, Garden (potentially) has clearer syntax than CSS >>>>>> which, >>>>>> > if you look closely, can be pretty random in some places. >>>>>> > >>>>>> > WIth regard to the third point, if you've ever tried using the >>>>>> SMACSS >>>>>> > approach to stylesheet authoring with a preprocessor like SASS, you >>>>>> can end >>>>>> > up with an explosion of files and tons of @include directives. It's >>>>>> not fun, >>>>>> > it's hard to manage, and it's difficult to see where code is coming >>>>>> from - >>>>>> > especially when using 3rd-party libraries. >>>>>> > >>>>>> > Also can I use it in my clojurescript projects ? I mean does it >>>>>> have any >>>>>> > java lib dependencies that would prevent it? >>>>>> > >>>>>> > It does have one small dependency on java.net.URI but I need some >>>>>> time to >>>>>> > think about whether or not it would be worth dropping. As far as >>>>>> using it >>>>>> > from a ClojureScript project, what sort of use case are you >>>>>> considering? >>>>>> > >>>>>> > What is the workflow when using Garden? >>>>>> > >>>>>> > My experience using Garden is probably close to others at this >>>>>> point. It's >>>>>> > kind of funny in that regard. I'm building a tool and at the same >>>>>> time am >>>>>> > learning how to use it. Personally, I create a namespace for my >>>>>> "core" >>>>>> > stylesheets and separate namespaces for things like utilities and >>>>>> so forth >>>>>> > (ie. (ns me.css (:require [me.css.button :as button])) . Then I >>>>>> have a call >>>>>> > to function that compiles and saves the stylesheet at the bottom of >>>>>> the >>>>>> > "core" stylesheets. Since I develop with Emacs and nREPL this means >>>>>> all I >>>>>> > have to do is reload the file and the CSS is "refreshed". >>>>>> > >>>>>> > It isn't the best approach, but Garden is still very young and I >>>>>> haven't >>>>>> > thought about how a standardize the build process. But I would >>>>>> definitely be >>>>>> > open to any thoughts regarding that. A Leiningen plugin would be >>>>>> awesome! >>>>>> > >>>>>> > >>>>>> > I hope these answers are helpful. Please continue to experiment >>>>>> with the >>>>>> > library and express your thoughts! >>>>>> > >>>>>> > Thanks, >>>>>> > >>>>>> > Joel >>>>>> > >>>>>> > >>>>>> > On Wed, Apr 24, 2013 at 6:44 PM, Murtaza Husain >>>>>> > <murtaza...@sevenolives.com> wrote: >>>>>> >> >>>>>> >> Joel, >>>>>> >> >>>>>> >> Thanks for the lib. Its great and I plan to use it in my projects. >>>>>> >> >>>>>> >> How does Garden compare to other pre processors such as sass and >>>>>> less ? >>>>>> >> >>>>>> >> Also can I use it in my clojurescript projects ? I mean does it >>>>>> have any >>>>>> >> java lib dependencies that would prevent it? >>>>>> >> >>>>>> >> What is the workflow when using Garden ? If I am using Sass, I >>>>>> would >>>>>> >> create a .scss file, and the sass daemon would watch over any >>>>>> changes to the >>>>>> >> file and compile it to .css. >>>>>> >> >>>>>> >> As I understand garden is generating css when called with the >>>>>> fn/macro >>>>>> >> (css [...]). Would it make sense to have a similar workflow like >>>>>> above; >>>>>> >> where a leiningen plugin watches for any .garden files and >>>>>> compiles them to >>>>>> >> .css files ? Or is there a better workflow that I am missing? >>>>>> >> >>>>>> >> Thanks, >>>>>> >> Murtaza >>>>>> >> >>>>>> >> >>>>>> >> On Tuesday, April 23, 2013 2:42:55 AM UTC+5:30, Joel Holdbrooks >>>>>> wrote: >>>>>> >>> >>>>>> >>> As of today, Garden is officially out of alpha and in to beta! >>>>>> >>> >>>>>> >>> The library now sports media queries (via meta data) and parent >>>>>> selector >>>>>> >>> references (ie. "&hover"). With these new features it is now >>>>>> possible to >>>>>> >>> build more sophisticated stylesheets bringing us a step closer to >>>>>> having a >>>>>> >>> viable CSS alternative in Clojure. >>>>>> >>> >>>>>> >>> Over the course of the next few weeks, I plan to continue >>>>>> improving the >>>>>> >>> library by adding "missing" features and functions to make the >>>>>> library as >>>>>> >>> powerful as possible when it's release as 0.1.0 stable. >>>>>> >>> >>>>>> >>> Now more than ever, I would like to encourage others in the >>>>>> community to >>>>>> >>> reach out with suggestions and code review. This my first "real" >>>>>> Clojure >>>>>> >>> library and after only six months with the language I'm sure it >>>>>> could >>>>>> >>> benefit greatly from both of these things. >>>>>> >> >>>>>> >> -- >>>>>> >> -- >>>>>> >> You received this message because you are subscribed to the Google >>>>>> >> Groups "Clojure" group. >>>>>> >> To post to this group, send email to clo...@googlegroups.com >>>>>> >> Note that posts from new members are moderated - please be patient >>>>>> with >>>>>> >> your first post. >>>>>> >> To unsubscribe from this group, send email to >>>>>> >> clojure+u...@googlegroups.com >>>>>> >> For more options, visit this group at >>>>>> >> http://groups.google.com/group/clojure?hl=en >>>>>> >> --- >>>>>> >> You received this message because you are subscribed to a topic in >>>>>> the >>>>>> >> Google Groups "Clojure" group. >>>>>> >> To unsubscribe from this topic, visit >>>>>> >> >>>>>> https://groups.google.com/d/topic/clojure/xbFU2prTxlY/unsubscribe?hl=en >>>>>> . >>>>>> >> To unsubscribe from this group and all its topics, send an email to >>>>>> >> clojure+u...@googlegroups.com. >>>>>> >> >>>>>> >> For more options, visit https://groups.google.com/groups/opt_out. >>>>>> >> >>>>>> >> >>>>>> > >>>>>> > >>>>>> > >>>>>> > >>>>>> > -- >>>>>> > >>>>>> > Joel >>>>>> > >>>>>> > -- >>>>>> > -- >>>>>> > You received this message because you are subscribed to the Google >>>>>> > Groups "Clojure" group. >>>>>> > To post to this group, send email to clo...@googlegroups.com >>>>>> > Note that posts from new members are moderated - please be patient >>>>>> with your >>>>>> > first post. >>>>>> > To unsubscribe from this group, send email to >>>>>> > clojure+u...@googlegroups.com >>>>>> > For more options, visit this group at >>>>>> > http://groups.google.com/group/clojure?hl=en >>>>>> > --- >>>>>> > You received this message because you are subscribed to the Google >>>>>> Groups >>>>>> > "Clojure" group. >>>>>> > To unsubscribe from this group and stop receiving emails from it, >>>>>> send an >>>>>> > email to clojure+u...@googlegroups.com. >>>>>> > For more options, visit https://groups.google.com/groups/opt_out. >>>>>> > >>>>>> > >>>>>> >>>>>> -- >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "Clojure" group. >>>>>> To post to this group, send email to clo...@googlegroups.com >>>>>> Note that posts from new members are moderated - please be patient >>>>>> with your first post. >>>>>> To unsubscribe from this group, send email to >>>>>> clojure+u...@googlegroups.com >>>>>> For more options, visit this group at >>>>>> http://groups.google.com/group/clojure?hl=en >>>>>> --- >>>>>> You received this message because you are subscribed to a topic in >>>>>> the Google Groups "Clojure" group. >>>>>> To unsubscribe from this topic, visit >>>>>> https://groups.google.com/d/topic/clojure/xbFU2prTxlY/unsubscribe?hl=en >>>>>> . >>>>>> To unsubscribe from this group and all its topics, send an email to >>>>>> clojure+u...@googlegroups.com. >>>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>>> >>>>>> >>>>>> >>>>> >>>>> >>>>> -- >>>>> >>>>> Joel >>>>> >>>> >>>> -- >>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "Clojure" group. >>>> To post to this group, send email to clo...@googlegroups.com >>>> Note that posts from new members are moderated - please be patient with >>>> your first post. >>>> To unsubscribe from this group, send email to >>>> clojure+u...@googlegroups.com >>>> For more options, visit this group at >>>> http://groups.google.com/group/clojure?hl=en >>>> --- >>>> You received this message because you are subscribed to a topic in the >>>> Google Groups "Clojure" group. >>>> To unsubscribe from this topic, visit >>>> https://groups.google.com/d/topic/clojure/xbFU2prTxlY/unsubscribe. >>>> To unsubscribe from this group and all its topics, send an email to >>>> clojure+u...@googlegroups.com. >>>> For more options, visit https://groups.google.com/groups/opt_out. >>>> >>>> >>>> >>>> >>>> -- -- You received this message because you are subscribed to the Google Groups "Clojure" group. To post to this group, send email to clojure@googlegroups.com Note that posts from new members are moderated - please be patient with your first post. To unsubscribe from this group, send email to clojure+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/clojure?hl=en --- You received this message because you are subscribed to the Google Groups "Clojure" group. To unsubscribe from this group and stop receiving emails from it, send an email to clojure+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
