merge org branch into main

1 files changed, 189 insertions, 0 deletions

diff --git a/content/blog/2019-01-07-useful-css.org b/content/blog/2019-01-07-useful-css.org
new file mode 100644
index 0000000..fa5edc5
--- /dev/null
+++ b/content/blog/2019-01-07-useful-css.org
@@ -0,0 +1,189 @@
+#+title: Useful CSS Snippets
+#+date: 2019-01-07
+#+description: Explore some useful CSS snippets.
+#+filetags: :dev:
+
+* Introduction to CSS
+[[https://en.wikipedia.org/wiki/CSS][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:
+
+#+begin_src css
+:root {
+    --primary-color: black;
+    --secondary-color: white;
+}
+
+body {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+}
+#+end_src
+
+* 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
+[[https://www.cssmatic.com/box-shadow][box shadow generator]]. 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:
+
+#+begin_src css
+box-shadow: inset horizontal vertical blur spread color;
+#+end_src
+
+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*
+
+#+begin_src html
+<div class="shadow-examples">
+    <div class="box effect1">
+        <h3>Effect 1</h3>
+    </div>
+</div>
+#+end_src
+
+#+begin_src 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;
+}
+#+end_src
+
+*Box Shadow #2*
+
+#+begin_src html
+<div class="shadow-examples">
+    <div class="box effect2">
+        <h3>Effect 2</h3>
+    </div>
+</div>
+#+end_src
+
+#+begin_src 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);
+}
+#+end_src
+
+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*
+
+#+begin_src html
+<div class="flex-examples">
+    <div class="sm-box">
+        <h3>1</h3>
+    </div>
+    <div class="sm-box">
+        <h3>2</h3>
+    </div>
+</div>
+#+end_src
+
+#+begin_src 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;
+}
+#+end_src
+
+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,
+[[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]]
+from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
+window with dice to see how they collapse and re-align.
+
+* Even More CSS
+For more inspiration, you can visit [[https://www.codepen.io][CodePen]],
+[[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI
+Movement]] to browse the collections of many amazing web designers.