Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    foundation-styluspublic

    Foundation stylus plugin

    What?

    This is not a complete port of foundation 5 for stylus. For the specific reason that maintaining complete ports is painful, and so they get out of date.

    This is:

    • An easy way to import foundation into a new stylus project.
    • Reformatting of the compiled foundation css so it can be imported into stylus as-is. This allows you to transparently use @extend .small-4 in your css for prototyping quickly, without messing up your html.
    • Exposes some helper mixins to make that easier.

    Installation

    • Use stylizer
    • npm install foundation-stylus
    • Add 'foundation-stylus' to list of stylizer/stylus plugins.
    • Add @import 'foundation' to your main stylus file, e.g. app.styl.

    Usage

    With @extend

    The simplest way to use this is with stylus's @extend function. This allows you to name your rows/columns/buttons/modules/etc semantically, and then extend them in css, just look at the foundation docs to know what classes you need to use.

    E.g. for a three-column layout, you might have:

    <section class='app-main'>
        <nav class='main-navigation'>
            ...
        </nav>
     
        <div class='main-content'>
        </div>
     
        <div class='chat'>
        </div>
    </section>
    @import 'foundation'
     
    .app-main
        @extends .row
     
    .main-navigation
        @extends .small-3
        @extends .large-2
        @extends .columns
     
    .main-content
        @extends .small-7
        @extends .large-9
        @extends .columns
     
    .chat
        @extends .small-2
        @extends .large-1
        @extends .columns

    This keeps your html nice and clean, so that when you move from prototyping a layout -> production css, your UI/designer/team can refactor/rewrite most of the css, without having to remove all the stylus cruft.

    With mixins

    Using foundation-stylus as above means that we can integrate stylus and foundation without having to rewrite stylus into css (since stylus understands normal css). But the @extends syntax can get a bit verbose when adding multiple classes, as above. So we maintain a small list of extra mixins to make that process easier.

    @import 'foundation'
     
    .app-main
        grid-row
     
    .main-navigation
        grid-columns(small3large2)
     
    .main-content
        grid-columns(small7large9)
     
    .chat
        grid-columns(small2large1)

    Mixin documentation

    Grid

    grid-row()

    Equivalent to adding foundation's .row class:

    .myapp
      grid-row

    is equivalent to

    <div class='myapp row'></div>

    grid-columns(small, [medium], [large])

    Helper for creating columns, with positional arguments. medium and large are optional. Aliased as grid-column if you prefer that.

    .mycolumn
      grid-columns(234)

    is equivalent to

    <div class='mycolumn small-2 medium-3 large-4 columns'></div>

    grid-columns(small: n, medium: n, large: n)

    Helper for creating columns, with keyword arguments. You may specify any 1, 2 or all, arguments to create the relevant columns. Aliased as grid-column if you prefer that.

    .mycolumn
      grid-columns(small4large2)

    is equivalent to

    <div class='mycolumn small-2 large-4 columns'></div>

    Contributing

    I would love to support more things via (minimal mixins), pull requests are more than welcome for that.

    Versioning

    Versioning is tricky because I want to be able to track foundations updates (both minor and major), but also modify the actual api of this plugin if necessary, all while sticking closely to semver. My intention is to mark this as 1.0.0 when the public api for the plugin itself is stable, and then release minor/patch versions along with either mixin increments in this plugin, or minor/patch releases of foundation itself. If zurb 6 comes out, I suspect I'll bump everything here up to 2.0.0 and carry on from there.

    Keywords

    none

    install

    npm i foundation-stylus

    Downloadslast 7 days

    4

    version

    0.9.1

    license

    none

    last publish

    collaborators

    • avatar