Skip to content

Instantly share code, notes, and snippets.

@kkas

kkas/CSS Frameworks.md

Last active February 16, 2016 04:14
Show Gist options
  • Save kkas/2585bcb016015343d089 to your computer and use it in GitHub Desktop.
Save kkas/2585bcb016015343d089 to your computer and use it in GitHub Desktop.
Download ZIP
HTML and CSS
Raw
HTML_and_CSS.md

Intro to HTML and CSS

The First Step

  • As an front-end web developer
    • converts images and pdf files from web-designers to the actual HTML, CSS, and Javascript files

Exploring the Web

  • Google Chrome has a tools to work on webpages, called "Developper Tools".
  • What you see in "Elements" tab are the structures of HTML.
    • not the actulal HTML sources. Rather, it is what the browser interprets.

Basics of HTML and CSS

  • All elements are rectungular

  • Tree-like structure

  • HTML & CSS & DOM

    • HTML
      • Language - syntax + rules
      • Tag -> elements in DOM
        • has a name or type that defines what kind of element will be created
      • Each tag has attributes with values
    • DOM -> what you see in devtools
      • Content - Anything between starting and ending tags
        • can be: empty, text, or another element
      • each tag has a name or type to define what kind of a element will be created, paragraph, block, images, etc.

  • CSS

    • used for defining style
    • Everything on the web is a box
      • border-radius for Circle

Boxify a Design

  • A pesil is a great tool for starting off
  • Sublime Text is the recommended code editor
  • "div" tags create boxes
  • To apply style
    • give class name as label, make it informative

HTML5

CSS

  • Order Matters

    • the default style of a browser (different browser have slightly different styles)
    • stylesheet in a separate file (this is what you will be mostly using)
    • stylesheet inside HTML (this can be done for small projects but is not ideal)
    • inline style in an element (this can also be done but shuould be avoided)

  • Cascading

    • means that rules are applied not only to the elements they directly match, but also to all of those elements' child elements.
    • If a child element has multiple, overlapping rules defined for it, the more specific rule takes effect.

  • Article on CSS Selector

  • Browsers have different default rules. To be consistent use the following.

Box model

  • margin, border, padding
  • border has a color property.
  • margin has no color, completely transparent.
  • By default, the actual length of the box is equal to the sum of the border, padding, and content of the page. Adding the following clears the default settings and makes it change to keep the width no matter what the values are specified for the boarder and the padding. It does not include margin, though.
* {
  box-sizing: border-box;
}

browser specific prefixes

  • in order to work any browsers. The prefixes are:
    • -webkit, -moz, or -ms
example:
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

Flex-box layout

  • provides an efficient way to layout, align and distribute spaces among items and container or div.
  • If we want several elements next to each other, we can change the display attribute of the parent container to a value, "flex".
  • For it to work, we also have to give the size of the items to less than 100%.
element.style {
  display: flex;
}

CSS Frameworks and Responsive layout

Design principles

Grid-based layout

  • Natural pattern
  • Title at the top, peple see it first
  • From top-left, left to right, and bottom

Responsiveness

  • People use many different devices, which have different size screens.

  • Not talking about physical, we talking about the resolution (in pixels.)

  • Device width

    • Today, 1920px/1440px or even wider size
    • Using max-width 960px is common
    • Not too long ago, people were using screens that were only 1200px / 1024 px.
    • For these screens, it was common to put some extra space on the right for the scroll bar by setting 960px for max-width
    • for larger screen, we just center it and leave the spaces on the both sides

  • Adaptive Design

    • For devices like tablets and smartphones, users use thumbs, not mouses. Changing the layouts to make it easier to use, this is called Adaptive Design.
    • Responsive Design is only chaning the sizes.

Implementing Responsive design

  • Use percentages, instead of fixed size, to decide how wide the element is
  • Recently the number of the grids in grid layout is 12 because it can be devided by all of 2, 3, or 4. (easy to customize)
  • Own Responsive Framework
    • Make 1/12 to 12/12 col styles and a row style for 100% width
{
  .row {width: 100%;}
  .col-1 { 8.33%; }
  .col-2 { 16.66%; }
  ・・・
  .col-12 { 100%; }
}

Negative Spaces

  • spaces that do not contain anthying. empty spaces.

  • Used to make the contents easier to read and understand what the page is trying to tell us.

    • Padding
      • doesn't affect the size. put spaces inside the box.
    • Margin
      • Create spaces outside the box.

  • Good to use "overflow: auto;" when you have a lot of text that does not fit in a space. It puts a scrollbar in the area.

Media Queries

  • Change CSS properties depending on device, screen size and color

CSS Resetting

Useful Links

HTML

CSS

Turning the page

<img src="http://placehold.it/960x350">

<img src="http://placepuppy.it/960/350">

<img src="http://placekitten.com/960/350">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment