Giter Site home page Giter Site logo

in-context's Introduction

In context

in-context is a SASS utility. Currently it's a fork of the Foundation for Sites breakpoint. The +breakpoint(x) mixin has been aliased to +in-context(x).

Usage

Install npm package:

yarn add in-context / npm install --save in-context

Use in .sass files:

@import "~in-context"

.album
  img
    +in-context(small only)
      width: 100%
    +in-context(medium)
      width: calc(100% / 3)

Customize breakpoints:

$breakpoints: (small: 0, medium: 640px, large: 1024px)

@import "~in-context"

Fork idea

The idea is to take the best responsive design utility from ZURB Foundation for Sites, and make it stand-alone & more flexible. Instead of reflecting on screen space, the mixin can reflect on dynamic contexts defined by parent nodes. Here is an API draft:

Projects.jsx:

import './Projects.sass'

export default ({ images }) => (
  <div className='Projects'>
    <div className='Project Project-1'>
      {images.map((src, index) => (
        <Thumbnail
          key={`thumbnail-${index}`}
          src={`/images/{src}`}
          alt={`Image ${index + 1}/${images.length}`}
        />
      ))}
    </div>
  </div>
)

Thumbnail.jsx:

import './Thumbnail.sass'

export default ({ src, alt }) => (
  <div className='Thumbnail'>
    <img src={ src } />
    <p className='alt-text'>{ alt }</p>
  </div>
)

index.sass:

@import '~in-context'

body

  @media (screen and max-width: 34rem)
    +set-child-context(small)

  @media (screen and (min-width: 34rem and max-width: 54rem))
    +set-child-context(medium)

  @media (screen and min-width: 54rem)
    +set-child-context(large)

Projects.sass:

@import '~in-context'

.Projects
  
  +in-context(medium down)
          
    .Project
      width: 100%
  
    .Thumbnail.alt-text
      +set-context(small)

  +in-context(large up)
  
    +set-child-context(medium)
  
    .Project
      width: 33.33%

Thubmnail.sass:

@import '~in-context'

.Thumbnail
  
  .alt-text
    
    +in-context(small)
      font-size: small
    
    +in-context(medium up)
      font-size: normal

--

Licensed under MIT License

in-context's People

Contributors

some1else avatar longchiwen 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.