turretcss
turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites with default HTML elements, created by Scott de Jonge.
To get started, check out https://turretcss.com!
Table of contents
Quick start
Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/turretcss/turretcss.git
. - Install with npm:
npm install turretcss
. - Install with yarn:
yarn add turretcss
Read the Getting started page for information on structure, usage, support and more.
Bugs and feature requests
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Documentation
View full documentation at: https://turretcss.com/
turretcss's documentation, included in this repo in the docs
directory, is built with Jekyll and publicly hosted on GitHub Pages at https://turretcss.com. The docs may also be run locally.
Tooling
To use and run the documentation locally, you'll need a copy of turretcss's source files, and Node. To install the required tools follow these steps:
- Download and install Node, which we use to manage our dependencies.
- Navigate to the root
/turret
directory and runnpm install
to install our local dependencies listed in package.json. - Install Ruby, install Bundler with
gem install bundler
, and finally runbundle install
. This will install all Ruby dependencies, such as Jekyll and plugins.
- Windows users: Read this unofficial guide to get Jekyll up and running without problems.
When completed, you'll be able to run the various scripts provided from the command line.
Scripts
turretcss includes the following commands and tasks:
Task | Description |
---|---|
start |
Run npm run watch |
watch |
Run npm run watch:turret & npm run watch:docs |
watch:turret |
Watches changes to the /turret directory and builds turret CSS npm run compile:turret -- --verbose --watch |
watch:docs |
Watches changes to the /docs directory and builds docs CSS npm run compile:docs -- --verbose --watch |
compile:turret |
Builds turret CSS using PostCSS, postcss-preset-env, and CSSNano with config in postcss.config.js |
compile:docs |
Builds docs CSS using PostCSS, postcss-preset-env, and CSSNano with config in postcss.config.js |
format |
Run npm run format:css & npm run format:md |
format:css |
Prettier CSS files prettier --single-quote --print-width 180 --write '*.css' |
format:md |
Prettier Markdown files prettier --print-width 180 --write '*.md' |
Autoprefixer
turretcss uses Autoprefixer as part of postcss-preset-env to automatically add vendor prefixes to some CSS properties at build time.
Running documentation locally
- Install Install Ruby, install Bundler with
gem install bundler
. - Install Jekyll (the site builder) and other Ruby dependencies with
bundle install
. This will install all Ruby dependencies, such as Jekyll and plugins. - Run
npm start
oryarn start
to rebuild CSS. - From the
/docs
directory, runbundle exec jekyll serve
in the command line. - Open http://0.0.0.0:2001 in your browser.
Learn more about using Jekyll by reading its documentation.
Troubleshooting
Should you encounter problems with installing dependencies or running scripts, uninstall all previous dependency versions (global and local). Then, rerun npm install
.
Updates
Keep track development updates by following @turretcss on Twitter.
Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, turretcss is maintained under the Semantic Versioning guidelines.
See the Releases section of our GitHub project for changelogs for each release version of turretcss.
Creators
Scott de Jonge
- Twitter: @scottdejonge
- Github: @scottdejonge
Copyright and license
Code and documentation copyright 2019 Bigfish.tv, Code released under the MIT license. Docs released under Creative Commons.
Select element cannot have a label
Current behavior : The select element has no label text in examples. Adding a label text leads to broken style for the select dropdown arrow and the label is not formatted like the other labels.
Expected behavior : The select element has a label in examples. The select can be used with or without label.
Plans to transition away from using @apply?
Regarding this warning that PostCSS currently emits when processing the source files...
Are there any plans to deprecate the
_mixins
in favor of something else? If future versions of cssnext are going to omit thepostcss-apply
plugin, then it seems that plugin would become a separate dependency in order to use the--foo {}
and@apply
syntax.Improve html examples
I think some html examples should be improved to add more semantic with appropriate tags and where required, roles and aria-attributes.
For example, https://turretcss.com/form/field/
The field element should be by semantic a
<fieldset>
not a div..And this example does not make sense since
<fieldset>
are made to group parts of form elements, not to wrap all the elements inside the form. https://turretcss.com/form/fieldset/Btw i think also the fieldset style must be reviewed.
Add browserlist to handle browser compatibility
Hi, i want to make some PR to improve this project. This is the first issue i think may be implemented.
As the title say the project should use browserlist to define the browser compatibility and let postcss (and autoprefixer) doing their magic only when required. Using the browserlist configuration file you can easily change the target build.
postcss-preset-env already search for it we just define the browsers query which want to support.
This tool may help: https://browserl.ist/
here the available queries: https://github.com/browserslist/browserslist#full-list
Right now, without any specific configuration, the default one is used by
postcss-preset-env
:display and visibility class names
.display-block
.show
.hide
.show
applies the same style as.display-block
.hide
appliesdisplay: none;
, but there's no.display-none
utility class.display-none
utility class for a few reasons:display: none
and a display style other thandisplay: block
, for example switching betweendisplay: none;
anddisplay: inline-block
.hidden
.visible
.hidden-*
.visible-*
.hidden
appliesvisibility: hidden;
and.visible
applies.visibility: visible;
.hidden-*
appliesdisplay: none;
and.visible-*
appliesdisplay: block;
.hidden-*
(e.g..hidden-print
) would apply the same style as.hidden
, which isvisibility: hidden;
.Add initial RTL support
Replaces some 'left' and 'right' CSS rules with 'start' and 'end'. Partially fixes #50 . ~~This skips
control.css
as it may be a breaking change for those using the--control-inline-margin-right
variable. This may be done at another PR.~~ This includes a variable rename atcontrol.css
where the old variable is kept for backward compatibility. This PR could be a breaking change, but that's up to you to decide.To completely fix #50, CSS utility classes with RTL support also need to be added. That may be done at another PR.
turretcss v5.0.0 plan
Writing down some idea, thoughts, and additions to turretcss for v5.0.0.
Major Changes
postcss
packages)@apply
rule throughout as per discussion in #17Additions
Add
xxs
andxxl
size varients:@media
queries targeting devices < 320px width (Watch etc.) and > 1920px (Smart TVs)button
,input
,select
,.control
, etc. elements.space
,margin
,padding
scales potentially looking at a more standard spacing (0.5rem
,1rem
,1.5rem
,2rem
,3rem
,4rem
,5rem
)Removal
.big
text class with viewport text scale. It's proven to be unreliable for control and I have migrated away from using it.display-title
andsmall-caps
text classes in favour for more scalable classes that can be chained with scale classes for more varientsRefactoring
button
styles to minimise specificity for:hover
and:focus
states, look at removing:not(:disabled)
for a better solutionIdeas
HSL
for colors to utilisecalc()
for hue-rotation and greater color control from global varient presets.first-child and grids/flexboxes
The styles that wipe margin-top on :first-child elements make it awkward to work in situations where the items are placed in a grid or flexbox, i.e., in a horizontal layout, as the first and subsequent items' margins are not equal:
A codepen demo.
I'm not sure what would be the most clean approach to work around this; perhaps an additional class could be provided that when applied to a parent element would revert the effect of the first-child stiles on the children... Not sure.
Feature request: use turretcss as a no-side-effect utility library?
I'd like to use turretcss as a utility library, like how basscss works (which lacks e.g. the cursor utils). Turretcss applies a global default style to elements though, and I found no way to disable this in the documentation.
One could import the files in
turret/utility
one by one, but that's not a great way to work. Would it be possible to have e.g. adisable-turret-defaults
class that could be added on the<body>
to disable turret's default styling, or some other simple and proper way to achieve that? Perhaps a bundled/distributed separate import target to get all the utilities at once without the default styles?I could have a go at PRing this if you say you're not against the idea, but I don't know if e.g. you consider this out of scope and don't want it.
Fix FUNDING.yml GitHub line
I suspect the GitHub line was left commented out unintentionally. As a result, the Sponsor button is shown on the repo, however, using it results in GitHub giving back an error:
.position-[corner] classes
From the position docs: "each position utility class is position: absolute; with top/right/bottom/left properties".
I think the
.position-[corner]
classes would be more useful if it didn't automatically addposition: absolute;
.Then you could use them in conjunction with the
.position-fixed
class to anchor an element to a corner of the page or.position-relative
to anchor to a parent relative element without removing it from the flow (maybe a less useful case).It's currently not possible to do this because the
.position-[corner]
classes come after theposition-[position]
classes, making the elementposition: absolute;
.Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot 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 addressable from 2.5.2 to 2.8.1 in /docs
Bumps addressable from 2.5.2 to 2.8.1.
Changelog
Sourced from addressable's changelog.
Commits
8657465
Update version, gemspec, and CHANGELOG for 2.8.1 (#474)4fc5bb6
CI: remove Ubuntu 18.04 job (#473)860fede
Force UTF-8 encoding only if needed (#341)99810af
Merge pull request #431 from ojab/ct-_do_not_parse_multiline_strings7ce0f48
Merge branch 'main' into ct-_do_not_parse_multiline_strings7ecf751
Merge pull request #449 from okeeblow/freeze_concatenated_strings41f12dd
Merge branch 'main' into freeze_concatenated_strings068f673
Merge pull request #459 from jarthod/iso-encoding-problemb4c9882
Merge branch 'main' into iso-encoding-problem08d27e8
Merge pull request #471 from sporkmonger/sporkmonger-enable-codeqlDependabot 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 css-what from 2.1.0 to 2.1.3
Bumps css-what from 2.1.0 to 2.1.3.
Commits
2db00ca
2.1.3dc51092
fix(css-selectors): extend regex to include superscript in range, fix #27 (#28)a5f1991
Test on node LTSb2a2117
2.1.2e9ef3f1
Run prettier070b2f8
Add remaining parsed outputs (#25)af801e4
update license references to match license file (#23)2d495d0
Update to node 10 in .travis.yml (#22)c636f0d
Allow escaped parentheses in pseudo selectors (#20)4e255c9
Update .travis.ymlDependabot 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 tzinfo from 1.2.5 to 1.2.10 in /docs
Bumps tzinfo from 1.2.5 to 1.2.10.
Release notes
Sourced from tzinfo's releases.
Changelog
Sourced from tzinfo's changelog.
Commits
0814dcd
Fix the release date.fd05e2a
Preparing v1.2.10.b98c32e
Merge branch 'fix-directory-traversal-1.2' into 1.2ac3ee68
Remove unnecessary escaping of + within regex character classes.9d49bf9
Fix relative path loading tests.394c381
Removeprivate_constant
for consistency and compatibility.5e9f990
Exclude Arch Linux's SECURITY file from the time zone index.17fc9e1
Workaround for 'Permission denied - NUL' errors with JRuby on Windows.6bd7a51
Update copyright years.9905ca9
Fix directory traversal in Timezone.get when using Ruby data sourceDependabot 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 nokogiri from 1.10.4 to 1.13.6 in /docs
Bumps nokogiri from 1.10.4 to 1.13.6.
Release notes
Sourced from nokogiri's releases.
... (truncated)
Changelog
Sourced from nokogiri's changelog.
... (truncated)
Commits
b7817b6
version bump to v1.13.661b1a39
Merge pull request #2530 from sparklemotion/flavorjones-check-parse-memory-ty...83cc451
fix: {HTML4,XML}::SAX::{Parser,ParserContext} check arg types22c9e5b
version bump to v1.13.56155881
doc: update CHANGELOG for v1.13.5c519a47
Merge pull request #2527 from sparklemotion/2525-update-libxml-2_9_14-v1_13_x66c2886
dep: update libxml2 to v2.9.14b7c4cc3
test: unpend the LIBXML_LOADED_VERSION test on freebsdeac7934
dev: require yamlf3521ba
style(rubocop): pend Style/FetchEnvVar for nowDependabot 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.
color-mod
color-mod() has been removed from Color Module Level 4 specification.
Therefore, it's also not possible to use many color turretcss color variables with a standard postcss configuration.
Additional links: https://github.com/csstools/postcss-color-mod-function