artdvp
9/10/2017 - 7:19 AM

Document Remark

vue.md
content_copyfile_download
  • Rendered
  • Source

Build vue to Github Pages

css_treehourse.md
content_copyfile_download
  • Rendered
  • Source

Object Oreinted CSS

  • The object is repeating visual pattern
  • Visual patterns are abstracted into independent CSS "modules"

Object Oreinted CSS - 2 Main Concept

  • Separation of Structure from Appearance -- Abstract repeating visual patterns into separate "skins" that are reuseable -- Name the "skin" classes logically
  • Separation of Containers and Content --- Avoid location-dependent styles --- The CSS shouldn't be specifically tied to the HTML or a location in the document --- Modules should be able to adapt to different connainers and be esily themed --- All elements with the given classes will look the same no matter what

What are the Benefits?

  • Smaller style sheets that are easier to maintain and scale
  • CSS is predictable
  • Creating new page will require very little to no CSS coding
/*Grouping of CSS*/

.button,.field,.column {
    padding: 5px;
    border-radius: 12px;
}
.button,.field{
    display : inline-block;
}
.column {
    float :left;
}

/* Object Oreinted CSS
- The object is repeating visual pattern
- Visual patterns are abstracted into independent CSS "modules"
*/
resource.md
content_copyfile_download
  • Rendered
  • Source

Resource_script_css

Bootsnipp

Web build with Bootstrap

Trick

CSS

align

Responsive

Ajax

Tutorial PSD to HTML

Flat Design

Free Resource

Photo Free

Font

icons

CSS Source

Animation

Navigation

UI

  1. Material Design Lite (ของ google) http://www.getmdl.io/

  2. Material UI http://www.material-ui.com/#/home

  3. Bootswatch Paper http://bootswatch.com/paper/#

  4. MUI https://www.muicss.com/

  5. Leaf http://getleaf.com/

  6. Materialize http://materializecss.com/

  7. Polymer https://www.polymer-project.org/

  8. Angular Material https://material.angularjs.org/latest/

  9. LumX http://ui.lumapps.com/

CodeDrop

Slider

Gallery

Select

Animate

Bootsnip

Manus

Javascript Code

Chart , Graph

Page Scroll

Report

Game

Validation

Notification

Text Change

Plugin