Giter VIP home page Giter VIP logo

test's Introduction

Proposed BEM structure

.btn
    &--filled
    &--theme
    &--filter

.site

.header-main
    &__content
    &__branding
        &__logo
        &__logo-text
    &__menu | navbar

.navbar
    &__container
        &__item | &--search | &--title
            &__link | &--current | &--inverted
main

hero
    &__content
        &__text

.feed
    &__filter
        &__filter-label
        &__filter-select
    &__title
    &__item
        &__item-category
        &__item-date
        &__item-title
        &__preamble
        &__item-image
    &__footer
        &__read-more | .btn

.blurb
    &__content | &--left | &--right
        &__tag
        &__title
        &__preamble
        &__description
        &__btn | .btn
        &__image

article.infobox
    &__item | &--{modifier}
    &__title
    &__description
    &__btn | .btn

footer.footer
    .navbar
        .navbar__item
            .navbar__link
    &__signature
        &__text
    .social
        &__link

.header-page-menu
    &__summary
        &__image
        &__title
        &__description
    &__menu | .navbar--vertical | .navbar--2-column
        .navbar__item
            .navbar__link

.header-page
    &__tag
    &__title

.page-content
    .wysiwyg
        p
        a
        ul
            li

.menu-collection
    &__item
        &__link

.page-content-contact || .page-content
    &__info | .wysiwyg
    &__image

.page-content-resource || .page-content
    &__info | .wysiwyg
    &__item
        &__title
        &__image
        &__description

.login
    &__item
        &__input
        &__checkbox
        &__btn | .btn

.contact-form
    &__label
    &__input
    &__select
    &__submit | .btn .btn--filled


.page-content
    .btn | .btn--filled | .btn--filter | .btn--current
    article.post
        &__date
        &__title
        &__content | .wysiwyg
        &__footer
            &__posted
            &__tags

.pagination
    &__next
    &__previous
    &__current
    &__page-number

Media Queries

/* Media querys used, only for quick copy paste stub */
@media @media--s {

}

@media @media--m {

}

@media @media--l {

}

@media @media--xl {

}

test's People

Contributors

gustaveen avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.