{"id":16547530,"url":"https://github.com/waiting-for-dev/zass","last_synced_at":"2025-10-27T06:01:47.041Z","repository":{"id":2300181,"uuid":"3258859","full_name":"waiting-for-dev/zass","owner":"waiting-for-dev","description":"Sass grid framework 100% fluid, semantic, clean and allowing infinte nesting level with the use of one single mixin.","archived":false,"fork":false,"pushed_at":"2016-05-11T07:08:58.000Z","size":49,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T13:17:11.955Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waiting-for-dev.png","metadata":{"files":{"readme":"Readme.md","changelog":"ChangeLog","contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-01-24T19:16:42.000Z","updated_at":"2022-05-17T20:13:26.000Z","dependencies_parsed_at":"2022-09-07T07:11:21.213Z","dependency_job_id":null,"html_url":"https://github.com/waiting-for-dev/zass","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waiting-for-dev%2Fzass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waiting-for-dev%2Fzass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waiting-for-dev%2Fzass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waiting-for-dev%2Fzass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waiting-for-dev","download_url":"https://codeload.github.com/waiting-for-dev/zass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886343,"owners_count":21177645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T19:14:38.256Z","updated_at":"2025-10-27T06:01:46.925Z","avatar_url":"https://github.com/waiting-for-dev.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zass\n\n**One mixin to rule them all**\n\nZass is a [Sass](http://sass-lang.com/ \"Sass homepage\") (CSS) fluid grid framework. Zass is 100% fluid, semantic, clean and allow infinite nesting of columns with the use of a single mixin.\n\n* 100% fluid because it only uses percentage units to create grid dimensions.\n* Semantic, because thanks to Sass CSS pre-processor there is no need to pollute HTML with design named classes (as `.col_4` to indicate 4 grid units width).\n* Clean because it does not use any CSS hack neither uggly negative margins. Zass does not care about obsolete browsers like Internet Explorer 6.\n* Zass can nest infinite levels of columns.\n* And, what is more awesome, Zass can do all of this using one single mixin.\n\n## Setup\nZass framework requires you are working with [Sass](http://sass-lang.com/ \"Sass homepage\").\n\nWith git, to get latest stable version:\n\n    git clone https://github.com/waiting-for-dev/zass.git\n\nOtherwise, download it from:\n\n    https://github.com/waiting-for-dev/zass/zipball/master\n\nMove zass files to your sass directory and import `sass/_zass.scss` from your sass stylesheet:\n\n    @import 'sass/zass';\n\n## How does it work?\nFirst of all, you have to configure your grid through three variables. Here it is an example for a 960px grid:\n\n    $zass-column-width: 60px; //Grid columns width\n    $zass-gutter-width: 20px; //Grid gutters width\n    $zass-grid-units: 12; //Grid number of columns\n\nThen, you are ready to start creating and nesting as many columns as you want using the `zass-column()` mixin:\n\n    zass-column($n, $parent-n, $position, $push, $pull);\n\nHere it is an explanation of `zass-column` parameters:\n\n* `$n`: amount of grid units that the column will take up.\n* `$parent-n`: Only for nested columns, amount of grid units that the parent column takes up. 0 means it is not a nested column. `0 ` is the default.\n* `$position`: Only for nested columns, it can be `left`, `right` or `inner` if a column is the left extreme one, the right extreme one or an inner one. `inner` by default.\n* `$push`: Amount of grid units to push (left margin) the column\n* `$pull`: Amount of grid units to pull (right margin) the column\n\nSo, let say you have following DOM structure:\n\n    \u003cdiv id=\"col1\"\u003e\n      \u003cp\u003eColumn 1\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv id=\"col2\"\u003e\n      \u003cdiv id=\"col2-1\"\u003e\n        \u003cp\u003eColumn 2-1\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv id=\"col2-2\"\u003e\n       \u003cp\u003eColumn 2-2\u003c/p\u003e\n      \u003c/div\u003e\n     \u003c/div\u003e\n\n     \u003cdiv id=\"col3\"\u003e\n       \u003cp\u003eColumn 3\u003c/p\u003e\n     \u003c/div\u003e\n\nWith Zass, you could build quickly a grid layout:\n\n    @import '../../zass';\n\n    $zass-column-width: 60px;\n    $zass-gutter-width: 20px;\n    $zass-grid-units: 12;\n\n    #col1 {\n       @include zass-column(3); //Take up three grid units\n    }\n\n    #col2 {\n       @include zass-column(7); //Take up seven grid units\n       #col2-1 {\n          @include zass-column(4, 7, 'left'); //Take up 4 grid units inside #col2. It's the left one.\n       }\n       #col2-2 {\n          @include zass-column(3, 7, 'right'); //Take up 3 grid units inside #col2. It's the right one.\n       }\n    }\n\n    #col3 {\n       @include zass-column(1, $push: 1); //Take up one grid unit and push one more.\n    }\n\nOptionally, you can use a second mixin, `zass-grid()`, if you want to set grid width as the maximum width for a given container. That way, a perfect pixel photo of a design is achieved for resolutions greater or equal than grid pixel width while it is still 100% fluid for lower resolutions:\n\n    zass-grid($em, $rfs)\n\n* `$em`: If true, set that maximum width in em. In that case, the grid will increase its width if user increases text zoom level. Defaults to `true`.\n* `$rfs`: Relevant font size to calculate maximum width in em units. Default to `16px`.\n\nIn our example:\n\n    #wrapper {\n      @include zass-grid(true, 16px); //It ouputs \"max-width: 60em;\" \n    }\n\nor\n\n    #wrapper {\n      @include zass-grid(false); //Will ouput \"max-width: 960px;\"\n    }\n\n## More examples\n\nLook at the `examples/` directory for more examples.\n\n## Reference\n\nVariables, functions and mixins are fully documented in the source code.\n\n## Contact \u0026 Copyright\n\nCopyright 2012, Marc Busqué Pérez, under GNU LESSER GENERAL PUBLIC LICENSE\nmarc@lamarciana.com - http://www.lamarciana.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaiting-for-dev%2Fzass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaiting-for-dev%2Fzass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaiting-for-dev%2Fzass/lists"}