test conversion back to markdown

1 files changed, 200 insertions, 0 deletions

diff --git a/content/blog/2019-01-07-useful-css.md b/content/blog/2019-01-07-useful-css.md
new file mode 100644
index 0000000..687be03
--- /dev/null
+++ b/content/blog/2019-01-07-useful-css.md
@@ -0,0 +1,200 @@
++++
+date = 2019-01-07
+title = "Useful CSS Snippets"
+description = ""
+draft = false
++++
+
+# Introduction to CSS
+
+[CSS](https://en.wikipedia.org/wiki/CSS), the language used to markup
+HTML code and make it \"pretty\", is one of the most effective ways to
+increase the attractiveness of a website. It can also lead to increased
+user engagement, retention, and satisfaction. In fact, there are whole
+career fields are dedicated to the improvement of user experiences,
+known as UI design and UX design.
+
+Some web developers are used to the common CSS properties, such as
+element sizing, fonts, colors, etc., but are not as well versed in
+less-used properties and values such as `flexbox`,
+`clip-path`, and `transform`. This article will
+provide some insight into the less-used and unique CSS properties.
+
+# CSS Variables
+
+The first topic today is CSS variables. Variables are not often used by
+smaller developers. CSS variables allow you to give your website a
+well-defined structure, where you can easily reuse CSS properties
+throughout the project.
+
+You can use variables to define things, such as color palettes. Then,
+you can use these colors for backgrounds anywhere else in the HTML. This
+could be extended, where extra variables could be defined for
+`primary-text`, `quoted-text`, etc. Variables can
+also be used to define spacing (e.g. `32px` or
+`2rem`), which can then be applied to margins, padding, font
+sizes, and more.
+
+For example, here are some variables defined at the root of the website,
+which allows for any subsequent CSS rules to use those variables:
+
+``` css
+:root {
+    --primary-color: black;
+    --secondary-color: white;
+}
+
+body {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+}
+```
+
+# CSS Box Shadows
+
+Box shadows were once my mortal enemy. No matter how hard I tried, I
+just couldn\'t get them to work how I wanted. Because of this, my
+favorite discovery has been CSSMatic\'s [box shadow
+generator](https://www.cssmatic.com/box-shadow). It provides an
+excellent tool to generate box shadows using their simple sliders.
+Surprisingly, this is the reason I learned how box shadows work! You can
+use the sliders and watch how the CSS code changes in the image that is
+displayed. Through this, you should understand that the basic structure
+for box shadows is:
+
+``` css
+box-shadow: inset horizontal vertical blur spread color;
+```
+
+Now, let\'s look at some basic examples! You can copy and paste the
+following code into a site like CodePen or your own HTML files. Feel
+free to play around with the code, experiment, and learn.
+
+**Box Shadow #1**
+
+``` html
+<div class="shadow-examples">
+    <div class="box effect1">
+        <h3>Effect 1</h3>
+    </div>
+</div>
+```
+
+``` css
+.box h3 {
+    text-align: center;
+    position: relative;
+    top: 80px;
+}
+.box {
+    width: 70%;
+    height: 200px;
+    background: #fff;
+    margin: 40px auto;
+}
+.effect1 {
+    box-shadow: 0 10px 6px -6px #777;
+}
+```
+
+**Box Shadow #2**
+
+``` html
+<div class="shadow-examples">
+    <div class="box effect2">
+        <h3>Effect 2</h3>
+    </div>
+</div>
+```
+
+``` css
+.box h3 {
+    text-align: center;
+    position: relative;
+    top: 80px;
+}
+.box {
+    width: 70%;
+    height: 200px;
+    background: #fff;
+    margin: 40px auto;
+}
+.effect2 {
+    box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.75);
+}
+```
+
+Try these box shadows out on your own and see how changing each shadow
+value works.
+
+# CSS Flexbox
+
+Now, let\'s move on to the best part of this article: flexbox. The
+flexbox is by far my favorite new toy. I originally stumbled across this
+solution after looking for more efficient ways of centering content
+horizontally AND vertically. I had used a few hack-ish methods before,
+but flexbox throws those out the window. The best part of it all is that
+flexbox is *dead simple*.
+
+Flexbox pertains to the parent div of any element. You want the parent
+to be the flexbox in which items are arranged to use the flex methods.
+It\'s easier to see this in action that explained, so let\'s see an
+example.
+
+**Flexbox**
+
+``` html
+<div class="flex-examples">
+    <div class="sm-box">
+        <h3>1</h3>
+    </div>
+    <div class="sm-box">
+        <h3>2</h3>
+    </div>
+</div>
+```
+
+``` css
+.flex-examples {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+    background-color: #f2f2f2;
+}
+.sm-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20%;
+    height: 100px;
+    background: #fff;
+    margin: 40px 10px;
+}
+```
+
+You may notice that we no longer need to use the `top`
+property for the `h3` elements in our code. This is because
+we set the display box to be a flex container for the small boxes, AND
+we made the small boxes flex containers for their elements (the h3
+tags). Flex boxes can be nested like this to center content that is
+inside centered content.
+
+For the example above, we designated the `justify-content`
+property to be `flex-start` so that the boxes stack from the
+left side of the screen. This property can be changed to
+`center` to make the boxes appear in the center of the
+screen.
+
+For an interactive example, [check out this
+CodePen](https://codepen.io/LandonSchropp/pen/KpzzGo) from
+[LandonScropp](https://codepen.io/LandonSchropp/). Resize the window
+with dice to see how they collapse and re-align.
+
+# Even More CSS
+
+For more inspiration, you can visit [CodePen](https://www.codepen.io),
+[Dribbble](https://dribbble.com), or [UI
+Movement](https://uimovement.com) to browse the collections of many
+amazing web designers.