New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cf-layout

Package Overview
Dependencies
Maintainers
2
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cf-layout - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

2

package.json
{
"name": "cf-layout",
"version": "3.0.6",
"version": "3.0.7",
"description": "Capital Framework layouts",

@@ -5,0 +5,0 @@ "main": "src/capital-framework.js",

388

usage.md

@@ -5,84 +5,84 @@ ## Content layouts

<div class="content-l">
<div class="content-l_col content-l_col-1">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Full-width column (spans 12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-2-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Two thirds-width column (spans 8/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-4">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;">
Quarter width column (spans 3/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-3-4">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;">
Three-quarter width column (spans 9/12 columns)
</div>
</div>
</div>
<div class="content-l">
<div class="content-l_col content-l_col-1">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Full-width column (spans 12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-2-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Two thirds-width column (spans 8/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-3">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Third-width column (spans 4/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-4">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;">
Quarter width column (spans 3/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-3-4">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;">
Three-quarter width column (spans 9/12 columns)
</div>
</div>
</div>
````
```
<div class="content-l">

@@ -168,36 +168,36 @@ <div class="content-l_col content-l_col-1">

</div>
````
```
### Large gutters modifier
<div class="content-l content-l__main content-l__large-gutters">
<div class="content-l_col content-l_col-1">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Full-width column (spans 12 columns)
</div>
</div>
</div>
<div class="content-l content-l__main content-l__large-gutters">
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
</div>
<div class="content-l content-l__main content-l__large-gutters">
<div class="content-l_col content-l_col-1">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Full-width column (spans 12 columns)
</div>
</div>
</div>
<div class="content-l content-l__main content-l__large-gutters">
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
<div class="content-l_col content-l_col-1-2">
<div style="background: #F1F2F2;
text-align: center;
padding: 8px;
margin-bottom: 4px;">
Half-width column (spans 6/12 columns)
</div>
</div>
</div>
````
```
<div class="content-l content-l__main content-l__large-gutters">

@@ -231,27 +231,27 @@ <div class="content-l_col content-l_col-1">

</div>
````
```
### Focused state
<a href="#" class="btn focus" title="Test button">Anchor Tag</a>
<button class="btn focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn focus">
<a href="#" class="btn focus" title="Test button">Anchor Tag</a>
<button class="btn focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn focus">
````
```
<a href="#" class="btn focus" title="Test button">Anchor Tag</a>
<button class="btn focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn focus">
````
```
### Active state
<a href="#" class="btn active" title="Test button">Anchor Tag</a>
<button class="btn active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn active">
<a href="#" class="btn active" title="Test button">Anchor Tag</a>
<button class="btn active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn active">
````
```
<a href="#" class="btn active" title="Test button">Anchor Tag</a>
<button class="btn active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn active">
````
```

@@ -262,47 +262,47 @@ ## Secondary button

<a href="#" class="btn btn__secondary">Anchor Tag</a>
<button class="btn btn__secondary" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary">
<a href="#" class="btn btn__secondary">Anchor Tag</a>
<button class="btn btn__secondary" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary">
````
```
<a href="#" class="btn btn__secondary">Anchor Tag</a>
<button class="btn btn__secondary" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary">
````
```
### Hovered state
<a href="#" class="btn btn__secondary hover">Anchor Tag</a>
<button class="btn btn__secondary hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary hover">
<a href="#" class="btn btn__secondary hover">Anchor Tag</a>
<button class="btn btn__secondary hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary hover">
````
```
<a href="#" class="btn btn__secondary hover">Anchor Tag</a>
<button class="btn btn__secondary hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary hover">
````
```
### Focused state
<a href="#" class="btn btn__secondary focus">Anchor Tag</a>
<button class="btn btn__secondary focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary focus">
<a href="#" class="btn btn__secondary focus">Anchor Tag</a>
<button class="btn btn__secondary focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary focus">
````
```
<a href="#" class="btn btn__secondary focus">Anchor Tag</a>
<button class="btn btn__secondary focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary focus">
````
```
### Active state
<a href="#" class="btn btn__secondary active">Anchor Tag</a>
<button class="btn btn__secondary active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary active">
<a href="#" class="btn btn__secondary active">Anchor Tag</a>
<button class="btn btn__secondary active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary active">
````
```
<a href="#" class="btn btn__secondary active">Anchor Tag</a>
<button class="btn btn__secondary active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__secondary active">
````
```

@@ -313,47 +313,47 @@ ## Destructive action button

<a href="#" class="btn btn__warning">Anchor Tag</a>
<button class="btn btn__warning" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning">
<a href="#" class="btn btn__warning">Anchor Tag</a>
<button class="btn btn__warning" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning">
````
```
<a href="#" class="btn btn__warning">Anchor Tag</a>
<button class="btn btn__warning" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning">
````
```
### Hovered state
<a href="#" class="btn btn__warning hover">Anchor Tag</a>
<button class="btn btn__warning hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning hover">
<a href="#" class="btn btn__warning hover">Anchor Tag</a>
<button class="btn btn__warning hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning hover">
````
```
<a href="#" class="btn btn__warning hover">Anchor Tag</a>
<button class="btn btn__warning hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning hover">
````
```
### Focused state
<a href="#" class="btn btn__warning focus">Anchor Tag</a>
<button class="btn btn__warning focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning focus">
<a href="#" class="btn btn__warning focus">Anchor Tag</a>
<button class="btn btn__warning focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning focus">
````
```
<a href="#" class="btn btn__warning focus">Anchor Tag</a>
<button class="btn btn__warning focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning focus">
````
```
### Active state
<a href="#" class="btn btn__warning active">Anchor Tag</a>
<button class="btn btn__warning active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning active">
<a href="#" class="btn btn__warning active">Anchor Tag</a>
<button class="btn btn__warning active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning active">
````
```
<a href="#" class="btn btn__warning active">Anchor Tag</a>
<button class="btn btn__warning active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__warning active">
````
```

@@ -364,8 +364,8 @@ ## Disabled button

<a href="#" class="btn btn__disabled">Anchor Tag</a>
<button class="btn btn__disabled" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__disabled">
<button class="btn" disabled title="Test button">Button Tag w/ disabled attr</button>
<a href="#" class="btn btn__disabled">Anchor Tag</a>
<button class="btn btn__disabled" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__disabled">
<button class="btn" disabled title="Test button">Button Tag w/ disabled attr</button>
````
```
<a href="#" class="btn btn__disabled">Anchor Tag</a>

@@ -375,12 +375,12 @@ <button class="btn btn__disabled" title="Test button">Button Tag</button>

<button class="btn" disabled title="Test button">Button Tag w/ disabled attr</button>
````
```
### Focused state
<a href="#" class="btn btn__disabled focus">Anchor Tag</a>
<button class="btn btn__disabled focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__disabled focus">
<button class="btn focus" disabled title="Test button">Button Tag w/ disabled attr</button>
<a href="#" class="btn btn__disabled focus">Anchor Tag</a>
<button class="btn btn__disabled focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__disabled focus">
<button class="btn focus" disabled title="Test button">Button Tag w/ disabled attr</button>
````
```
<a href="#" class="btn btn__disabled focus">Anchor Tag</a>

@@ -390,3 +390,3 @@ <button class="btn btn__disabled focus" title="Test button">Button Tag</button>

<button class="btn focus" disabled title="Test button">Button Tag w/ disabled attr</button>
````
```

@@ -397,46 +397,46 @@ ## Super button

<a href="#" class="btn btn__super">Anchor Tag</a>
<button class="btn btn__super" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super">
<a href="#" class="btn btn__super">Anchor Tag</a>
<button class="btn btn__super" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super">
````
```
<a href="#" class="btn btn__super">Anchor Tag</a>
<button class="btn btn__super" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super">
````
```
### Hovered state
<a href="#" class="btn btn__super hover">Anchor Tag</a>
<button class="btn btn__super hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super hover">
<a href="#" class="btn btn__super hover">Anchor Tag</a>
<button class="btn btn__super hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super hover">
````
```
<a href="#" class="btn btn__super hover">Anchor Tag</a>
<button class="btn btn__super hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super hover">
````
```
### Focused state
<a href="#" class="btn btn__super focus">Anchor Tag</a>
<button class="btn btn__super focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super focus">
<a href="#" class="btn btn__super focus">Anchor Tag</a>
<button class="btn btn__super focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super focus">
````
```
<a href="#" class="btn btn__super focus">Anchor Tag</a>
<button class="btn btn__super focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super focus">
````
```
### Active state
<a href="#" class="btn btn__super active">Anchor Tag</a>
<button class="btn btn__super active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super active">
<a href="#" class="btn btn__super active">Anchor Tag</a>
<button class="btn btn__super active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super active">
````
```
<a href="#" class="btn btn__super active">Anchor Tag</a>
<button class="btn btn__super active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="btn btn__super active">
````
```
usage.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc