search

geddski / csstyle

MOVED TO https://github.com/csstyle/csstyle a modern approach for crafting beautifully maintainable stylesheets
http://csstyle.io
Other
850 stars 34 forks source link

Responsive component #41

Closed GesJeremie closed 9 years ago

GesJeremie commented 9 years ago

Hey guys, it's me again ...

I'm finishing a big project and i used bootstrap for the grid system and csstyle for all components. I'm trying to find the best way to do the responsive design.

We can take that example : 

@include component(upload)

  background-color: #f5f5f5
  min-height: 15em
  border-radius: 6px
  border: 1px solid #f5f5f5
  padding: 2em

  @include part(entry)
    display: inline-block
    float: left

  @include part(cover)
    text-align: center

Imagine i need to change the part "entry", i can imagine that way : 

@include component(upload)

  background-color: #f5f5f5
  min-height: 15em
  border-radius: 6px
  border: 1px solid #f5f5f5
  padding: 2em

  @include part(entry)
    display: inline-block
    float: left
    @media(max-width: 400px)
      display: block

    @media(max-width: 700px)
      // Other things

  @include part(cover)
    text-align: center

But i think it will become the mess for the 20 components i have in the project.

simonj commented 9 years ago

We use it like that, just with our own helper like this

 @include option(search) {
    label {

      @include respond-to(small) {
        margin-bottom: 24px;
      }
    }