Justin True | Lunch & Learn

Working with CSS

By // Ann Escamilla

Here at Circa, we’re always curious to see how we can improve our practices as a Studio — and sometimes, that comes in unexpected ways. Last month we were introduced to Justin True a friend of our fellow Lauren Maksymiuk. Justin is a third-year student at Western Michigan University studying in computer science. We were impressed by his knowledge and decided to ask him to teach a lunch and learn at our Kalamazoo studio. He happily agreed! We waited eagerly to become master coders while Justin was setting up for his presentation. Minutes went by, and he exclaimed that he was ready to start. He would go over three coding tools — Flexbox, Media Query, and Bootstrap.

Flexbox

Flexbox is a new layout mode in CSS designed as a one-dimensional layout model that aims at providing a more efficient way to layout, align, and distribute space among items in a container. When you are working with flex you need to think concerning axis; it is direction-agnostic as opposed to regular layouts.

Some important terms include:
Flex Container – Parent Element
Flex Items – Children Element
Flex-end | Flex-Start – The flex items are placed within the container starting from main-start and going to main-end
Center – Items centered along the line
Space-between – Items evenly distributed in line, first item to the last item
Space-around – Items evenly distributed in line with equal space.
Space-evenly – Items distributed so that the spacing between any two items are equal.

 

There are a lot of things you can do with flexbox such as justify text, align items, space evenly and create columns.

Media Query

Media Query is essential in many ways. It can be used to check things, such as the width and height of the viewport, of the device and orientation. It is, however, most popular for testing responsive web design to desktops, laptops, tablets, and mobile phones. You can also use media queries to specify what styles are for printed documents or the screen. In addition to media types, there are also features. Media features provide more specific details to media queries, by allowing to test a particular function of the agent or device. You can apply styles to only those screens that are greater or smaller, than a certain width.

Bootstrap

Lastly, we are going to talk about Bootstrap. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. It has designed templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript extensions. The great thing about Bootstrap is that it is responsive and has many templates.

 

Thank you to Justin for informing us of the cool things you can do with CSS!

 

Here are a few resources that Justin shared with us!

 

+ Flexbox 

Media Query 

+ Bootstrap 

About Lunch & Learn

At Circa, we have a bold understanding that education never just stops after college. This has been the motivation for our new series: Lunch & Learn. Every month we will have lunch with some of the brightest people in the creative field ranging from painters to SEO masters; and poke their brains to get a better understanding of the world and our role as visual communicators.

About Justin True

Justin is a third-year student at Western Michigan University studying in computer science. He loves working with code and was thrilled to teach us all a little about CSS.