Monaen's WikiCSS Tips 2017-03-17

Suggest Writing Style

  • Udacity HTML/CSS/Javascript/Git Style Guide: This is a writing style suggested by Udacity

  • We do suggest that first use bootstrap css style to set up your webpage framework and add some customer css style by adding your own css file (traditionally css/style.css) and style !

Concepts:

  1. Negative space: space that doesn’t contain anything, used for solve the space is too small between texts.

  2. Element.style part: In browser devtools, this part only going to affect the tag you choose!

  3. Padding is on the inside of the tag, margins are on the outside of the tag.

Some Tricks

General Tricks

  1. If you want to add many words in a small area, please set
    1
    2
    3
    .*** {
       overflow: auto
    }

and you will find a scorebar on the corresponding area.

  1. Use Media Queries to change CSS properties depending on device, screen size and color as screen got resized. Just add the Media Query like:

    1
    2
    3
    4
    5
    6
    7
    /* An example */

    @media only screen and (max-width: 300px) and (orientation: landscape){
        p {
            background-color: blue;
        }
    }
    1. start off every media query with @media.
    2. key word “only”: is going to help us with older browsers.
    3. key word “screen”: tells this media query applies to any screen(desktop. laptop, phone, tablet …).
    4. max-width: the condition tells us that the media query should apply only if the width of the screen is smaller than 300px.
    5. key word “orientation”: only correct when your screen has a landscape orientation (this happens when the width is bigger than the height).

  2. To make the website looks same regardless browsers or operating systems: add normalize.css file.

For debuggering

  1. You can change the border color to red for debuggering, just add one sentence
    1
    2
    3
    *{
      outline: 1px solid red !important;
    }

For design

Code-Test-Refine routine:

  1. Look for natural boxes
  2. Look for repeated styles and semantic elements
  3. Write your HTML
  4. Apply styles (from BIGGEST to SMALLEST)
  5. Fix things
  6. repeat 3 to 5

Image placeholder

  • If you cannot provide the images you currently use, you can use an image placeholder to replace the image from website PLACEHOLD.IT or PLACEKITTEN or PLACEPUPPY
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* For example */
    <div class="col-6">
        <img src="http://placehold.it/960x360"/>
    </div>
    <div class="col-6">
        <img src="http://placekitten.com/960/360"/>
    </div>
    <div class="col-6">
        <img src="http://placepuppy.it/960/360"/>
    </div>

icons

  • These icons you can show on your web page so that others knows that your page complies with standards.

    css
    css-blue

For cellphone

The button should be at least 48px(suggestions).

Resource

Flex documentation:

▲