diff --git a/src/posts/sample/a-post-with-code-samples.md b/src/posts/sample/a-post-with-code-samples.md deleted file mode 100644 index cd76f6a..0000000 --- a/src/posts/sample/a-post-with-code-samples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: A post with code samples -date: '2019-12-18' -type: 'news' ---- -The best way to demo a code post is to display a real life post, so check out this one from [andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/) about a full bleed CSS utility. - -- - - - -Sometimes you want to break your components out of the constraints that they find themselves in. A common situation where this occurs is when you don’t have much control of the container that it exists in, such as a CMS main content area. - -This is even more the case with editing tools such as the [WordPress Gutenberg editor](https://wordpress.org/gutenberg/), where in theory, you could pull in a component from a design system and utilise it in the main content of your web page. In these situations, it can be pretty darn handy to have a little utility that makes the element 100% of the viewport’s width _and_ still maintain its flow within its parent container. - -This is when I normally pull the `.full-bleed` utility class out of my back pocket. - -## The `.full-bleed` utility - -It’s small, but hella mighty: - -```css -.full-bleed { - width: 100vw; - margin-left: 50%; - transform: translateX(-50%); -} -``` - -Here it is in a context where it makes a fancy `