Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
fg-appendaround
Advanced tools
fg-appendaround - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -5,3 +5,3 @@ { | ||
| "description": "A pattern for responsive markup ", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "homepage": "https://github.com/filamentgroup/AppendAround", | ||
@@ -8,0 +8,0 @@ "author": { |
121
README.md
@@ -5,73 +5,76 @@ # AppendAround | ||
| - [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL | ||
| - © 2012, @scottjehl, Filament Group, Inc. MIT/GPL | ||
| ## how-to | ||
| 1. Insert potential element containers throughout the DOM | ||
| 2. give each container a data-set attribute with a value that matches all other containers' values | ||
| 3. Place your appendAround content in one of the potential containers | ||
| 4. Configure your CSS to only display one potential container at a time (and display others depending on @media conditions in your CSS) | ||
| 4. Call appendAround() on that element when the DOM is ready, and it'll keep itself in a visibile container at all times | ||
| ## How To | ||
| 1. Insert potential element containers throughout the DOM | ||
| 1. give each container a data-set attribute with a value that matches all other containers' values | ||
| 1. Place your appendAround content in one of the potential containers | ||
| 1. Configure your CSS to only display one potential container at a time (and display others depending on @media conditions in your CSS) | ||
| 1. Call appendAround() on that element when the DOM is ready, and it'll keep itself in a visibile container at all times | ||
| ## [Demo](http://filamentgroup.github.io/AppendAround/) | ||
| ## Sample markup | ||
| <!-- potential container for appendAround --> | ||
| <div class="foo" data-set="foobarbaz"></div> | ||
| <ul> | ||
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | ||
| <li>Aliquam tincidunt mauris eu risus.</li> | ||
| <li>Vestibulum auctor dapibus neque.</li> | ||
| </ul> | ||
| <!-- potential container for appendAround --> | ||
| <div class="bar" data-set="foobarbaz"></div> | ||
| <ul> | ||
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | ||
| <li>Aliquam tincidunt mauris eu risus.</li> | ||
| <li>Vestibulum auctor dapibus neque.</li> | ||
| </ul> | ||
| <!-- initial container for appendAround --> | ||
| <div class="baz" data-set="foobarbaz"> | ||
| <p class="sample">Sample appendAround Element</p> | ||
| </div> | ||
| ``` | ||
| <!-- potential container for appendAround --> | ||
| <div class="foo" data-set="foobarbaz"></div> | ||
| <ul> | ||
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | ||
| <li>Aliquam tincidunt mauris eu risus.</li> | ||
| <li>Vestibulum auctor dapibus neque.</li> | ||
| </ul> | ||
| <!-- potential container for appendAround --> | ||
| <div class="bar" data-set="foobarbaz"></div> | ||
| <ul> | ||
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | ||
| <li>Aliquam tincidunt mauris eu risus.</li> | ||
| <li>Vestibulum auctor dapibus neque.</li> | ||
| </ul> | ||
| <!-- initial container for appendAround --> | ||
| <div class="baz" data-set="foobarbaz"> | ||
| <p class="sample">Sample appendAround Element</p> | ||
| </div> | ||
| ``` | ||
| ## Sample CSS | ||
| /* the sample appendaround element */ | ||
| .sample { | ||
| padding: 1em; | ||
| background: tan; | ||
| } | ||
| .baz { | ||
| ``` | ||
| /* the sample appendaround element */ | ||
| .sample { | ||
| padding: 1em; | ||
| background: tan; | ||
| } | ||
| .baz { | ||
| display: block; | ||
| } | ||
| .foo, | ||
| .bar { | ||
| display: none; | ||
| } | ||
| @media (min-width: 30em){ | ||
| .bar { | ||
| display: block; | ||
| } | ||
| .foo, | ||
| .bar { | ||
| .foo, .baz { | ||
| display: none; | ||
| } | ||
| @media (min-width: 30em){ | ||
| .bar { | ||
| display: block; | ||
| } | ||
| .foo, .baz { | ||
| display: none; | ||
| } | ||
| } | ||
| @media (min-width: 50em){ | ||
| div.foo { | ||
| display: block; | ||
| } | ||
| @media (min-width: 50em){ | ||
| div.foo { | ||
| display: block; | ||
| } | ||
| div.bar, div.baz { | ||
| display: none; | ||
| } | ||
| div.bar, div.baz { | ||
| display: none; | ||
| } | ||
| } | ||
| ``` | ||
@@ -81,2 +84,4 @@ | ||
| $( ".sample" ).appendAround(); | ||
| ``` | ||
| $( ".sample" ).appendAround(); | ||
| ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by14.29%
8
- Lines of code
- increased by0.45%
224
- Number of lines in readme file
- increased by7.5%
86
Worsened metrics
- Total package byte prevSize
- decreased by-71.94%
12173
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes