mini.css
A minimal, responsive, style-agnostic CSS framework
mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.
Setup & usage
You have 4 options when it comes to setting up mini.css:
- Use a package manager (recommended)
- Use GitCDN
- Use Rawgit
- Use cdnjs (preferred for older releases)
For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.
Method 1: Use a package manager (recommended)
- Install mini.css using
npm
,yarn
orbower
.
npm install mini.css
yarn add mini.css
bower install mini.css
-
Pick one of the available flavors and use its CSS file.
-
Start working on your project. Detailed documentation is available on the framework's website, so be sure to check it out.
Method 2: Use GitCDN
mini.css is also hosted on GitCDN, an open-source service, so you can easily grab the latest release's distributables. Simply link to your preferred flavor inside your HTML page's <head>
tag:
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/{mini-flavor}.css" />
Remember to replace {mini-flavor}
with the flavor's name (e.g. mini-default
or mini-default.min
for the default flavor).
Method 3: Use RawGit
mini.css is also hosted on RawGit, another open-source service, so you can easily grab a specific release's distributables. Simply link to a release and your preferred flavor inside your HTML page's <head>
tag:
<link rel="stylesheet" href="cdn.rawgit.com/Chalarangelo/mini.css/{release-tag}/dist/{mini-flavor}.css" />
Remember to replace {release-tag}
with a release from the Releases page and {mini-flavor}
with the flavor's name (e.g. mini-default
or mini-default.min
for the default flavor).
Method 4: Use cdnjs (preferred for older releases)
If you would rather use an older version of the framework, you should head over to cdnjs for a list of releases and flavor files supplied with them.
Flavors & customizaton
Flavors are one of the key features of mini.css, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined flavors that might suit your needs and will help you figure out how to use the framework and create websites and apps with it.
But you can easily build you own flavors by using our flavor generator tool, which allows you to customize almost everything. Take your time and create the perfect flavo to suit your needs.
Contributing
-
Have you found a bug in the framework? Do you want to request a new feature or suggest a new flavor? Maybe found some documentation that is unclear or incomplete? Open an issue and we will be with you shortly.
-
Have you developed a new flavor and want to share it with the world? Open an issue about it, so that we can link to your repository from the framework's documentation and let the world know. We will try to keep you posted on any new releases coming, so that you can update your flavor as necessary.
-
Have you developed a module for the framework? Well, we don't really accept new modules right now, but if it works, we will certainly tell people that it's available. Open an issue about it and we will figure it out together.
Maintainers & contributors
The team behind mini.css is as follows:
- Angelos Chalaris (@chalarangelo) - Sass archmage, project manager
Special thanks to these fine folks for helping in the development of mini.css:
- @tphecca - Author of the Nord flavor
- Per Harald Borgen - Introductory video creator
- Rory Primrose (@roryprimrose) - Code restructure
- Sandro Magi (@naasking) - Multiple suggestions, ideas, bug reports
- Wade Garrett (@wad3g) - Multiple fixes for issues and bugs
License
mini.css is an open-source framework and is licensed under the MIT License.
v3.0.0 Roadmap
Overview
v3.0.0 (Gluon) is going to be a step in a different direction from Fermion, as it will be built from the ground up, with certain differences in focus and scope. Many breaking changes will be present, however some core concepts and ideas will be staying the same.
Some of the key features that will be present in the new Gluon branch are support for CSS3 variables, which will impact most aspects of the current codebase, possible support for CSS3 grid, additional components and replacement components, as well as many UI/UX improvements, which will be the focus of the next major release. To meet these goals, the framework will be rebuilt with a focus on better aesthetics, easier customization and better user experience, even if this impacts adoption rates, due to the discontinuation of support for legacy and proxy browsers, as Gluon will be built with a focus on the future. There is also the slight possibility that Gluon will be a bit larger than 7KB in certain of its flavors, however there will always be some light flavor meeting the core goal of 7KB.
That being said, the current Fermion branch will be supported actively, with fixes and possibly updates rolling out regularly, while Gluon is in development. After Gluon is released (estimated release date is Q1 2018 for now - this is subject to change), Fermion will be considered a legacy branch, but it will still be supported and its documentation will be available for a long time. On a side note, if you are reading this and use a Fermion build in production, make sure to point to a link with v2.x.x in its name and not the default one which loads from the last commit of the
master
branch.Finally, the Neutrino branch will not be supported any further, as it is hereafter considered a legacy version.
Gluon - List of changes, updates, features
Note that all of this is subject to change and that it is very importan to get as much feedback as possible to provide the best possible experience for everyone. The lists below will be populated as progress is being made in each module.
core
module, featuring less legacy fixes, along with restyling of multiple elements.-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif
).code
,pre
,kbd
andblockquote
.pre
elements.blockquote
elements.hr
element styling.padding-left
in lists should be based on--universal-margin
or if it should use--universal-padding
instead.grid
module. There might be something like a tile system as well, utilizing CSS grid.xs
screen size, it will now be three sizes only.navigation
elements, with focus on mobile usability.nav
element'smargin
etc. are optimized to work with.drawer
component..drawer
component.header
styling andpadding
.header
linksuppercase
.footer
element.input_control
to allow for easier customization and better user experience.form
,fieldset
,legend
).margin
values forlabel
and reevaluate to work with UX and icons (customized variants).radio
andcheckbox
. The next iteration will style theinput
s directly, instead of labels, making it significantly more accessible and less complex in the coding behind it..input-group
s included by default as a whole, not as individual pieces, use a hidden variable..button-group
s and figure out if pagination can be added to the whole thing (possibly just as examples).table
module, utilizing flexbox and infinitely scrollable tables for a better user experience..hoverable
tables.card
layout, allowing for more versatile layouts.card
module intolayout
, which will include it, alongsidegrid
.padding
in.double-padded
.section
s.tab
systems or even removal of tabs in favor of a better, easier-to-use system.tab
module entirely, move the vertical version intocontextual
to be used as aspoiler
component. Tabs are not going to be part of the Gluon release, as their use-cases are reasonably limited and cause a whole lot of problems. Javascript examples with proper navigation will be provided, instead.contextual
module with more components that are easier to use and customize.mark
elements..modal
,.tooltip
and.toast
elements. No legacy support and variables, as well as some changes (possibly) to make sure the are easy to use and maintain.progress
module, mainly removing legacy support and slightly improving on the aesthetics of components.progress
and.spinner-donut
and a.primary
variant to replace the old default.utility
module..breadcrumbs
andclose
.Compatibility
As stated in the Overview section, the Gluon update will be a brand new framework, meaning a lot of the existing conventions and semantics will be changed. If you are using a previous version of Fermion, remember to point to a version-specific link.
Migrating to Gluon might take a little bit of effort, but I will try to make it as smooth as possible, by providing guidelines and help every step of the way.
Release date
It's too soon to tell, but the aim is to release sometime in the first quarter of 2018.
Add support for CSS custom properties
Many of the variables used in the framework can be changed from SCSS variables to CSS variables.
However this feature is not well-supported yet, thus it will be some time until the framework changes to CSS variables. This is a planned change and it will take place sometime later, when support for the feature is over 85% (currently at 66% as of October 2016).
Use ARIA roles to designate semantic markup with behaviour
Instead of using classes, mini.css could make any site that uses it more accessible CSS by default if you use ARIA roles to identify tabs, buttons, alerts, menus and navbars, etc.
The CSS selectors then change from class selectors, to attribute selectors like [role~="tab"] { ... }. This is CSS 2.1 IIRC, so it already has broader browser support than mini.css's latest version.
Broken Links in documentation
Hey there,
let me first say that I really love your project. I have downloaded your latest release and was ready to read the documentation but the links on the navbar do not link to the respective html files. I think that the links are made so that they work only for your minicss.org domain but not for offline reading. Would it be ok if a create a pull request and change the links so that they will work offline ?
Empty breaks table layout
I noticed that when the
<td>
is empty and we have specified a data-label then the table layout breaks at that point. In the attached screenshot the "td 3' is empty.Support for more [colour] icons
Hi there,
is it possible to add more feather icons ?
I would like some icons like delete and add which are helpful when creating forms etc.
Also is it possible to add colour to the icons ?
Problem when php code embedded
`
v2.3.0 Roadmap
Overview
~~v2.2.1~~v2.3.0 is going to contain a host of new features and additions, as well as bug fixes and updates, dealing with problems in all modules and polishing up most of the components provided. Due to the fact that v2.2.1 was delayed a lot, I decided to drop the minor patch update and merge it with v2.3.0, so that more things can be added and fixed in one single release.
New features & components
modal
component will be added, as requested in the past (see the discussion in #46).switch
component will be added. Mainly targeted at PWAs and mobile-centric flavors..scrollable
tables, allowing a better view for data. Bear in mind this might be pushed back to the next update, as it is certainly unstable so far.Bug fixes/updates/polishing up
progress
module's bars to make them look more modern (rounded edges and a bit less thickness are what I'm thinking of).input_control
module, especially.input-group
components for convenience. This might actually happen either under the hood or not at all, based on internal tests and use-cases. Please report any trouble you had with the module and/or layout ideas that you had trouble implementing with the specific components.Documentation
N/A yet.
Miscellaneous
package.json
file, removing thedoc
folder to minimize download size, as well as updating the structure etc..npmignore
should now ignore thedocs
folder.next
branch from now on.$_1px
variable to calculate therem
value of1px
whenever possible.Release date
There is no solid estimate yet, but this update will be releasing sometime this month. I will take as much time as required to make this update stable and content-rich, so that later updates build upon it and start addressing #19, which is becoming a reasonably pressing matter.
v2.1.1 (Fermion) Roadmap
Overview
The next release of Fermion will mostly deal with codebase cleanup and minor changes to the way the framework works. It's a pretty behind-the-scenes patch that should pave the way for the next few patches, that will slowly but steadily introduce new features and minor changes to the framework's inner workings.
Estimated release
v2.1.1 has no release date set in stone yet, but it will be out mid-to-late April, depending on how development goes. There is a very slight chance that the release date will be early April.
List of upcoming changes
Codebase cleanup and restructure:
.scss
files to make their stucture more usable and less confusing to newcomers.@media
queries will be updated to explicitly work on screens and not printers, so that the print styles that are coming later down the line can be implemented more easily.Documentation changes:
rawgit
togitcdn
(#64).New features:
barebones
is the current codename I am using) that will be smaller, easier to use and cut out all the fat of certain features that are not widely used in websites.figure
andfigcaption
styles - might be pushed back to next release..hidden
classes (both accessible and normal) to deal with a common enough problem (#61).Bug fixes:
.button-group
under smaller screens (vertical grouping) on Chrome (#63).fix background styles for select in Safari
Fixed issue #80 where the styling in Safari for
select
weren't working properly.Only adding
-webkit-appearance: none
won't suffice since it not only removes the gloss in Safari, but also removes the arrows.Here's a screenshot with this fix in both Chrome & Safari:
Safari
Chrome
v2.2.0 Roadmap
Overview
The release of v2.2.0 will change a lot of things around and it will also bring about some breaking changes. A list of changes, along with their progress is shown below.
Upcoming changes
.drawer
(name is not finalized) component innavigation
, allowing for slide-in menus and responsive navigation.calc()
). This feature will most likely be opt-in, meaning that old flavors will not be affected, as the feature will be turned off by default.input_control
should come beforenavigation
at least) to improve style cascading and gzip compression.padding
andmargin
values, making sure that no oddities and artifacts exist and that everything works quite well with fluid typography.utility
module will be revisited to make sure theirpadding
andmargin
values are useful and!important
declarations will be added to make sure they are applied (found a bug where they do not apply properly)..alert
classes of thecontextual
module will be retired (I will either move them to their own component module as an extra or flag-disable them). A.toast
class will take their place, making it easier to show toast messages on mobile devices..urgent
and.critical
alerts will be added as.card
classes..inverse
.card
class will be removed, as it serves no practical purpose except to showcase the specific card mixin..nano
class will be removed from theprogress
module, as it serves no real purpose right now..close
icon class will be revisited and redesigned to utilize a textual::before
pseudo-element with simpler rules, making it more lightweight. Also, extra rules might be added to make it compatible with<label>
elements and the new.drawer
component..shadow-none
class will be probably gone as well).Compatibility
v2.2.0 will introduce a few new components and remove some older ones, in order to improve functionality and de-bloat the framework somewhat. Refer to the above list of changes for more details.
Release date
Worst case scenario is that v2.2.0 will take until mid-June, but that is highly unlikely. The most likely scenario is that it will be available sometime towards the end of May. Stay tuned for more updates!
Bump node-sass from 4.9.2 to 7.0.0
Bumps node-sass from 4.9.2 to 7.0.0.
Release notes
Sourced from node-sass's releases.
... (truncated)
Changelog
Sourced from node-sass's changelog.
Commits
918dcb3
Lint fix0a21792
Set rejectUnauthorized to true by default (#3149)e80d4af
chore: Drop EOL Node 15 (#3122)d753397
feat: Add Node 17 support (#3195)dcf2e75
build(deps-dev): bump eslint from 7.32.0 to 8.0.0bfa1a3c
build(deps): bump actions/setup-node from 2.4.0 to 2.4.180d6c00
chore: Windows x86 on GitHub Actions (#3041)566dc27
build(deps-dev): bump fs-extra from 0.30.0 to 10.0.0 (#3102)7bb5157
build(deps): bump npmlog from 4.1.2 to 5.0.0 (#3156)2efb38f
build(deps): bump chalk from 1.1.3 to 4.1.2 (#3161)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump jszip from 3.1.5 to 3.7.0
Bumps jszip from 3.1.5 to 3.7.0.
Changelog
Sourced from jszip's changelog.
Commits
e5b3f0d
3.7.0e88ba4b
Update for version 3.7.09046487
Disable proto assert that fails in browsers6d029b4
Merge pull request #766 from MichaelAquilina/fix/files-null-prototypebb38812
Ensure prototype isn't modified by zip filed024c22
test: Add test case for loading zip filenames which shadow method names2235749
fix: Use a null prototype object for this.filesb7f472d
Merge pull request #757: Update license to be valid spdx identifiera311039
update license to be valid spdx identifier112fcdb
3.6.0Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Added .nojekyll file to the docs folder
This should fix #140
The problem was that all files in
/mini
begin with underscore (ie:_core.scss
). By default github pages ignores them, because of Jekyll's ignore rules. Adding a.nojekyll
file at/docs
solves the problem, as the site does not use Jekyll.More on the topic: https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/
Also I've published the fix here for testing: https://sigmasoldi3r.github.io/mini.css/flavors
Getting a table to not wrap
I've got a simple php calendar on my page but I don't want it to change on a narrow mobile display. Any way to remove this from happening for a single table? It seems the behavior applies to any table in Mini.
How to add an item to the documentation notes of modal dialogs ?
Hi,
I just want to add to the notes of modal dialogs that this dialogs can be automatically open when the page is loaded by adding the
checked
attribute to checkbox input.Which file I add to modify in the /docs folder, docs.html ?