Main
Lorem ipsum dolor sit amet
## 2010.11
HTML5 + CSS3 + Smartphone
- Border Radius
- CSS Gradients
- CSS Transitions / Animations
- Multiple Backgrounds
- ...and more.
## [frontendweekly.tokyo](http://frontendweekly.tokyo)
- CSS Architecture
- CSS Frameworks
- Layout
- SVG
- New Features
## CSS Architecture
- OOCSS
- SMACSS
- BEM
.shopping-card { /* TWO Words! */
> .title { /* ... */ }
> .title.-small { /* ... */ }
}
CSS
JS
### Example: React Style ```js var HelloWorld = React.createClass({ render() { var styles = ReactStyle` color: red; background-color: white; `; return/* components/submit-button.js */
import styles from './submit-button.css';
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
.global-nav {
display: flex;
justify-content: space-between;
width: 768px;
}
.global-nav > li {
width: 174px;
}
.profile-card {
display:flex;
}
.profile-card .image {
flex: 0 0 auto;
border-radius: 50%;
margin-right: 10px;
width: 80px;
height: 80px;
}
.profile-card .body {
flex: 1 0 auto;
align-self: center;
}
Header
Main
Lorem ipsum dolor sit amet
.container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.content { grid-area: content; }
```
```
```
```
```
```
```
```
※ [svg4everybody helps SVG External Content support to all browsers.](https://github.com/jonathantneal/svg4everybody)
### pencil-ex.svg
```
```
## SVG Sprites
### sprites.svg
2010
2016