TIL Python Basics Day 58 - Web Foundation Bootstrap

Frontend: design side
Backend: server, database

Bootstrap

here
Frontend library or framework by Twitter and opensourced

Responsive: adaptable to viewport. Mobile, Desktop needs to have a different layout

Pre-styled Elements

Pre-specified Classes

Adding Bootstrap on html file.

CDN
Submarine Cable Map under the sea, connecting points in the world. CDN(Content Delivery Network) is a contact point to download html, css etc. Browser caches the files to cut down on the downloading.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Starter template

at bootstrap getting started

<head>
  <meta charset="utf-8">
  <title>TinDog</title>

  <!--  CSS Stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <link rel="stylesheet" href="static/styles.css">

  <!--  Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu&display=swap">


  <!--  Font Awesome -->
  <script src="https://kit.fontawesome.com/567b8330e2.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Scripts: JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

</head>

Wireframing

Work flow of frontend dev

1) Wireframing: low fidelity design of final product. Quick.
Sneakpeekit: template for wireframing
balsamiq: industry standard tool

2) Mock-up: High fidelity representation of website. Screen shots. Taking time.

3) Prototype: animated version.

Awwwards: References for layout, structure

ui-patterns: UI design patterns

dribbble: sorting by colour

Tindog

Goal: using skeleton project to complete the designs with bootstrap

Codeply: HTML, CSS application

Nav bar

nav bar

Margin auto

Toggler(hamburger)

Add JS script for drop down menu

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

Grid layout systems

Being responsive: airbnb example -> col-lg md sm
total number of columns 12
col for colunm
<div class="row">
large-desktop, 6 bars taking 2 each : col-lg-2

medium-tablet, 6 bars taking 4 each : col-md-3

small-phone, 6 bars taking 1 each : col-sm-12 or by default all the columns taking 100% of the width

col-lg-2

col-md-3

col-sm-12 or default

<div class="row">
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:gray; border: 1px solid">
        col
    </div>
</div>

Container Fluid

bootstrap code
automatically responsive

div container-fluid : not jumpy!

Buttons

Font Awsome: for apple, adroid button icon

Similar to Bootstrap, we need to add it to our html.
best to add custom names rather than modifying btn

  <!--  Font Awesome -->
  <script src="https://kit.fontawesome.com/567b8330e2.js" crossorigin="anonymous"></script>

size

fa-4x

    <i class="fas fa-check-circle feature fa-4x"></i>

Rotating image in CSS

Negative to anti-clockwise

.title-image {
    width: 60%;
    transform: rotate(45deg)
}

Visual hirearchy

To attract viewer's attention

feature explanation
download btn (CTA)
logo

Carousel

active one is currently shown
data interval ="5000"
slide
keyboard

Card

Card column: to lay them horizantally

Z-index

dimension

-position: absolute, last html is toward the viewer (stacking order, overlapping)
-default z-index is 0
-it only works when you set position (absolute, relative ~ any)

(css file)
z-index: 1; (front)

Mobile-First: Media Query Breakpoint

Google ranking is affected: mobile-friendly test
Making mobile version: needs to make two.. takes resources

Bottom line is... Make it responsive!

Media Query

-on the very bottom part of css file.

@media<type><feature>
@media screen (min-width:900px) {
//change something
}

only activated when it's on screen, checking if screen size screen (min-width:900px) is True or False.

@media (max-width: 900px) and (min-width: 1000px) {
h1 {
	color:red;
}
}

tablet: 880x264
desktop: 1182x264

screen: size, resolution
speech: if website read for visually impaired people

To avoid confusion, be very exact about:
size of the Device
size of Browser
size of Viewport (size of screen)

href to target section

use ID at href to navigate to the tartget section on screen

<a class="nav-link" href="#footer">Contact</a>

Refactoring

Get rid of repetition: multiple selectors
Modularity for reuse and maintenance: custom class

Multiple selectors

Grouping
Applied to across all website

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat';
}

body {
    font-family: 'Montserrat';
    text-align: center;
}

Custom class

for Modularity
-h1, h2 are too general and broad. Give custom class name to be more specific.

    <h2 class="section-heading">A Plan for Every Dog's Needs</h2>
    

.section-heading {
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 700;
}

Combining selectors

#title .container-fluid { } only for the container-fluid inside title section, {do this}
It's very specific, it will override general one.

Hierarchical Selectors
-> Space and order is very important
-Space btw two
Only workes in parent-child relationship
reading from right to left

HTML
<div class="container">
	<h1 class="title>Hello World</h1>
    
    
 CSS (notice the space)
 .container .title {
 	color: red;
 }

/* Title Section */

@parent @child
#title .container-fluid  {
    padding: 3% 15% 7%;
}

e.g. all the h1s on the webpage, that is the child of an element class= ".container-fluid" should be coloured red

.container-fluid h1 {color: red;}

Not Hierarchical(no parent-child relationship): No space, within the same html element.
reading from left to right
h1#title {color: red;}

HTML
<h1 class="title container>Hello World</h1>
   
 CSS (No space)
 .container.title {
 	color: red;
 }

Overriding hierarchy

Higher priority
Id > Class > html elements h1 h2 etc
Reading code top to bottom
inline style than internal or external

Best practice

Use Id very sparingly(only use it for sections)
First consider class

Avoid inline style

5 hours lecture took nearly 5 days. I am not good at designing. I like the point that I can see the result right away but I feel frustrated that I need to know lots and even think about logic flow only to move the boxes. It will take some time to get used to it. Front side is important too. I will come back to studying routine to achieve my goal this week. Let's go through Flask quickly and have lots of practice time. I will get the hang of it. I will be able to build a portfolio soon.

Author And Source

이 문제에 관하여(TIL Python Basics Day 58 - Web Foundation Bootstrap), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@daylee/TIL-Python-Basics-Day-58-Web-FoundationBootstrap

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)