Here's the content. This is a paragraph and below is a list.
- List item 1
- List item 2
- List item 3
https://github.com/pocketsize/naming-conventions
Official HTML and SCSS style guide for all Pocketsize projects.
https://github.com/pocketsize/naming-conventions
Last synced: 4 months ago
JSON representation
Official HTML and SCSS style guide for all Pocketsize projects.
- Host: GitHub
- URL: https://github.com/pocketsize/naming-conventions
- Owner: pocketsize
- Created: 2018-04-20T09:45:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-04T15:27:34.000Z (over 7 years ago)
- Last Synced: 2025-10-25T05:51:34.729Z (8 months ago)
- Homepage:
- Size: 3.91 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pocketsize Naming Conventions
Base rule: `{block}-{element} [is/has]-{modifier}`
The block part of the class should describe the scope.
The element part of the class should describe what the element is.
Only the modifier class can describe what the element looks like.
When you need to add another element in your mark-up for styling purposes that serves no purpose without the element it's wrapping or contained within it should be named as follows:
* `{block}-{element}-outer` for outer elements
* `{block}-{element}-inner` for inner elements
## Examples
Here are a couple of code examples.
### HTML
```html
```
### SCSS
Apart from the Bolts reset, we do not write global styles. For common styles we create shadow classes that we extend on the relevant elements in each block scope.
```scss
%title {
font-weight: 700;
}
%title-primary {
@extend %title;
font-size: 2em;
}
%title-secondary {
@extend %title;
font-size: 1.5em;
}
p,
ul {
%wysiwyg & + & {
margin-top: 1em;
}
}
%wysiwyg {
p,
li {
line-height: 1.6;
}
}
.page {
&-inner {
@include container;
}
&-title {
@extend %title-primary;
}
&-content {
@extend %wysiwyg;
}
&-links-title {
@extend &title-secondary;
}
&-links {
@include inline-layout(20px);
}
&-link-outer {
@media ( width-to(medium) ) {
width: 50%;
}
@media ( width-from(medium) ) {
width: 25%;
}
}
&-link {
display: inline-block;
&:hover {
text-decoration: underline;
}
}
&-social-icons-title {
@extend &title-secondary;
}
&-social-icons {
@include inline-layout(10px);
}
&-social-icon {
display: block;
width: 20px;
height: 20px;
&.is-facebook {
@include background('../images/facebook.png');
}
&.is-instagram {
@include background('../images/instagram.png');
}
}
}
```
#### Indentation
We indent using tabs in the first level. To align "columns" we use spaces. We don't mix tabs and spaces.