- Web Developer's Reference Guide
- Table of Contents
- Web Developer's Reference Guide
- Credits
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. HTML Elements
- DOCTYPE
- html
- Document metadata
- Semantic content sections
- Content sections
- Inline elements
- Embedded content
- Tables
- Forms
- Drawing elements
- 2. HTML Attributes
- Global attributes
- Miscellaneous
- accept
- accept-charset
- action
- alt
- async
- autocomplete
- autofocus
- autoplay
- autosave
- cite
- cols
- colspan
- datetime
- disabled
- download
- content
- controls
- for
- form
- formaction
- height
- href
- hreflang
- label
- list
- loop
- max
- maxlength
- media
- method
- min
- multiple
- name
- novalidate
- pattern
- placeholder
- poster
- readonly
- rel
- required
- reversed
- rows
- rowspan
- scope
- selected
- size
- src
- start
- step
- type
- value
- width
- wrap
- 3. CSS Concepts and Applications
- Basic selectors
- Combinators
- Pseudo-classes
- Validation
- Pseudo-elements
- Generated content
- 4. CSS Properties – Part 1
- Animation
- Background
- Box model
- Border radius
- Unit
- Flexible box (flexbox)
- Summary
- 5. CSS Properties – Part 2
- Fonts
- Transform
- Positioning
- Text
- Tables
- Words and paragraphs
- Paging
- 6. CSS Properties – Part 3
- Page box
- List
- Counter
- Drop shadows
- Display and visibility
- Masking and clipping
- Image rendering and orientation
- User interface
- 3-Dimensional
- Summary
- 7. CSS Functions
- Filter
- brightness()
- contrast()
- grayscale()
- invert()
- hue-rotate()
- blur()
- saturate()
- sepia()
- Transforms
- matrix()
- matrix3d()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- steps()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- Colors
- Gradients
- Values
- Miscellaneous
- At-rules
- Global CSS keyword values
- Summary
- Filter
- 8. JavaScript Implementations, Syntax Basics, and Variable Types
- History of JavaScript
- JavaScript implementations
- The language syntax
- The character set
- Data type
- Variable, scope, and memory
- 9. JavaScript Expressions, Operators, Statements, and Arrays
- Expressions
- Operators
- Overview
- Arithmetic operators
- Logical operators
- Assignment operators
- Exponentiation assignment (**=)
- Relational operators
- Statements
- Arrays
- Array types
- Array type object
- Creating arrays
- Reading and writing array elements
- Multidimensional arrays in JavaScript
- Properties in an array
- Array methods
- ECMA5 Array methods
- array.prototype.map()
- array.prototype.filter()
- array.prototype.reduce()
- array.prototype.forEach()
- array.prototype.indexOf()
- array.prototype.lastIndexOf()
- array.prototype.every()
- array.prototype.some()
- array.prototype.reduceRight()
- Returns
- Parameters
- Description
- 10. JavaScript Object-Oriented Programming
- Polymorphism
- Objects
- Creating objects
- Design patterns
- Property getter and setter
- Deleting properties
- Testing properties
- Enumerating properties
- Property attributes
- Serializing objects
- Objects methods
- Functions and methods
- Classes and modules
- Inheritance
- Built-in objects
- Global objects
- Date object
- Math object
- The RegExp object
- String object
- Array objects
- .Pop()
- .Push()
- .ToString()
- .ValueOf()
- .Join()
- .Splice()
- .sort()
- .reverse()
- .slice()
- .concat()
- Parameters
- Returns
- Description
- 11. Extending JavaScript and ECMAScript 6
- Compatibility and goals
- JavaScript subset and extensions
- Scoped variables and constants
- Shorthand functions
- Multiple catch clauses
- E4X – ECMAScript for XML
- ECMAScript 6 features
- Arrow functions
- Classes
- Enhanced object literals
- Template strings
- Destructuring assignment
- Extended parameter handling
- Bindings
- Iterators and the for...of operator
- Generators
- Better Unicode support
- Modules
- Module loaders
- Collections
- Proxies
- Symbols
- Subclassable built-ins
- Promises
- Core math library APIs
- Binary and octal literals
- Reflect API
- Reflect.get(target, prop, [receiver])
- Reflect.set(target, prop, value, [receiver])
- Reflect.has(target, prop)
- Reflect.apply(target, receiver, args)
- Reflect.construct(target, args)
- Reflect.getOwnPropertyDescriptor(target, prop)
- Reflect.defineProperty(target, prop, desc)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, newProto)
- Reflect.deleteProperty(target, prop)
- Reflect.enumerate(target)
- Reflect.preventExtensions(target)
- Reflect.isExtensible(target)
- Reflect.ownKeys(target)
- Tail calls
- 12. Server-side JavaScript – NodeJS
- File and process management
- Utilities
- Events
- Crypto
- Buffer
- Console
- npm (Node Package Manager)
- Stream
Layouts help you to define a standard structure or the skeleton for your websites. There are three types of layouts:
- Fixed layouts
- Fluid layouts
- Responsive layouts
Fixed layouts do not change with screen size and all styles are static. Fluid layouts make the div elements flow to the bottom if they cannot be accommodated across the width of the viewing screen. Responsive layouts keep a very close eye on and respond to the adjusting screen sizes. These options can be used as described in the following sections.
A fixed layout of a website has a wrapper (which wraps or contains all columns) of a constant width, that is, which cannot be changed no matter how small or how big the screen resolution is. The wrapper or the container cannot be moved and is set to a fixed position. The reason why many web designers prefer fixed layouts is due to ease in usage and customization.
In fixed layout, column widths are fixed and cannot be changed. The syntax for declaring fixed layouts for your website is as follows:
<body> <div class="container"> <!--This line is for declaring fixed layouts--> </div> </body>
Everything inside the
container class in the preceding code will be fixed for every device in which this code is executed.
A fluid layout acts just like a liquid and adjusts itself according to the screen resolution of the user at runtime. The components of such layouts mainly contain percentage widths and thus adjust to the user's screen effectively. Such layouts are more user friendly and make the website look better. It also improves accessibility and interface.
Fluid layouts adjust themselves according to the screen resolution they receive using predefined percentage widths. The syntax for declaring fluid layouts for your website is shown here:
<div class="container-fluid"> <!--declaration of a fluid container-->
<div class="row-fluid">
<div class="span3"> <!--spans 3 columns -->
<!--Sidebar content-->
</div>
<div class="span5"> <!--spans 5 columns -->
<!--Body content-->
</div>
</div>
</div>Bootstrap's grid system allows up to 12 columns across the page.
In the preceding example, span3 combines three columns and span5 combines five columns, and together they complete the whole page adjusting the layout according to the screen resolution.
Responsive layouts provide a design for a website depending on the number of conditions, which include ratios, widths, display types, and so on. Such layouts automatically adjust and adapt to any screen size, thus providing better accessibility and optimal viewing experience to the user.
Responsive layouts are a growing trend among web designers as they offer less hassles in customization and implementation.
The following example code shows how you can include responsive features using meta tags along with a Bootstrap stylesheet:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
To provide effective layouts on a number of different devices, Bootstrap can support many media queries in one file. The following table shows the range of devices that are supported:
|
Label |
Layout width |
Column width |
Gutter width |
|---|---|---|---|
|
Large display |
1200px and up |
70px |
30px |
|
Default |
980px and up |
60px |
20px |
|
Portrait tablets |
768px and up |
42px |
20px |
|
Phones to tablets |
767px and lower |
Fluid columns, no fixed width available | |
|
Phones |
480px and lower |
Fluid columns, no fixed width available | |
Referenced from: http://getbootstrap.com/css/#grid-options
-
No Comment