All Projects → LukyVj → Family.scss

LukyVj / Family.scss

Licence: mit
Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.

Programming Languages

SCSS
7915 projects
Haml
164 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Family.scss

Hexo Theme Laughing
A lightweight hexo theme
Stars: ✭ 185 (-92.01%)
Mutual labels:  sass
Design System
Open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.
Stars: ✭ 192 (-91.7%)
Mutual labels:  sass
Bslib
Tools for theming shiny and rmarkdown from R via Bootstrap (3 or 4) Sass.
Stars: ✭ 197 (-91.49%)
Mutual labels:  sass
Smartstorenet
Open Source ASP.NET MVC Enterprise eCommerce Shopping Cart Solution
Stars: ✭ 2,363 (+2.12%)
Mutual labels:  sass
Dart Sass
The reference implementation of Sass, written in Dart.
Stars: ✭ 2,760 (+19.27%)
Mutual labels:  sass
Vx Ui
vue components 移动端UI组件库
Stars: ✭ 194 (-91.62%)
Mutual labels:  sass
Awesome Itcss
🤗 🎉 A curated list of awesome ITCSS articles, videos, and code examples
Stars: ✭ 184 (-92.05%)
Mutual labels:  sass
Barekit
A bare minimum responsive framework
Stars: ✭ 201 (-91.31%)
Mutual labels:  sass
Typed Scss Modules
🎁 Generate type definitions (.d.ts) for CSS Modules using SCSS
Stars: ✭ 192 (-91.7%)
Mutual labels:  sass
Uniform
A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!
Stars: ✭ 2,219 (-4.11%)
Mutual labels:  sass
Iota
A responsive micro-framework for the grid spec powered by CSS custom properties.
Stars: ✭ 189 (-91.83%)
Mutual labels:  sass
Nuxt Sass Resources Loader
SASS resources (e.g. variables, mixins etc.) module for NuxtJs
Stars: ✭ 191 (-91.75%)
Mutual labels:  sass
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+4.54%)
Mutual labels:  sass
Graaf
A collection of pure CSS grids for designing your new projects
Stars: ✭ 186 (-91.96%)
Mutual labels:  sass
Yarsk
Don't use this, use Create React App
Stars: ✭ 199 (-91.4%)
Mutual labels:  sass
Type
🎉 Minimal and Clean Free Jekyll Theme
Stars: ✭ 185 (-92.01%)
Mutual labels:  sass
Docker Django Webpack Skeleton
Django Skeleton W/ Docker Dev & Production W/ Webpack 2 W/ BabelJS W/ Sass W/ PostgreSQL
Stars: ✭ 191 (-91.75%)
Mutual labels:  sass
Jekyll Doc Theme
Jekyll theme for creating project documentation websites
Stars: ✭ 203 (-91.23%)
Mutual labels:  sass
Vue Node Pastime
😄 基于vue全家桶、nodejs和mongodb的前后端整合项目
Stars: ✭ 200 (-91.36%)
Mutual labels:  sass
Twelvety
An Eleventy starter project built to be fast
Stars: ✭ 195 (-91.57%)
Mutual labels:  sass

Family.scss

npm version Bower version Build Status

Gitter

Version v1.0.8

Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way.

Website : http://lukyvj.github.io/family.scss/

Installation

Regular

Alternative install

  • $ npm install family.scss
  • $ bower install family.scss
  • gem install family-rails (maintained by pzi)

Family.scss on npm

Usage

First of all, you need to import Family.scss into your project. If you're using eyeglass you can import it as such:

@import "family";

Otherwise import the Family.scss source file.

Then you can use the mixins right away on your stylesheets.

Input :

ul li {
  background: blue;

  @include first(3) {
    background: blue;
  }
}

Output :

ul li {
  background: blue;
}
ul li:nth-child(-n + 3) {
  background: blue;
}

Why only Sass ?

It's true, I did it for Sass, but some awesome contributors extended it to :

Stargazers over time

Stargazers over time

Changelogs

v1.0.8

  • Repository consistency | No changes on the lib.

v1.0.7

  • Repository consistency - No big changes on the lib.
  • The source family.scss file is now on source/src/_family.scss instead of source/src/family.scss

v1.0.6

  • each-after() mixin removed, re-opening #37

v1.0.5

  • first-child() mixin added.
  • last-child() mixin added.
  • each-after() mixin added, closing #37
  • Mention Holmes.js in the about modal.

v1.0.3

  • first() mixin now uses :first-child if the given parameter is 1, closing #10
  • n-between() mixin added, closing #35
  • at-least(), at-most() and in-between() quantity queries mixins added, closing #24
  • pair-between() is now even -between(), closing #34
  • impair-between() is now odd-between(), closing #34
  • Source code for the header pattern generator added in the about modal
  • Version number added in the footer
  • backdrop-filter removed from the about page
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].