markdown 文件备注

Posted 2021-05-06

# Build vue to Github Pages

- https://haodong.io/2016/12/24/use-vue-cli-with-github-pages/
- https://medium.com/@mwolfhoffman/deploying-to-github-pages-with-vue-webpack-cli-5b2ba17f14a0

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
- 

```css
/*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_script_css


[Bootsnipp](http://bootsnipp.com/)

Web build with Bootstrap  
- http://presentation.creative-tim.com/ 

# Trick

CSS
- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)

align
- [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css)
- [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div)

# Responsive
- [TableSaw for Data](https://github.com/filamentgroup/tablesaw)

# Ajax
- [How to Use jQuery’s $.ajax() Function](http://www.sitepoint.com/use-jquerys-ajax-function/)
- [An Introduction to jQuery’s Shorthand Ajax Methods](http://www.sitepoint.com/introduction-jquery-shorthand-ajax-methods/)
- [Creating a SCRUD System Using jQuery, JSON and DataTables](http://www.sitepoint.com/creating-a-scrud-system-using-jquery-json-and-datatables/?utm_source=sitepoint&utm_medium=relatedsidebar&utm_term=javascript)

# Tutorial PSD to HTML
- [Photoshop Trick](http://pantip.com/topic/30180269) 

# Flat Design
- [Web Collection Flat Design](http://fltdsgn.com/)

Free Resource
- [PSD Buttons Mockups Icons Misc Mobile UI Kits Websites](http://psdrepo.com/)
- [FREEBIES AND RESOURCES FOR WEB DESIGN](http://www.devstrend.com/latest-freebies-and-resources-for-web-design/)
- [From PSD to HTML: Building a Set of Website Designs Step by Step](http://code.tutsplus.com/tutorials/from-psd-to-html-building-a-set-of-website-designs-step-by-step--net-37) 
- [Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 2)](http://code.tutsplus.com/tutorials/create-a-comic-book-themed-web-design-photoshop-to-html-css-part-2--net-19082)

Photo Free
- [17 Amazing Sites With Breathtaking Free Stock Photos](https://bootstrapbay.com/blog/free-stock-photos/)

- JSONP [...](http://honglub.com/web-applications/json-vs-jsonp/)

Font 
- [BEST FREE FONTS FOR WEB DESIGN ](http://www.devstrend.com/best-free-fonts-for-web-design-17/) >> Font

icons
- [Linearicons CloudFront CDN](https://linearicons.com/free)
- [Flat Icons Bundle](http://www.iconshock.com/flat-icons/)

# CSS Source
- [animate.css](https://github.com/daneden/animate.css) >> A cross-browser library of CSS animations. As easy to use as an easy thing.
- [All Resource CSSscript](http://www.cssscript.com/)

Animation
- [CSS3 ANIMATION TOOLS](http://www.devstrend.com/8-best-css3-animation-tools/)


Navigation
- [vertical-fixed-navigation](https://codyhouse.co/gem/vertical-fixed-navigation-2/)


# UI
- [A library of UI widgets to help you build the best instant-search experience ](https://github.com/algolia/instantsearch.js)

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
- [Motion Blur Effect with SVG slider](http://tympanus.net/Tutorials/MotionBlurEffect/modal.html)
- [Wobbly Slideshow Effect](http://tympanus.net/Development/WobblySlideshowEffect/)

Gallery
- [https://github.com/ettrics/material-photo-gallery](https://github.com/ettrics/material-photo-gallery)
- [Photography Website Concept](http://tympanus.net/codrops/2015/05/06/photography-website-concept/)
- [Google Grid Gallery](http://tympanus.net/codrops/2014/03/21/google-grid-gallery/)
Hover

- [Hover Effects](http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/)

Select
- [Custom Select Elements](http://tympanus.net/Development/SelectInspiration/index.html)

Animate
- [Animated Background Headers](http://tympanus.net/Development/AnimatedHeaderBackgrounds/index.html)

# Bootsnip

Manus 
- [Fancy Sidebar Navigation](http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation)

# Javascript Code
 
Chart , Graph
- [d3 A JavaScript visualization library for HTML and SVG](https://github.com/mbostock/d3) >> The Best Visualization
- [Charting library & maps. Where all data goes visual](https://www.amcharts.com/download/)
- [Deliver up pie charts, bar charts and line graphs for your responsive site](https://github.com/zurb/pizza) >> Chart

Page Scroll
- [One Page Scroll 1.3.1 by Pete R.](https://github.com/peachananr/onepage-scroll) >> jQuery plugin

Report
- [SQUARESQUASH client library for JavaScript front-end projects.](https://github.com/SquareSquash/web)
- [JQuery Spreadsheet](http://www.inspireproduction.co.za/#/demo-ui/jquery-spreadsheet)

Game
- [Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source.](http://piqnt.com/stage.js/)

Validation
- [jQuery Validation Plugin](https://github.com/jzaefferer/jquery-validation) >> jQuery plugin

Notification 
- [Notify.js - A simple, versatile notification library](https://github.com/notifyjs/notifyjs) plugin 

Text Change
- [jQuery Flight Board](http://keith-wood.name/flightboard.html)

# Plugin

- [16 JQUERY PLUGINS ](http://www.devstrend.com/16-jquery-plugins-january-2016/)