moox / compass-recipes

UNMAINTAINED compass/sass mixins and snippets.

Hey!

I am MoOx, a front-end developer making mobile, web & desktop apps. I enjoy working with:

• ⚛️ React & React Native (for iOS, Android, Web, Windows, macOS)
• ⛑ JavaScript, TypeScript & ReScript
• 🚀 ReScript React Native (which I created).

💬 You can easily message me 📩 via many platforms.

More informations about me on my website https://moox.io.

compass-recipes's Issues

Add "shine" effect

http://jsfiddle.net/KbNq7/ or http://jsfiddle.net/necolas/v4dS8/ or both

Create a "thanks to" page

A lot of code in here are inspired by @necolas, @simurai, @chriscoyier, @LeaVerou and others.
A dedicated page to thanks them is required :)

Ui tabs ?

With a nice effect like @chriscoyier does here http://css-tricks.com/better-tabs-with-round-out-borders/ ?

Update shape/ellipse

See what @simurai do here http://jsfiddle.net/simurai/LxKvU/
Maybe we have to update our recipe.

File to import not found

The import in stylesheets/recipes/_ui.scss (stable branch) does not point to a file

@import "recipes/ui/border";

maybe it should be?

@import "recipes/ui/border/bevel";

Regroup effect and enhancement

Effect and Enhancement are probably the same type of mixins, maybe we should regroup them under "effect" ?

Try Documentup.com for gh-pages

http://documentup.com/

Add CSS patterns

Add all patterns mixins from @LeaVerou's patterns Gallery
http://leaverou.me/css3patterns
Code: https://github.com/LeaVerou/CSS3-Patterns-Gallery/blob/master/index.html

Add drop down shadows

Add all shadow/drop mixins from :

• http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
• http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/

add paper pile effect to shadows

http://cssdeck.com/item/135/paper-pile-effect-v2

Improve keyboard keys

Our keys: http://moox.github.com/compass-recipes/recipes/ui/keyboard/

Better keys: http://cssdeck.com/item/120/apple-keyboard-via-css3

Add speech bubbles

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Do you think (big) things like that can be nice ?

Credit card UI pattern: http://dribbble.com/shots/59966-Credit-Card-Form?list=Rebounds http://dribbble.com/shots/59549-Credit-card-form

Problem with the gem 0.3.0.alpha.1

I'm trying to use Compass-Recipes as a gem. I got the --pre version but when I want to do anything it throws an error "Unable to find "recipes/webfont-icon"". And indeed when I go into the gem folder and look at the root _recipes.scss file, it looks like most of the paths are from another CR version and don't match the recipes/ subfolder. Is this normal ?

Add webfont icons recipes

Using this http://www.justbenicestudio.com/studio/websymbols/ ?
To get something like @adamstac does with pictos free here https://github.com/adamstac/pictos-free but with webfonts !
Will be awesome, right ?

List of fonts

• http://www.justbenicestudio.com/studio/websymbols/
• http://somerandomdude.com/work/iconic/
• http://www.heydonworks.com/a-free-icon-web-font

Add separators style (hr)

Good examples here : http://jsfiddle.net/chriscoyier/GaEzp/35/

Need to create stable gh-pages for the last available gem

The current gh-pages is updated to be sync with the tests in the master (using bundle exec rake pages, btw this should be put into a git hook)
So we need for end user a snapshot of the gh-pages synced with the latest tag (== available gem). We need an url to do that.
Maybe @chriseppstein for recipes.compass-style.org ? (I guess I'm dreaming...)

Bookmark of interesting ressource: CSS Deck

We can found interesting work done on CSS Deck http://cssdeck.com/
It can be a good source of inspiration.

Add CSS spinner as a ui loader

This one is a good start
http://cssdeck.com/item/259/css3-spinner

Transform this GIF as a loading bar

http://timely.is/images/loading-bar.gif

Change comments syntax

According to the SASS documentation, /* */ is for CSS comments, and // for SASS comments. Thing is, most of the comments in CR are the former and thus output about 600 lines of comments in the final .css in the non-compressed modes of SASS.
According to Sass recommendations, a sass class should output absolutely nothing when being imported.

compass install recipes/font-icons not working

I get the following error when trying to install font-icons template

termina$ compass install recipes/icon-fonts
SyntaxError on line ["146"] of /Users/anders/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/installers/manifest.rb: /Users/anders/.rvm/gems/ruby-1.9.3-p194/gems/compass-recipes-0.3.0.alpha.2/lib/../templates/icon-fonts/manifest.rb:3: syntax error, unexpected tIDENTIFIER, expecting $end
Run with --trace to see the full backtrace

The reason seems to be line 3:

directory "fonts/icons" => :within fonts_dir

which is not the valid way to import the fonts from a directory (or does it work in latest compass 0.13?). Maybe

discover :fonts

could be used instead?

ribbon

%effect-ribbon-skin-classic cause error in line 58 and 77 _ribbon.scss

Add webfonts

http://keyamoon.com/icomoon

Fix webfont tests for showcase

This does not work.
http://moox.github.com/compass-recipes/recipes/ui/webfont-icons/
It have to :)

