This is intro to CSS grid layout part 5. So far we have taken a look at following topics. It is recommended to take a look if you are not familiar with css grid layout basics. basic concepts fractional units grid item positioning grid item positioning based on line names In this post, I will focus on explaining how to use grid area with area names for positioning grid items with an example. Let’s take a look it. Example We have a layout of multiple items. Note that the header is not spanning to the end but the last slot READ MORE
Category: CSS
Intro to CSS Grid Layout Part 4
This is intro to CSS grid layout part 4 continuing from previous posts. This will specifically focus on how to position grid items based on the name of the grid lines. If you are not familiar with CSS grid layout, please refer to these posts here. basic concepts fractional units grid item positioning In the previous post, we went over how to position grid items based on their grid line numbers. However, it is often hard to read and understand the code when it’s using line numbers. To improve the readability and maintainability, we want to use names for the READ MORE
Intro to CSS Grid Layout Part 3
This is a continuation of intro to css grid layout articles. Please refer to previous articles for declaring grid layout and fractional units in row/column. This post will specifically focus on the positioning and spanning of the grid item. Let’s take a look at the example image and code first. Example HTML Code As you see in the above image and the HTML code, each item is placed in the order of declaration which is the default positioning of the CSS grid layout. Then, you might ask a question if it’s possible to place an item to a specific location. READ MORE
Intro to CSS Grid Layout Part 2
This is intro to css grid layout part 2, continuing from the first post which explained basics of CSS grid layout. This post will explain fractional units which control the width of each grid item. Example CSS Grid Layout Example HTML Code This is the html code used for the example images in the post. Example CSS Code This is the common CSS code used for the example images. I will specify more properties separately when necessary. For more explanations about rows, columns and gap properties, please take a look at the first post. Fractional Units We have defined a READ MORE
Intro to CSS Grid Layout Part 1
This post is an intro to CSS grid layout part 1. You can use CSS Grid to easily build a two-dimensional grid-based layout. This is the first part of the article which will specifically focus on the basic properties. CSS Grid Layout Example The above image represents basics of CSS grid layout. It has two rows and three columns. Each brown box is called a grid item. There is a gap between the items which is called a gutter. Grid Container It is the container of the grid. You can declare the container by calling this in the CSS file. READ MORE
CSS – Intro to Flexbox Part 3
This is the continuation of CSS – intro to flexbox part 3. Previous posts explained what flexbox is and conceptual things (part 1) and flexbox container properties and examples (part 2). This post will focus on explaining the properties of flex items and examples for them. Since flex items properties are only applicable to the specified item, I posted the HTML, CSS code again for easier understanding. Please pay special attention to the classes such as i2, i4 that are specific to the item. HMTL Code CSS Code align-self: flex-end This property aligns the item along the cross axis and READ MORE
CSS – Intro to Flexbox Part 2
This is the continuation of the post – css intro to flexbox part 1. Part 1 mostly focused on explaining conceptual things. In this post, I am going to focus on showing examples for each flexbox property. Note that all the other common css code is in part 1. I wrote necessary code only for each property. justify-content As explained in part 1 post, justify-content tells you how the flex items should be aligned along the main axis. justify-content: center justify-content:center aligns the flex items in the middle of the container but doesn’t do anything for the space between the READ MORE
CSS – Intro to Flexbox Part 1
This is CSS – intro to flexbox part 1. This post will explain what flexbox is and go over important properties along with examples. What is flexblox? Flexbox is a new module in CSS 3 which makes it easy to align elements to one another in different directions and orders. The key idea is to give the container ability to expand and shrink elements so it can use all the space efficiently. Flexbox actually replaces float layouts by using less but more readable and logical code. It changes the way that we build one-dimensional layouts. Flexbox properties Now let’s go READ MORE
SASS – mixin for responsive design
In this post, I am going to explain how to use SASS mixin for responsive design which is very powerful way. In CSS, there is a media query you can use to present a different layout for different screen size. However, it would be very tedious to write media query break points in every CSS component you write. What if screen size changes for a phone or tablet? You probably do not want to go through everything to fix it. There needs to be a better way to handle different screen size flexibly and let’s take a look at each READ MORE
CSS – Build Navigation
This post will explain how to build a simple navigation logic for a webpage.Please note that I have learned this from the udemy course by Jonas Schmedtmann.Let’s take a look at the example first. Example Please note a couple of things. The navigation button always stays on the upper right corner (even if you scroll). And there is an animation from the button as soon as you click it. In this post, button animation is not explained. Please refer to the post here for button animation. HTML Code CSS Code – SCSS Please don’t forget to replace SCSS variables into READ MORE