Used to provide structural templates.
Pattern
t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
Ari Palo aripalo
aripalo
/ bended-shadow.css
Created
May 18, 2012 10:42
— forked from nrrrdcore/bending-shadow.css
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .bended-shadow { | |
| position: relative; | |
| width: 500px; | |
| margin: 200px auto; | |
| } | |
| .bended-shadow::before, .bended-shadow::after { | |
| content: ''; | |
| position: absolute; | |
| width: 60%; |
aripalo
/ apple-shadow.css
Created
May 18, 2012 10:42
— forked from nrrrdcore/apple-shadow.css
Bending Shadows Backwards: Apple.com's Container CSS Sorcery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .shadow-stuff { | |
| -moz-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| -webkit-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| -moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| -webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| } | |
| .container { |
aripalo
/ anchorinclude.js
Created
March 30, 2012 15:59
— forked from scottjehl/anchorinclude.js
Anchor-include Pattern
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * anchor-include pattern for already-functional links that work as a client-side include | |
| * Copyright 2011, Scott Jehl, scottjehl.com | |
| * Dual licensed under the MIT | |
| * Idea from Scott Gonzalez | |
| * to use, place attributes on an already-functional anchor pointing to content | |
| * that should either replace, or insert before or after that anchor | |
| * after the page has loaded | |
| * Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a> | |
| * Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a> |
aripalo
/ README.md
Created
March 21, 2012 13:49
— forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns
NewerOlder