Preview
Lobotomized Owl
Allows for quickly applying the lobotomized owl technique to a block-level element.
Owls and margins
Using the lobotomized owl goes against the principle of using only margin-bottoms. If you feel you’re using too many .owl classes, you might consider using a global lobotomized owl (as the original article suggests) and forget about the “only margin-bottom” rule.
Example
<article class="owl">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus deserunt et pariatur, enim ad dolorum ea suscipit alias vitae corporis, quisquam ratione eaque est! Soluta veritatis odio ea alias distinctio!</p>
<p>Necessitatibus explicabo, expedita cumque quisquam numquam nisi nesciunt doloribus temporibus quo nemo quos quis debitis dolor maxime fugiat eaque, exercitationem et praesentium nobis iusto. Rem mollitia possimus praesentium delectus molestias?</p>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae consequatur repellendus repellat expedita rerum dolor quis doloribus quisquam vero laboriosam natus quam necessitatibus at, nostrum placeat doloremque quia facilis. Laboriosam?</p>
<p>Inventore saepe cupiditate dicta, numquam necessitatibus doloremque fuga voluptate recusandae quae alias nihil vel tenetur fugiat voluptates facilis sequi ab, illum vitae illo deleniti laborum aperiam! Voluptatem ipsum aliquam magnam!</p>
</section>
<p>In culpa unde perspiciatis delectus. Assumenda dolorem excepturi, voluptatum neque unde architecto repellendus accusantium perspiciatis possimus pariatur laudantium laboriosam debitis esse quas, reiciendis labore minima facere vitae aperiam earum. Ea?</p>
</article>
Assets
- Filesystem Path: src/components/helpers/lobotomized-owl/_lobotomized-owl.scss
- Size: 81 Bytes
-
Content:
.owl { * + * { margin-top: $gutter; margin-bottom: 0; } }