An interface between the user and the backend (data access layer).
A fast paced survival game.
Bunch of high complexity technologies, methodologies and other tooling.
Use the HTML semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
#titanic {
float: none;
}
.ninja {
visibility: hidden;
color: black;
}
a.fancy {
color: red;
text-decoration: none;
}
[selector] {
[property]: [value];
}
.class, #id, *, element, element > element, element + element, element ~ element, [attribute], :active, ::after, :focus, :last-child...
BEM
Use styleguides / methodologies:
Key elements of the methodology:
HTML implementation:
<header class="header">
<!--
`header__button` — element of the `header` block;
`button` — block;
`button_theme_islands` — modifier.
-->
<button class="header__button button button_theme_islands">...</button>
</header>
Nowadays, they are the key ingredients and must have tools for CSS development.
Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
$ sass input.scss output.css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
styles/
|
|-- admin/ # Admin sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- account/ # Account sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- site/ # Site sub-project
| |-- modules/
| |-- partials/
| `-- _base.scss
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker-1.1.scss
| |-- _jquery.ui.core-1.9.1.scss
| ...
|
|-- admin.scss # Primary stylesheets for each project
|-- account.scss
`-- site.scss
One more thing: don't use Ruby Sass and/or Compass extension, use NPM's node-sass package instead!
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Problem: Browsers on mobile devices scales down the entire web page to fit the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Styleguides:
A pluggable linting utility for JavaScript.
Airbnb JavaScript Styleguide provides Airbnb's .eslintrc as an extensible shared config.