initial commit

1 files changed, 181 insertions, 0 deletions

diff --git a/blog/2019-01-07-useful-css.org b/blog/2019-01-07-useful-css.org
new file mode 100644
index 0000000..3032b59
--- /dev/null
+++ b/blog/2019-01-07-useful-css.org
@@ -0,0 +1,181 @@
+#+date: 2019-01-07
+#+title: Useful CSS Snippets
+
+* 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.