-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmobile-first-css-reset-stylesheet.html
213 lines (183 loc) · 11.4 KB
/
mobile-first-css-reset-stylesheet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=2, user-scalable=yes">
<meta name="description" content="Baseline.css is a modern and ultra-sophisticated CSS reset stylesheet that ensures consistent styling across all browsers, mobile-first.">
<meta name="keywords" content="css, stylesheet, modern, css reset, baseline.css, github, github pages">
<meta name="author" content="Saskia Ostermann Toutatis">
<title>Baseline.CSS - Story</title>
<link rel="canonical" href="https://baseline-css.pages.dev/mobile-first-css-reset-stylesheet/">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Open Graph Metadata -->
<meta property="og:title" content="Baseline.CSS >> Modern CSS Reset">
<meta property="og:description" content="Baseline.css is a modern and ultra-sophisticated CSS reset stylesheet that ensures consistent styling across all browsers, mobile-first.">
<meta property="og:url" content="https://baseline-css.pages.dev/">
<meta property="og:image" content="https://baseline-css.pages.dev/images/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_GB">
<!-- Twitter Metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Baseline.CSS >> Modern CSS Reset">
<meta name="twitter:description" content="Baseline.css is a modern and ultra-sophisticated CSS reset stylesheet that ensures consistent styling across all browsers, mobile-first.">
<meta name="twitter:image" content="https://baseline-css.pages.dev/images/og-image.png">
<meta name="twitter:site" content="@kernamon">
<!-- Metadata END -->
<!-- Preload images -->
<link rel="preload" as="image" href="images/baseline-css-mobile-first-900.webp">
<!-- Preload images END -->
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="assets/css/baseline.min.css?v=2.0">
<link rel="stylesheet" type="text/css" href="style.css?v=1.9"> <!-- Cache Busting -->
<!-- Stylesheets END -->
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img
src="images/baseline-css-logotype-300.webp"
srcset="
images/baseline-css-logotype-300.webp 300w,
images/baseline-css-logotype-600.webp 600w,
images/baseline-css-logotype-1100.webp 1100w
"
sizes="(max-width: 1100px) 100vw, 300px"
alt="Baseline.CSS logo showcasing a modern CSS reset"
class="logo-img"
width="300"
height="240">
</div>
<div class="header-content">
<h1>css reset</h1>
<p>Showcase of a modern CSS reset and baseline styling minified to 2.3Kb</p>
</div>
</div>
</header>
<div class="container">
<section>
<h2>CSS reset with Baseline.CSS</h2>
<p>
Baseline.css is a <strong>modern CSS reset</strong> designed to ensure a very consistent styling across all modern browsers.
A frontline CSS framework that removes unnecessary browser settings and provides a clean slate for your web projects, making it a <em>must have</em> tool overly valuable for all: project managers, web developers and beginners alike.
Available for 🙟 <a href="index.html">download</a> 🙝
</p>
<hr>
<div class="center-decorative">❖</div>
<h3>Differences between our Baseline.CSS reset Versions 1.0 vs 2.0</h3>
<p>
Baseline.CSS <b>Version 1.0 - Initial Release in 2024</b>
</p>
<p>
The initial version of baseline.css was introduced as a foundational stylesheet aimed at creating a uniform and consistent design across all webpages, while also improving accessibility and <strong>mobile responsiveness</strong>.
Created to replace <a href="https://nicolasgallagher.com/about-normalize-css/" target="_blank" rel="noopener noreferrer">normalize.css</a> of Nicolas Gallagher with an up-to-date and sophisticated approach, the latest performance improvements and ensuring wide flexibility.
</p>
<p>
Baseline.CSS <b>Version 2.0 - Initial Release in 2025</b>
</p>
<p>
Historically, the main goal of a CSS reset has been to ensure consistency between browsers and to undo all default styles, creating a blank slate for your webpages,
but nowadays, modern browsers do not have massive discrepancies regarding the layout display and spacing, thus, it is not really necessary to strip away all of the browser default settings. <a href="https://web.dev/learn/performance/why-speed-matters/">Does speed really matter?</a>
</p>
</section>
<section>
<div class="center-image">
<img
src="images/baseline-css-mobile-first-900.webp"
srcset="
images/baseline-css-mobile-first-300.webp 300w,
images/baseline-css-mobile-first-600.webp 600w,
images/baseline-css-mobile-first-900.webp 1100w
"
sizes="(max-width: 900px) 100vw, 900px"
alt="Baseline.CSS Mobile First responsiveness and flexibility"
class="responsive-image"
width="900"
height="749">
</div>
</section>
<section>
<h3><strong>Mobile First</strong></h3>
<p>
<b><strong>Mobile-First Design</strong></b>: As part of KERNAMON's focus on ensuring that every webpage is optimised for mobile users, baseline.css includes responsive layout techniques,
making it easier to create webpages that adjust seamlessly to different screen sizes. We aimed at creating a CSS reset with a very strong emphasis on <a href="https://www.browserstack.com/guide/how-to-implement-mobile-first-design/" target="_blank" rel="noopener">implementing mobile-first design</a>.
</p>
<p>
Modern smartphones have 2x and 3x <a href="https://felgo.com/doc/qt5/highdpi/" target="_blank" rel="noopener">hi-dpi displays</a>. That means that, as an example, an area of the webpage being measured as 300px in CSS will need 600 or 900 device pixels worth of image data to look nice and crisp.
As a web developer, many times, you have the feeling that you need to “squeeze” large images into much smaller spaces on your webpages.
</p>
<hr>
<h3><strong>Fonts & Typography</strong></h3>
<p>
<b>Font & Typography Standardisation</b>: baseline.css introduces a standardised font setup for your webpages, helping you to maintain consistent text styling across various sections of your website or web app.
This approach eliminates the need for you to manually define <strong>font styles</strong> for every webpage, saving you a lot of time and effort.
</p>
<hr>
<h3><strong>CSS reset</strong> & Box Model</h3>
<p>
<b>Simplified Box Model</b>: According to the <strong>CSS box model</strong>, the web browsers supply each element as a square prism, but our framework implements a simplified version of the box model,
reducing potential conflicts between default browser styles. By defining the <em>box-sizing</em> property, baseline.css ensures that padding and border widths do not impact element the width calculations. Cool?
</p>
<hr>
<h3>Across Browsers 100%</h3>
<p>
<b>Cross-Browser Compatibility</b>: One of the primary goals of baseline.css is to ensure that the CSS styling is consistent across all browsers. Carefully tested and optimised, by doing so,
it eliminates many of the discrepancies that might appear between web browsers and ensures a smooth user experience on all web platforms.
</p>
<p>
<b>Universal CSS Reset</b>: In order to avoid the need for extensive resets on each and every individual webpage’s CSS, baseline.css incorporates a universal CSS reset that clears out default browser styles.
This allows web developers to start with a clean slate when building their own custom themes and layouts.
</p>
<p>
<b>Lightweight Design</b>: Keeping a design simple and lightweight is a key factor to enhance web performance. Therefore, baseline.css eliminates unnecessary rules, which results in much smaller file sizes and faster webpage loads.
This leads to improved <strong>SEO rankings</strong>, bearing in mind that <a href="https://yoast.com/how-site-speed-influences-seo/" target="_blank" rel="noopener">the speed of your website is a crucial factor for search engine optimisation</a>.
</p>
<hr>
<h3>Modular Design</h3>
<p>
<b>Modular Components</b>: In line with KERNAMON’s approach to modularity, baseline.css can be easily extended or modified as needed.
Users can build upon it with their own custom styling, knowing that the base styles remain intact while still offering flexibility for customisation.
</p>
<hr>
<div class="center-decorative">❖</div>
<h3>Why baseline.css?</h3>
<p>
Baseline.CSS was specifically designed to cater to the needs of both developers and users. Its very lightweight, flexible and mobile-first nature makes it a perfect starting point for any custom theme or website design.
With its focus on consistency, performance and cross-browser compatibility, it provides the perfect foundation for any web project.
</p>
<p>
<b>What if you need to “undo” something on baseline.css??</b> Well, if you are formatting a huge amount of text content such as a Terms & Conditions webpage, you might want to “undo” certain things, almost for sure.
Therefore, in those situations you can use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/revert/">revert</a> keyword.
</p>
<p>
<b>Future Updates?</b> As web technologies continue to evolve, baseline.css will also be updated to meet future web standards and enhance performance further on, while adhering to Open-Source standards.
Stay tuned for future improvements and new features as the KERNAMON team will continue to refine the Baseline.<strong>CSS framework</strong> for the general public.
</p>
<p>
Baseline.css is more than just a reset, it’s a starting point for modern web design. By focusing on mobile-first principles, modularity, performance and <a href="https://securityheaders.com/?q=baseline-css.pages.dev&hide=on&followRedirects=on" target="_blank" rel="noopener noreferrer">security</a>,
it empowers developers to create responsive, accessible and visually appealing webpages. Stay tuned for any updates and future enhancements as the CSS framework continues to evolve.
</p>
</section>
<section>
<h3>CSS reset & stylesheet on GitHub</h3>
<div class="center-image">
<img
src="images/baseline-css-github.webp"
sizes="(max-width: 1100px) 100vw, 245px"
alt="Baseline.css is an Open-Source CSS Stylesheet available on GitHub.com/KERNAMON"
class="responsive-image"
width="245"
height="240"
loading="lazy">
</div>
<p>Well, why don't you check out what is happening on our <a href="https://github.com/KERNAMON/css-baseline/">GitHub</a> profile, repositories & projects?</p>
</section>
</div>
<footer>
<p>BASELINE.CSS © 2024 KERNAMON</p>
</footer>
</body>
</html>