We have to find a way to move font during building gh-pages. Using a var for the location or something like that.

Syntax Error

I got this

Syntax error: File to import not found or unreadable: recipes/form/skin/default

I don't know what happen here, I don't find any code called the recipes/form/skin/default

Ui Components ?

Menu layouts or skins ? like http://www.red-team-design.com/wp-content/uploads/2011/06/css3-menu.html ?
Move form skins in there ?
Search box, Calendar skins and similars stuffs ?
Windows, OS X, iOS, Gnome KDE skins or stuffs ?
Stuffs like that ? http://michaelhue.com/keyscss/ ? or that http://mikos.co.uk/tags/ ?

Gravatar helper

Create gravatar function (to generate gravatar url) using Digest::MD5

http://www.gravatar.com/avatar/" + MD5 $email + "&s=" $width

Eventually make an helper based on a html data-email attribute (+ data-avatar-width ?), and use a pseudo element to add the gravatar ?

Do you think it's a good idea ?

JS Source: http://darcyclarke.me/development/quick-tip-get-gravatar-images-from-emails-with-javascript

Avgrund

Check if we can get something similar to http://lab.hakim.se/avgrund/ with pur CSS (or with the minimal JS possible as a compass extension)

Add buttons animations

Like here http://tympanus.net/Tutorials/AnimatedButtons

File to import not found

The import in stylesheets/recipes/form/_skin.scss (stable branch) is

@import "recipes/form/skin/default";

...when it should be

@import "recipes/form/skin/natural";

...or the change the name of _natural.scss to _default.scss

Need to create real demos using the recipes

The title is clear enough !
We need to create demo, using our recipes, to show people the awesomeness of using lots of recipes :D
The demo should show the code used. Maybe we can create a generator or a parser to display code next to the demo.

Create a changelog

No comment :)

updated gem

What features are standing in the way of building an updated gem? I'm using CR currently and a released gem would help me share my work with other devs here. I'm willing to help.

Add new shapes

@chriscoyier added some shapes here http://css-tricks.com/examples/ShapesOfCSS/

Add sassy noise

https://github.com/antsa/sassy_noise

Add lots of buttons

The main idea is to add minimal recipes to be able to create a high range of buttons.
So we do not need mixin like button-github-blue or button-orange-with-noise.
I think with less than 10 mixins, we can create tons of examples.
Or maybe 3 or 4 mixins will be enough.

Inspiration
http://lab.simurai.com/css/buttons/
http://brandonmathis.com/projects/fancy-buttons/demo/
http://dribbble.com/shots/544622-Blankslate
https://github.com/jhardy/Sassy-Buttons

For examples:
http://houseofbuttons.tumblr.com/
http://forrst.com/posts/CSS_Button_Contest-5J1

Trick for 1px border on retina:
http://bradbirdsall.com/mobile-web-in-high-resolution
http://codepen.io/pen/bKens

Form skin ?

Do you think form skins have a place in this library ?
If yes, just drop some names (or +1) :)

Create a compass extension to add sound for hover on menu

Use http://css-tricks.com/play-sound-on-hover/

Grab some stuffs from this UIs

http://std.li/pastel/home.html#home
http://pea.rs/
http://playground.deaxon.com/css/

Should be broken into more issues

Add all possibles shapes

Add all shapes from http://css-tricks.com/examples/ShapesOfCSS/

Error on Import

Used the "Additional Path" Compass trick to use the current head of Compass Recipes, and when I @import "recipes";, the following Compass error occours:

Line 1: File to import not found or unreadable: recipes/form/element/border-color.

This is obviously preventing me from using all of Compass Recipes. If you have a quick fix for me to do that would be great, but it does need to be resoled.

Rename this repo to "CSS recipes" ?

And ask some help to port recipes to less, using something like bootstrap ?

Add Bokeh as background pattern

Examples
http://nimbupani.com/bokeh-with-css3-gradients.html
http://nikhil-verma.com/demos/5_bokeh/

Pure CSS Icons ?

Do you think it's a good idea to add pur css icons ?

http://nicolasgallagher.com/pure-css-gui-icons/demo/
http://rathersplendid.net/cssicons/

We do not want something like http://graphicpeel.com/cssiosicons

But do we want something like http://nicolasgallagher.com/pure-css-social-media-icons/demo/ ?

Add loading indicator

Using a single html tag, background (repeating), & pseudo elements.

Add css transition for the dropdown menu recipe

...in this recipe recipes/ui/menu/dropdown

https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/ui/menu/_dropdown.scss

Add lots of animations

Take inspiration from here https://github.com/daneden/animate.css

• http://fvsch.com/code/transition-fade/

normalize.css from @necolas

Do you think we should add this normalize.css ?

https://github.com/necolas/normalize.css

Create tests for all existing mixins