content/blog/2019-01-07-useful-css.org

  1#+date:        <2019-01-07 Mon 00:00:00>
  2#+title:       CSS Implementation Techniques for Structured Web Layouts
  3#+description: Practical guide on applying CSS rules and constructs such as flexbox, box shadows, and variable usage to achieve standard web styling and layout objectives.
  4#+slug:        useful-css
  5#+filetags:    :css:web-design:tips:
  6
  7* Introduction to CSS
  8
  9[[https://en.wikipedia.org/wiki/CSS][CSS]], the language used to markup HTML code and make it "pretty", is one of the
 10most effective ways to increase the attractiveness of a website. It can also
 11lead to increased user engagement, retention, and satisfaction. In fact, there
 12are whole career fields are dedicated to the improvement of user experiences,
 13known as UI design and UX design.
 14
 15Some web developers are used to the common CSS properties, such as element
 16sizing, fonts, colors, etc., but are not as well versed in less-used properties
 17and values such as =flexbox=, =clip-path=, and =transform=. This article will
 18provide some insight into the less-used and unique CSS properties.
 19
 20* CSS Variables
 21
 22The first topic today is CSS variables. Variables are not often used by smaller
 23developers. CSS variables allow you to give your website a well-defined
 24structure, where you can easily reuse CSS properties throughout the project.
 25
 26You can use variables to define things, such as color palettes. Then, you can
 27use these colors for backgrounds anywhere else in the HTML. This could be
 28extended, where extra variables could be defined for =primary-text=,
 29=quoted-text=, etc. Variables can also be used to define spacing (e.g. =32px= or
 30=2rem=), which can then be applied to margins, padding, font sizes, and more.
 31
 32For example, here are some variables defined at the root of the website, which
 33allows for any subsequent CSS rules to use those variables:
 34
 35#+begin_src css
 36:root {
 37    --primary-color: black;
 38    --secondary-color: white;
 39}
 40
 41body {
 42    background-color: var(--primary-color);
 43    color: var(--secondary-color);
 44}
 45#+end_src
 46
 47* CSS Box Shadows
 48
 49Box shadows were once my mortal enemy. No matter how hard I tried, I just
 50couldn't get them to work how I wanted. Because of this, my favorite discovery
 51has been CSSMatic's [[https://www.cssmatic.com/box-shadow][box shadow generator]]. It provides an excellent tool to
 52generate box shadows using their simple sliders. Surprisingly, this is the
 53reason I learned how box shadows work! You can use the sliders and watch how the
 54CSS code changes in the image that is displayed. Through this, you should
 55understand that the basic structure for box shadows is:
 56
 57#+begin_src css
 58box-shadow: inset horizontal vertical blur spread color;
 59#+end_src
 60
 61Now, let's look at some basic examples! You can copy and paste the following
 62code into a site like CodePen or your own HTML files. Feel free to play around
 63with the code, experiment, and learn.
 64
 65*Box Shadow #1*
 66
 67#+begin_src html
 68<div class="shadow-examples">
 69    <div class="box effect1">
 70        <h3>Effect 1</h3>
 71    </div>
 72</div>
 73#+end_src
 74
 75#+begin_src css
 76.box h3 {
 77    text-align: center;
 78    position: relative;
 79    top: 80px;
 80}
 81.box {
 82    width: 70%;
 83    height: 200px;
 84    background: #fff;
 85    margin: 40px auto;
 86}
 87.effect1 {
 88    box-shadow: 0 10px 6px -6px #777;
 89}
 90#+end_src
 91
 92*Box Shadow #2*
 93
 94#+begin_src html
 95<div class="shadow-examples">
 96    <div class="box effect2">
 97        <h3>Effect 2</h3>
 98    </div>
 99</div>
100#+end_src
101
102#+begin_src css
103.box h3 {
104    text-align: center;
105    position: relative;
106    top: 80px;
107}
108.box {
109    width: 70%;
110    height: 200px;
111    background: #fff;
112    margin: 40px auto;
113}
114.effect2 {
115    box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.75);
116}
117#+end_src
118
119Try these box shadows out on your own and see how changing each shadow value
120works.
121
122* CSS Flexbox
123
124Now, let's move on to the best part of this article: flexbox. The flexbox is by
125far my favorite new toy. I originally stumbled across this solution after
126looking for more efficient ways of centering content horizontally AND
127vertically. I had used a few hack-ish methods before, but flexbox throws those
128out the window. The best part of it all is that flexbox is /dead simple/.
129
130Flexbox pertains to the parent div of any element. You want the parent to be the
131flexbox in which items are arranged to use the flex methods. It's easier to see
132this in action that explained, so let's see an example.
133
134*Flexbox*
135
136#+begin_src html
137<div class="flex-examples">
138    <div class="sm-box">
139        <h3>1</h3>
140    </div>
141    <div class="sm-box">
142        <h3>2</h3>
143    </div>
144</div>
145#+end_src
146
147#+begin_src css
148.flex-examples {
149    display: flex;
150    flex-wrap: wrap;
151    justify-content: flex-start;
152    align-items: center;
153    padding: 10px;
154    background-color: #f2f2f2;
155}
156.sm-box {
157    display: flex;
158    justify-content: center;
159    align-items: center;
160    width: 20%;
161    height: 100px;
162    background: #fff;
163    margin: 40px 10px;
164}
165#+end_src
166
167You may notice that we no longer need to use the =top= property for the =h3=
168elements in our code. This is because we set the display box to be a flex
169container for the small boxes, AND we made the small boxes flex containers for
170their elements (the h3 tags). Flex boxes can be nested like this to center
171content that is inside centered content.
172
173For the example above, we designated the =justify-content= property to be
174=flex-start= so that the boxes stack from the left side of the screen. This
175property can be changed to =center= to make the boxes appear in the center of
176the screen.
177
178For an interactive example, [[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]] from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
179window with dice to see how they collapse and re-align.
180
181* Even More CSS
182
183For more inspiration, you can visit [[https://www.codepen.io][CodePen]], [[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI Movement]] to browse
184the collections of many amazing web designers.