JigSass Objects Lists
JigSass Lists is a collection of unopinionated, unstyled, ui abstractions for displaying lists.
npm i -S jigsass-objects-lists
First, you need to import JigSass Lists into your stylesheet:
And optionally reconfigure the defaults to your liking.
JigSass Lists provides the following list abstractions:
- Bare list: Unstyled lists.
- Inline list: Inlined list items, placed side by side instead of stacked one on top of each other.
- Delimited inline list: Delimited an inline item by a configurable string
- Split inline list: Push the first or last list item away from the other items, to the edge of the container
- Divided list: A vertically stacked list of items divided by horizontal rules.
See here for the full documentation and configuration options.
Like all other JigSass modules, JigSass List does not automatically generate any CSS when imported. In order to use its classes, you would have to first explicitly indicate your intention to use them by enabling their generation in the associated configurations map, Leaving us only with CSS we need.
All JigSass List classes are responsive using JigSass MQ
and the breakpoints defined in
Based enabled selectors in the configuration map, responsive modifiers are generated according to the following logic:
So, assuming the
landscape breakpoints are defined in
(orientation: landscape) respectively,
will generate the following classes:
.o-inline-list--split-first, which is not limited to any media-query.
.o-inline-list--split-first--until-medium, which will be in effect at
(max-width: 37.49em)and will override styles in the default class until that point.
.o-inline-list--split-first--from-large-when-landscape, which will go into effect at
(min-width: 64em) and (orientation: landscape)and will override styles in the default class under these conditions.
It is a best practice for JigSass modules to not automatically generate css on
rather have to user explicitly enable the generation of specific styles from the module.
Contributions in the form of pull-requests, issues, bug reports, etc. are welcome. Please feel free to fork, hack or modify JigSass Objects Lists in any way you see fit.
Good documentation is crucial for usability, scalability and maintainability. When contributing, please do make sure that both its Sass functionality (functions, mixins, variables and placeholder selectors), as well as the CSS it generates (selectors, concepts, usage exmples, etc.) are well documented.
Jigsass Grid uses Jonathan Neal's mdcss.
When styles and documentation comments are not automatically generated by your module on
please use the
sgSrc/sg.scss file to enable their generation.
In addition, any file in
sgSrc/assets will be available for use in the style guide.
┬ ./│├─┬ scss/│ └─ index.scss # The module's importable file.│├─┬ sgSrc/ # Style guide sources│ ││ ├── sg.scc # It is a best practice for JigSass│ │ # modules to not automatically generate│ │ # css and documentation on `@import.`│ │ # Please use this file to enable css│ │ # and documentation comments) generation.│ ││ └── assets/ # Files in `sgSrc/assets` will be│ # available for use in the style guide│└─┬ docs/ # Documention│└── styleguide/ # Generated documentation# of the module's CSS