startlify v1.0.4

Startlify

Lightweight framework for responsive websites.

The Goal

Startlify is a good starting point for responsive web development, especially for smaller projects or those with unique design requirements.

Why this is good ?

• Solid Foundation
• Responsiveness
• Lightweight
• Customization
• Suitable for projects with unique design
• Performance Focus

Details

Variables:

• Defines variables for screen sizes ($xxl, $xl, etc.), container widths ($container_xxl, etc.), and spacing ($gap).
• Creates a map $headings to store styles for different heading tags (h1 to h6 and P).

Mixins:

• Creates mixins for media queries targeting different screen sizes (xxl_screen, xl_screen, etc.).

Base Styles:

• Resets default styles for focus and box-sizing.
• Sets styles for the body element, including font family, line-height, overflow, and anchor tag styles.
• Defines common styles for images, videos, headings, paragraphs, unordered lists, inputs, textareas, buttons, and sections.

Importing Fonts:

• Imports the Open Sans font from Google Fonts.

Headings:

• Uses the $headings map to define styles for heading tags (font weight, margin, text transform, font size).
• Applies a special style to the first letter of the first paragraph, making it uppercase.

Display Utilities:

• Creates a map $displays containing classes for various display properties (e.g., d-none, d-flex).
• Loops through the map and creates CSS classes dynamically.

Flexbox Utilities:

• Defines classes for flex direction (row, column, reverse) and justification/alignment properties (start, center, end, etc.).

Spacing Utilities:

• Creates classes with margins and paddings using a loop, allowing for easy control of spacing in increments of 0.1rem.
• Additional classes are created for margin/padding shortcuts (e.g., mx-#3 for margin-left and margin-right).

Container and Row:

• Defines a .container class with centered layout and responsive max-width based on screen size using mixins.
• Defines a .row class for creating a flexbox layout with columns.
• Creates multiple column classes (.col-#, .col-sm-#, etc.) for responsive grid layouts.