Solved By Flexbox - an excerpt

Developer
Andy Hullinger
Size
6,971 Kb
Views
34,408
  1. Solved By Flexbox - an excerpt Previews
  2. Solved By Flexbox - an excerpt HTML Codes
  3. Solved By Flexbox - an excerpt CSS Codes

How do I make an solved by flexbox - an excerpt?

This is a simple extraction of just the key "grid" from the excellent work here http://philipwalton.github.io/solved-by-flexbox/demos/grids/. What is a solved by flexbox - an excerpt? How do you make a solved by flexbox - an excerpt? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Solved By Flexbox - an excerpt Previews
IQ Test

Solved By Flexbox - an excerpt - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solved By Flexbox - an excerpt</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/a0466bab6bd82906093f08e8d.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*Here I have "excerpted" just the key scss needed to get started with a simple flexbox "grid" system. See pen info for more details
*/
*, *::before, *::after { box-sizing: border-box;
}
.Site { display: flex; flex-direction: column; min-height: 100%;
}
.Site-content { flex: 1; width: 100%; padding: 1.5em; /* stupid IE10 tweener syntax */ -ms-flex-preferred-size: auto;
}
@media (min-width: 48em) { .Site-content { padding-top: 2em; }
}
.Container { max-width: 50rem; margin: 0 auto;
}
.Grid { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.Grid-cell { flex: 1;
}
.Grid--flexCells > .Grid-cell { display: flex;
}
.Grid--top { align-items: flex-start;
}
.Grid--bottom { align-items: flex-end;
}
.Grid--center { align-items: center;
}
.Grid-cell--top { align-self: flex-start;
}
.Grid-cell--bottom { align-self: flex-end;
}
.Grid-cell--center { align-self: center;
}
.Grid--fit > .Grid-cell { flex: 1;
}
.Grid--full > .Grid-cell { flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell { flex: 0 0 50%;
}
.Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%;
}
.Grid--1of4 > .Grid-cell { flex: 0 0 25%;
}
@media (min-width: 24em) { .small-Grid--fit > .Grid-cell { flex: 1; } .small-Grid--full > .Grid-cell { flex: 0 0 100%; } .small-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .small-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .small-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
@media (min-width: 36em) { .med-Grid--fit > .Grid-cell { flex: 1; } .med-Grid--full > .Grid-cell { flex: 0 0 100%; } .med-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .med-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .med-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
@media (min-width: 48em) { .large-Grid--fit > .Grid-cell { flex: 1; } .large-Grid--full > .Grid-cell { flex: 0 0 100%; } .large-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .large-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .large-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
.Grid--gutters { margin-left: -1em;
}
.Grid--gutters > .Grid-cell { padding-left: 1em;
}
.Grid--guttersLarge { margin-left: -1.5em;
}
.Grid--guttersLarge > .Grid-cell { padding-left: 1.5em;
}
.Grid--gutters2x { margin-left: -2em;
}
.Grid--gutters2x > .Grid-cell { padding-left: 2em;
}
.Grid--gutters3x { margin-left: -3em;
}
.Grid--gutters3x > .Grid-cell { padding-left: 3em;
}
@media (min-width: 24em) { .small-Grid--gutters { margin-left: -1em; } .small-Grid--gutters > .Grid-cell { padding-left: 1em; } .small-Grid--guttersLarge { margin-left: -1.5em; } .small-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .small-Grid--gutters2x { margin-left: -2em; } .small-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .small-Grid--gutters3x { margin-left: -3em; } .small-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@media (min-width: 36em) { .med-Grid--gutters { margin-left: -1em; } .med-Grid--gutters > .Grid-cell { padding-left: 1em; } .med-Grid--guttersLarge { margin-left: -1.5em; } .med-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .med-Grid--gutters2x { margin-left: -2em; } .med-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .med-Grid--gutters3x { margin-left: -3em; } .med-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@media (min-width: 48em) { .large-Grid--gutters { margin-left: -1em; } .large-Grid--gutters > .Grid-cell { padding-left: 1em; } .large-Grid--guttersLarge { margin-left: -1.5em; } .large-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .large-Grid--gutters2x { margin-left: -2em; } .large-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .large-Grid--gutters3x { margin-left: -3em; } .large-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@supports not (flex-wrap: wrap) { .Grid--ffMultilineSupport { display: block; } .Grid--ffMultilineSupport > .Grid-cell { display: inline-block; vertical-align: top; } .Grid--full { display: block; } .Grid--full > .Grid-cell { display: block; } .Grid--fit, .Grid--1of2, .Grid--1of3, .Grid--1of4 { display: flex; } @media (min-width: 24em) { .small-Grid--full { display: block; } .small-Grid--full > .Grid-cell { display: block; } .small-Grid--fit, .small-Grid--1of2, .small-Grid--1of3, .small-Grid--1of4 { display: flex; } } @media (min-width: 36em) { .med-Grid--full { display: block; } .med-Grid--full > .Grid-cell { display: block; } .med-Grid--fit, .med-Grid--1of2, .med-Grid--1of3, .med-Grid--1of4 { display: flex; } } @media (min-width: 48em) { .large-Grid--full { display: block; } .large-Grid--full > .Grid-cell { display: block; } .large-Grid--fit, .large-Grid--1of2, .large-Grid--1of3, .large-Grid--1of4 { display: flex; } }
}
.u-full { width: 100% !important; flex: none !important;
}
.u-1of2 { width: 50% !important; flex: none !important;
}
.u-1of3 { width: 33.3333% !important; flex: none !important;
}
.u-2of3 { width: 66.6667% !important; flex: none !important;
}
.u-1of4 { width: 25% !important; flex: none !important;
}
.u-3of4 { width: 75% !important; flex: none !important;
}
@media (min-width: 24em) { .u-small-full { width: 100% !important; flex: none !important; } .u-small-1of2 { width: 50% !important; flex: none !important; } .u-small-1of3 { width: 33.3333% !important; flex: none !important; } .u-small-2of3 { width: 66.6667% !important; flex: none !important; } .u-small-1of4 { width: 25% !important; flex: none !important; } .u-small-3of4 { width: 75% !important; flex: none !important; }
}
@media (min-width: 36em) { .u-med-full { width: 100% !important; flex: none !important; } .u-med-1of2 { width: 50% !important; flex: none !important; } .u-med-1of3 { width: 33.3333% !important; flex: none !important; } .u-med-2of3 { width: 66.6667% !important; flex: none !important; } .u-med-1of4 { width: 25% !important; flex: none !important; } .u-med-3of4 { width: 75% !important; flex: none !important; }
}
@media (min-width: 48em) { .u-large-full { width: 100% !important; flex: none !important; } .u-large-1of2 { width: 50% !important; flex: none !important; } .u-large-1of3 { width: 33.3333% !important; flex: none !important; } .u-large-2of3 { width: 66.6667% !important; flex: none !important; } .u-large-1of4 { width: 25% !important; flex: none !important; } .u-large-3of4 { width: 75% !important; flex: none !important; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main class="Site-content Container">
<h3>Basic Grids</h3>
<p>The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They're also equal height by default.</p>
<div class="Grid Grid--gutters"> <div class="Grid-cell"> <div class="Demo">1/2</div> </div> <div class="Grid-cell"> <div class="Demo">1/2</div> </div>
</div>
<div class="Grid Grid--gutters"> <div class="Grid-cell"> <div class="Demo">1/3</div> </div> <div class="Grid-cell"> <div class="Demo">1/3</div> </div> <div class="Grid-cell"> <div class="Demo">1/3</div> </div>
</div>
<div class="Grid Grid--gutters"> <div class="Grid-cell"> <div class="Demo">1/4</div> </div> <div class="Grid-cell"> <div class="Demo">1/4</div> </div> <div class="Grid-cell"> <div class="Demo">1/4</div> </div> <div class="Grid-cell"> <div class="Demo">1/4</div> </div>
</div>
<div class="Grid Grid--gutters Grid--flexCells"> <div class="Grid-cell"> <div class="Demo"> Full-height, even when my content doesn't fill the space. </div> </div> <div class="Grid-cell"> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </div> </div>
</div>
<h3>Individual Sizing</h3>
<p>When equal widths aren't what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal.</p>
<p>The cells below labeled "auto" do not have sizing classes specified.</p>
<div class="Grid Grid--gutters"> <div class="Grid-cell u-1of2"> <div class="Demo">1/2</div> </div> <div class="Grid-cell"> <div class="Demo">auto</div> </div> <div class="Grid-cell"> <div class="Demo">auto</div> </div>
</div>
<div class="Grid Grid--gutters"> <div class="Grid-cell"> <div class="Demo">auto</div> </div> <div class="Grid-cell u-1of3"> <div class="Demo">1/3</div> </div>
</div>
<div class="Grid Grid--gutters"> <div class="Grid-cell u-1of4"> <div class="Demo">1/4</div> </div> <div class="Grid-cell"> <div class="Demo">auto</div> </div> <div class="Grid-cell u-1of3"> <div class="Demo">1/3</div> </div>
</div>
<h3>Responsive</h3>
<p>Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly.</p>
<p>The cells below should be full width by default and scaled to fit above <code>48em</code>. Resize your browser to see them in action.</p>
<div class="Grid Grid--gutters Grid--full large-Grid--fit"> <div class="Grid-cell"> <div class="Demo">Full / Halves</div> </div> <div class="Grid-cell"> <div class="Demo">Full / Halves</div> </div>
</div>
<div class="Grid Grid--gutters Grid--full large-Grid--fit"> <div class="Grid-cell"> <div class="Demo">Full / Thirds</div> </div> <div class="Grid-cell"> <div class="Demo">Full / Thirds</div> </div> <div class="Grid-cell"> <div class="Demo">Full / Thirds</div> </div>
</div>
<h3>Grid-ception</h3>
<p>Grid components are infinitely nestable inside of other grid components.</p>
<div class="Grid Grid--gutters Grid--flexCells"> <div class="Grid-cell"> <div class="Demo"> <div class="Grid Grid--gutters"> <div class="Grid-cell u-1of3"> <div class="Demo u-spaceBN">1/3</div> </div> <div class="Grid-cell"> <div class="Demo u-spaceBN"> <div class="Grid Grid--gutters"> <div class="Grid-cell"> <div class="Demo u-spaceBN">1/2</div> </div> <div class="Grid-cell"> <div class="Demo u-spaceBN">1/2</div> </div> </div> </div> </div> </div> </div> </div> <div class="Grid-cell u-1of3"> <div class="Demo">1/3</div> </div>
</div>
<h2>Alignment Features</h2>
<h3>Top-aligned Grid Cells</h3>
<div class="Grid Grid--gutters Grid--top"> <div class="Grid-cell"> <div class="Demo"> This cell should be top-aligned. </div> </div> <div class="Grid-cell u-1of2"> <div class="Demo"> Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. </div> </div> <div class="Grid-cell"> <div class="Demo"> This cell should be top-aligned. </div> </div>
</div>
<h3>Bottom-aligned Grid Cells</h3>
<div class="Grid Grid--gutters Grid--bottom"> <div class="Grid-cell"> <div class="Demo"> This cell should be bottom-aligned. </div> </div> <div class="Grid-cell"> <div class="Demo"> Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. </div> </div> <div class="Grid-cell"> <div class="Demo"> This cell should be bottom-aligned. </div> </div>
</div>
<h3>Vertically Centered Grid Cells</h3>
<div class="Grid Grid--gutters Grid--center"> <div class="Grid-cell"> <div class="Demo"> This cell should be vertically-centered with the cell to its right. </div> </div> <div class="Grid-cell"> <div class="Demo"> Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus. Nullam vel facilisis libero. Duis semper lobortis elit, vitae dictum erat.</div> </div>
</div>
<h3>Mixed Vertical Alignment</h3>
<div class="Grid Grid--gutters"> <div class="Grid-cell Grid-cell--top"> <div class="Demo"> This cell should be top aligned. </div> </div> <div class="Grid-cell"> <div class="Demo"> Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus.</div> </div> <div class="Grid-cell Grid-cell--center"> <div class="Demo"> This cell should be center-aligned. </div> </div> <div class="Grid-cell Grid-cell--bottom"> <div class="Demo"> This cell should be bottom-aligned. </div> </div>
</div>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Solved By Flexbox - an excerpt - Script Codes CSS Codes

/*Here I have "excerpted" just the key scss needed to get started with a simple flexbox "grid" system. See pen info for more details
*/
*, *::before, *::after { box-sizing: border-box;
}
.Site { display: flex; flex-direction: column; min-height: 100%;
}
.Site-content { flex: 1; width: 100%; padding: 1.5em; /* stupid IE10 tweener syntax */ -ms-flex-preferred-size: auto;
}
@media (min-width: 48em) { .Site-content { padding-top: 2em; }
}
.Container { max-width: 50rem; margin: 0 auto;
}
.Grid { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.Grid-cell { flex: 1;
}
.Grid--flexCells > .Grid-cell { display: flex;
}
.Grid--top { align-items: flex-start;
}
.Grid--bottom { align-items: flex-end;
}
.Grid--center { align-items: center;
}
.Grid-cell--top { align-self: flex-start;
}
.Grid-cell--bottom { align-self: flex-end;
}
.Grid-cell--center { align-self: center;
}
.Grid--fit > .Grid-cell { flex: 1;
}
.Grid--full > .Grid-cell { flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell { flex: 0 0 50%;
}
.Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%;
}
.Grid--1of4 > .Grid-cell { flex: 0 0 25%;
}
@media (min-width: 24em) { .small-Grid--fit > .Grid-cell { flex: 1; } .small-Grid--full > .Grid-cell { flex: 0 0 100%; } .small-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .small-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .small-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
@media (min-width: 36em) { .med-Grid--fit > .Grid-cell { flex: 1; } .med-Grid--full > .Grid-cell { flex: 0 0 100%; } .med-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .med-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .med-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
@media (min-width: 48em) { .large-Grid--fit > .Grid-cell { flex: 1; } .large-Grid--full > .Grid-cell { flex: 0 0 100%; } .large-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .large-Grid--1of3 > .Grid-cell { flex: 0 0 33.3333%; } .large-Grid--1of4 > .Grid-cell { flex: 0 0 25%; }
}
.Grid--gutters { margin-left: -1em;
}
.Grid--gutters > .Grid-cell { padding-left: 1em;
}
.Grid--guttersLarge { margin-left: -1.5em;
}
.Grid--guttersLarge > .Grid-cell { padding-left: 1.5em;
}
.Grid--gutters2x { margin-left: -2em;
}
.Grid--gutters2x > .Grid-cell { padding-left: 2em;
}
.Grid--gutters3x { margin-left: -3em;
}
.Grid--gutters3x > .Grid-cell { padding-left: 3em;
}
@media (min-width: 24em) { .small-Grid--gutters { margin-left: -1em; } .small-Grid--gutters > .Grid-cell { padding-left: 1em; } .small-Grid--guttersLarge { margin-left: -1.5em; } .small-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .small-Grid--gutters2x { margin-left: -2em; } .small-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .small-Grid--gutters3x { margin-left: -3em; } .small-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@media (min-width: 36em) { .med-Grid--gutters { margin-left: -1em; } .med-Grid--gutters > .Grid-cell { padding-left: 1em; } .med-Grid--guttersLarge { margin-left: -1.5em; } .med-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .med-Grid--gutters2x { margin-left: -2em; } .med-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .med-Grid--gutters3x { margin-left: -3em; } .med-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@media (min-width: 48em) { .large-Grid--gutters { margin-left: -1em; } .large-Grid--gutters > .Grid-cell { padding-left: 1em; } .large-Grid--guttersLarge { margin-left: -1.5em; } .large-Grid--guttersLarge > .Grid-cell { padding-left: 1.5em; } .large-Grid--gutters2x { margin-left: -2em; } .large-Grid--gutters2x > .Grid-cell { padding-left: 2em; } .large-Grid--gutters3x { margin-left: -3em; } .large-Grid--gutters3x > .Grid-cell { padding-left: 3em; }
}
@supports not (flex-wrap: wrap) { .Grid--ffMultilineSupport { display: block; } .Grid--ffMultilineSupport > .Grid-cell { display: inline-block; vertical-align: top; } .Grid--full { display: block; } .Grid--full > .Grid-cell { display: block; } .Grid--fit, .Grid--1of2, .Grid--1of3, .Grid--1of4 { display: flex; } @media (min-width: 24em) { .small-Grid--full { display: block; } .small-Grid--full > .Grid-cell { display: block; } .small-Grid--fit, .small-Grid--1of2, .small-Grid--1of3, .small-Grid--1of4 { display: flex; } } @media (min-width: 36em) { .med-Grid--full { display: block; } .med-Grid--full > .Grid-cell { display: block; } .med-Grid--fit, .med-Grid--1of2, .med-Grid--1of3, .med-Grid--1of4 { display: flex; } } @media (min-width: 48em) { .large-Grid--full { display: block; } .large-Grid--full > .Grid-cell { display: block; } .large-Grid--fit, .large-Grid--1of2, .large-Grid--1of3, .large-Grid--1of4 { display: flex; } }
}
.u-full { width: 100% !important; flex: none !important;
}
.u-1of2 { width: 50% !important; flex: none !important;
}
.u-1of3 { width: 33.3333% !important; flex: none !important;
}
.u-2of3 { width: 66.6667% !important; flex: none !important;
}
.u-1of4 { width: 25% !important; flex: none !important;
}
.u-3of4 { width: 75% !important; flex: none !important;
}
@media (min-width: 24em) { .u-small-full { width: 100% !important; flex: none !important; } .u-small-1of2 { width: 50% !important; flex: none !important; } .u-small-1of3 { width: 33.3333% !important; flex: none !important; } .u-small-2of3 { width: 66.6667% !important; flex: none !important; } .u-small-1of4 { width: 25% !important; flex: none !important; } .u-small-3of4 { width: 75% !important; flex: none !important; }
}
@media (min-width: 36em) { .u-med-full { width: 100% !important; flex: none !important; } .u-med-1of2 { width: 50% !important; flex: none !important; } .u-med-1of3 { width: 33.3333% !important; flex: none !important; } .u-med-2of3 { width: 66.6667% !important; flex: none !important; } .u-med-1of4 { width: 25% !important; flex: none !important; } .u-med-3of4 { width: 75% !important; flex: none !important; }
}
@media (min-width: 48em) { .u-large-full { width: 100% !important; flex: none !important; } .u-large-1of2 { width: 50% !important; flex: none !important; } .u-large-1of3 { width: 33.3333% !important; flex: none !important; } .u-large-2of3 { width: 66.6667% !important; flex: none !important; } .u-large-1of4 { width: 25% !important; flex: none !important; } .u-large-3of4 { width: 75% !important; flex: none !important; }
}
Solved By Flexbox - an excerpt - Script Codes
Solved By Flexbox - an excerpt - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 4
Size 6,971 Kb
Views 34,408
Do you need developer help for Solved By Flexbox - an excerpt?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Simple photo captions
Banner Example
CSS type and layout - discrete elements
Example Responsive Resume
Presentation Template with Animation
Simple example infographic pen
Simple Parallax ala Nike Better World
Hello Kitty Puppet Example TweenMax
Mageractive Week 1
My Quote Assignment
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!