Startr/Style

Startr/Style

A Utility Complete CSS Framework for less than 50kb, 8kb Zipped

- Style by Startr -
sample

Plante

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.


<figure style="
  --levitate:16; 
  --p:0px;
  --br:5px;"> 
  
<img src="example.jpeg" alt="sample" style="--m:2rem auto 0; --br:50%">
  <figcaption style="--ta:center"> <h4>Plante</h4> <p> ... </p> </figcaption> </figure>

Why build with Startr Style

Startr.Style accelerates and standardizes web design through custom property helpers and utilities, all seamlessly integrated within the style attribute. This innovative approach streamlines styling, making it faster and more consistent across projects. By embedding the power of customization directly where it's needed, Startr.Style ensures a lean, efficient workflow without sacrificing flexibility or control.

Easy Styling Without Classes

With Startr Style, you don't need to add any special classes or styles right away. When you include Startr Style in your project, it automatically applies nice styles to your regular HTML elements. It's as easy as that!

Here's how you can do it in your HTML:

<html>
      <head>
          <!-- Include Startr Style CSS -->
          <link rel="stylesheet" href="https://startr.style/style.css">
      </head>
      <body>
          <!-- Your HTML content -->
          <p>This paragraph will look great without any extra effort!</p>
          <button>This button will also have a nice style.</button>
      </body>
</html>

Just include the link to the Startr Style CSS file in the <head> of your HTML, and your basic elements like paragraphs and buttons will be automatically styled. No need to add any classes or extra code!

Just ad one line of code and you are good to go.

<link rel="stylesheet" href="https://startr.style/style.css">

It is all you need to get started. No need to compile anything, just add and start building. When you want to take advantage of the full power of Startr Style, you can start adding custom properties to your elements. This will allow you to customize your styles even further.

Utility Complete CSS

Wouldn't it be great if we could take the best parts of utility-first CSS frameworks and combine them with the best parts of traditional CSS frameworks? That's exactly what Startr Style does. It provides a complete set of utilities for the majority of CSS properties, making it easy to style your elements without leaving your HTML. This is perfect for super quick prototyping or when you want to keep your CSS size constant as your project grows.

In terms of CSS frameworks, utilities commonly refer to a CSS class which applies a single CSS property to an element. For example a class name of .bg-green would apply background-color: green to that element. A Utility Complete framework provide a complete set of utilities for the majority of CSS properties.

  • Super quick HTML prototyping
  • No need to leave your HTML
  • Style your elements fast

Components

The following are example components from our upcoming componet library.
Aliquam erat volutpat

Nullam malesuada erat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Aliquam erat volutpat

Isabelle Plante

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat

Donec odio

Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Aliquam erat volutpat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Aliquam erat volutpat
Jane Doe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Viktor Jones

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Marcia Stanley

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Giovanni Santana

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat

Nullam malesuada erat

18 hours ago | Entertainment

Isabelle Plante

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat

Be Inspired

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat
Quisque volutpat mattis eros.

New Beginnings

Welcome

Quisque imperdiet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat
Quisque volutpat
€30.00
Aliquam erat volutpat
Lorem ipsum dolor sit amet
€90.00
Aliquam erat volutpat
Consectetuer adipiscing elit
€60.00
Aliquam erat volutpat
Quisque volutpat mattis
€120.00
1
Quisque volutpat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

2
Nunc dignissim risus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

3
Cras ornare tristique

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

4
Praesent placerat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Join us today!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Aliquam erat volutpat
Lorem ipsum dolor sit amet

January 18, 2020

Aliquam erat volutpat
Ut enim ad minim veniam

March 24, 2020

Aliquam erat volutpat
Nemo enim ipsam voluptatem

Arpil 04, 2020

Questions

Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.

Aliquam erat volutpat
CULTURE

Lorem ipsum dolor

5.0 (48 Reviews)
Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat

Our site uses cookies. Learn more about our use of cookies: Cookie policy

Be Creative

Lorem ipsum dolor sit amet

Beautiful Designs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex fugiat quisquam.

Aliquam erat volutpat

A Perfect Place

Startr/Style

Get creative with Startr Style



Learn More

There is nothing new about the concept of utility complete CSS and today you will find any number of utility first frameworks to pick from. What is unique about Startr Style however, is how these utilities are implemented. Traditionally utility complete frameworks include a rule for every common CSS property/value combination.

Not only does this result in an incredibly large CSS file size it also means you are restricted to a set number of property/value combinations as defined by the framework developers. Startr Style uses a different approach. Instead utilities are defined by just the property and you the developer define the value.

The resulting CSS a fraction of the size & you also have full access to the CSS spec for each property.

Style based utilities
<div style="--bg:var(--dark)"><div>
<div style="--bg:#2A2A2A"><div>
<div style="--bg:rgb(42,42,42)"><div>
<div style="--bg:rgba(0,0,0,.8)"><div>

Responsive Design and Media Queries

In situations where certain tools need to be used depending on the screen size, you can use them selectively for each size. This lets you use these tools for particular screen sizes, simplifying the process of creating adaptable designs.

By default, we set four predefined points for the most common device resolutions.

/* Small '-sm' */
@media (min-width: 640px) { ... }

/* Medium '-md' */
@media (min-width: 768px) { ... }

/* Large '-lg' */
@media (min-width: 1024px) { ... }

/* Extra Large '-xl' */
@media (min-width: 1280px) { ... }

To use our style utilites with different screen sizes, just add the tool's name along with a - and the short name of the screen size you want. By default, media queries start with mobile screens and then adjust for larger ones. This means we design for the smallest screens first and then go bigger from there.

Consider the following example where --d is the Startr Style utility for the display CSS property. Button is display:block by default. display:none from medium size screens up.

<button style="--d:block; --d-md:none">Only visible on small screens</button>

Discover limitless possibilities

Explore our lab of resources and experiment with the endless possibilities of Startr Style.

Brutalism · Modernism · Minimalism · Skeuomorphism · Neumorphism · More