Yupik

A collection of modules inspired by Inuit.css

Read the French version

What Yupik:

At first, what Inuit.css:

It's a lightweight framework purely CSS (no JavaScript) based on SASS (SCSS syntax), object-oriented, scalable and modular, for front-end developers. It uses the BEM naming convention, separates the models independently, compatibility IE8 + and have a lot of good practice.

This latest version of Inuit simply lists [modules](https://github.com / inuitcss) import requirement in your CSS. To test, try Starter Kit (the V5 is no longer maintained, but works very well) .

Yupik works the same way.

List of modules:

• TOOLS :
• Function: "response" function and other functions only useful to mixin
• MIXINS :
• Vendor: mixin that generate "vendor prefixes" (disabled by default)
• Position: mixins that simplified the use of "position" property
• Font: mixins that simplified fonts declarations
• Shape: mixins to create shape
• Gradient: mixin which applied a linear cross-browsers solution (IE7+) with Compass
• Placeholder: styling placeholder of inputs
• Transition: useful placeholders for CSS3 transition
• OBJECTS :
• Vertical center: center vertically almost everything
• UI ELEMENTS :
• Checkbox: styling checkbox without JavaScript and without losing user experience DEMO
• Radio: styling input radio without JavaScript and without lose user experience DEMO
• Dropdown: styling <select> element easily without lose user experience DEMO
• Breadcrumb: styling arrow-shaped breadcrumb DEMO
• Order-list : styling ordered list with custom number in a circle

How to use the modules:

Simply import them in your SCSS file, preceded with the configuration variable (if needed) (eg with the Inuit objects.media):

$inuit-enable-media--flush: true;
@import "bower_components/inuit-media/objects.media";

Yupik works the same way:

$yupik-checkbox-radius: 3px;
@import "bower_components/yupik-checkbox/ui.checkbox";

The modules must not be modified and should not be versioned ... configurations are sufficient and you will not have to overload style.

It's also possible use a "namespace" to prefix classes : either the Inuit global namespace or an own namespace to each module.

Requirements:

• SASS (version 3.3 is not required), optionally Node.js and Bower
• Yupik is inspired by Yupik Inuit.css but do not depend (except clearfix and box-sizing modules)

Dependency management:

Yupik (as Inuit.css) uses Bower. If you don't already know, read the Getting Started, new to Bower ?

$ bower init
$ bower install --save yupik-[module]

If you do not want to depend on external repository, it is best to install them anyway with Bower to ensure they have the correct versions and then copy them to your project.

Note about "vendor prefixes":

Yupik recommends using Autoprefixer, that is why the generation of prefixes is disabled by default. If you do not use Autoprefixer, the mixin "vendor" was planned, simply activate:

$yupik-vendor: true;
@import "bower_components/yupik-mixin-vendor/mixins.vendor";

Important notes about mixins:

• As in CSS, mixins parameters must be separated by spaces (not commas)
• A numerical value will default generated pixel, to use another unit, it must specify:

.element {
    @include absolute(10 50%);
}

/* Style generated */
.element {
    position: absolute;
    left: 10px;
    top: 50%;
}