CSS Utilities

Utilities allow you to quickly apply single CSS properties to an element directly within your HTML markup without having to write any code in a separate CSS file. Contrary to other CSS frameworks which use the class attribute, Startr Style is unique in that it applies utilities through CSS variables and the style attribute. This has a number of distinct improvements over class based utilities.

  • Use of all values - With class based utlities you can only assign a set number of values pre defined by the framework. Startr Style does not have this restraint. Any valid value for the CSS property can be applied.
  • Filesize - One of the biggest drawbacks to date with utility complete CSS frameworks is their large filesize. The developent version of Tailwind for example, minified is a rather large 2413.4kB. Startr Style with the same feature set comes in at less than 50kb.

What about responsive

Startr Style utilities are perfect for developing fully responsive interfaces. Each utility can be applied conditionally to a screensize allowing you total responsive control.

To apply a utility to a certain screensize simply append the utility shorthand with a ‘-’ followed by the screen size. Utilities use a mobile-first approach so if you append with for example -md, that utility will be applied to the medium screensize and up.

In the following example background is red by default and blue on large screen devices.

<div style="--bg:red; --bg-lg:blue"><div>
Property Shorthand Media Queries MDN Reference
align-content --ac yes
align-items --ai yes
align-self --as yes
all --all no
background --bg yes
background-attachment --bga yes
background-color --bgc yes
background-image --bgi yes
background-position --bgp yes
background-repeat --bgr yes
background-size --bgs yes
border --b yes
border-bottom --bb yes
border-color --bc yes
border-bottom-left-radius --bblr yes
border-bottom-right-radius --bbrr yes
border-color --bc yes
border-left --bl yes
border-radius --radius yes
border-right --br yes
border-style --bs yes
border-top --bt yes
border-width --bw yes
bottom --bottom yes
box-shadow --shadow yes
box-sizing --bxs no
clear --cr yes
color --c yes
column-count --cc yes
column-fill --cf yes
column-gap --cg yes
column-rule --cr yes
column-span --cs yes
content --ct no
cursor --cur no
direction --dir no
display --d yes
filter --fr no
flex --fx yes
flex-basis --fb yes
flex-direction --fd yes
flex-grow --fg yes
flex-shrink --fs yes
flex-wrap --fw yes
float --ft yes
font-family --ff no
font-size --size yes
font-style --fs no
font-weight --weight no
grid-auto-columns --gac yes
grid-auto-rows --gar yes
grid-column --gc yes
grid-gap --gg yes
grid-row --gr yes
grid-template-columns --gtc yes
grid-template-rows --gtr yes
height --h yes
justify-content --jc yes
left --left yes
letter-spacing --ls yes
line-height --lh yes
list-style --lis no
list-style-position --lisp no
list-style-type --list no
margin --m yes
margin-bottom --mb yes
margin-left --ml yes
margin-right --mr yes
margin-top --mt yes
max-height --maxh yes
max-width --maxw yes
min-height --minh yes
min-width --minw yes
object-fit --objf yes
object-position --objp yes
opacity --op yes
order --o yes
outline --oe no
overflow --of no
overflow-x --ofx no
overflow-y --ofy no
padding --p yes
padding-bottom --pb yes
padding-left --pl yes
padding-right --pr yes
padding-top --pt yes
pointer-events --pe no
position --pos yes
right --right yes
scroll-behavior --sb no
text-align --ta yes
text-decoration --td no
text-shadow --ts no
text-transform --tt no
top --top yes
transform --t yes
transform-origin --ta yes
transform-style --ts yes
transition --tn yes
transition-delay --td yes
transition-duration --tnd yes
transition-property --tp yes
transition-timing-function --ttf yes
user-select --us no
vertical-align --va no
visibility --v yes
white-space --ws yes
width --w yes
word-break --wb yes
writing-mode --wm yes
z-index --z yes