It's the Bootstrap, but better!
bootstrap-bl — half-assed attempt to implement original bootstrap using BEM methodology and stuff.
tech — Done
tech — In progress
tech — Open
([
{
block: 'btn',
mods: { type: 'success', size: 'large' },
content: 'Button'
},
{
block: 'btn',
mods: { type: 'primary' },
content: 'Button'
},
{
block: 'btn',
mods: { type: 'warning', size: 'small' },
content: 'Button'
}
])
css
bemhtml
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the bird |
({
block: 'table',
mods: { bordered: 'yes', striped: 'yes' }
})
css
bemhtml
({
block: 'breadcrumb',
content: [
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Home'
}
},
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Library'
}
},
{
elem: 'item',
elemMods: { active: 'yes' },
content: 'Data'
},
]
})
css
bemhtml
({
block: 'pagination',
content: [
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Prev'
}
},
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: '1'
}
},
...
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Next'
}
}
]
})
css
bemhtml
({
block: 'pager',
content: [
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Previous'
}
},
{
elem: 'item',
content: {
elem: 'link',
url: '#',
content: 'Next'
}
}
]
})
css
bemhtml
({
block: 'alert',
closable: true,
content: '<strong>Warning!</strong> Best check yo self, you\'re not looking too good.'
})
css
bemhtml
([
{
block: 'progress',
mods: { striped: 'yes', active: 'yes' },
content: {
elem: 'bar',
width: 80
}
},
{
block: 'progress',
content: [
{ elem: 'bar', elemMods: { type: 'success' }, width: 35 },
{ elem: 'bar', elemMods: { type: 'warning' }, width: 20 },
{ elem: 'bar', elemMods: { type: 'danger' }, width: 10 },
]
}
])
css
bemhtml