Sun

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Sun is a minimal website template for creative studios, product and brand designers and portfolios, in plain HTML, CSS and JavaScript with no CSS framework. The layout is responsive and mobile-ready. There are twelve pages: home, four home variants (with a feature photo, an image slider, a studio film or the latest journal posts), about, work, case study, journal, article, contact, and contact with map.

The home and work pages have a filterable grid of projects, photos, films and links: photos open in a lightbox, films in a video window and projects on the case study page. You will also find an about page with the studio’s milestones, a journal with an article that has a pull quote and a film, and two contact pages with a working contact form, one of them with a map that loads on click. Sun gives you a ready-made site to present a studio’s work and win new clients.

What’s new in 3.0

• Still no CSS framework: plain CSS and plain JavaScript, with no jQuery (the earlier release used jQuery 1.12.4 and its plugins). Swiper 14.3.0 replaces carouFredSel on the image slider, PhotoSwipe 5.4.4 replaces prettyPhoto for photos, a native dialog plays the films, a small filter module over a CSS grid replaces Isotope with the same masonry layout, a few lines of script replace SmartMenus, and the custom scrollbar, FitVids and the other plugins are gone. Icons are Lucide SVGs in place of the Font Awesome 4 font. npm run build (esbuild) builds one minified stylesheet and one script.
• Lighter pages: all twelve pages together went from 16.9 MB and 402 requests to 2.6 MB and 117 requests, the home page from 1.02 MB and 33 requests to 229 KB and 16, and the video home from 2.78 MB to 182 KB; the download went from 2.82 MB to 2.70 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the fold.
• No third-party requests: Montserrat and PT Serif are self-hosted, the film on the video home and in the article is a photo with a play button that loads a stock clip from YouTube’s privacy-enhanced player only after a click, the map on the contact page with a map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, the pages loaded from eight outside hosts, including Google Fonts, Google Maps and Vimeo, and the video clips they loaded no longer existed.
• Working contact form and search: the contact form on both contact pages sends through php/send-email.php (PHP on your host), with validation, a spam trap and an in-page message, and the header search takes visitors to the journal. Before, the contact fields had no form around them, the mail script put the visitor’s address in the From: header, and the search bar posted nowhere.
• Accessibility: a skip link and a main landmark on every page, one h1 per page (the logo was an h1 on every page), a menu that works from the keyboard (submenus open on focus, their + buttons report whether they are open, and Esc closes them), labelled form fields, names on image and video links, 44 px slider and submenu controls, visible focus rings, reduced-motion support and WCAG AA text contrast, with a darker red for red text (5.4:1 on white, was 3.7:1) and darker greys for meta text, quotes and the search bar (they read at 2.0 to 2.6:1).
• Fixed: the browser’s scrollbar was hidden behind a script-drawn one and a preloader covered each page while it loaded (both are gone, so the normal scrollbar is back and pages show at once); the journal rows stayed invisible until a script ran and now show without JavaScript; the pages no longer stop phones from zooming; an empty grey band below every page is gone; and eleven links that pointed nowhere are fixed.
• Demo content: fictional studio copy, five journal posts, a full article, a case study, milestones and contact details replace the placeholder text, quotations and real address; an original fictional brand badge replaces a third-party badge on the tote and case-study photos, the bottle tile is a new Unsplash photo, and the footer shows one Colorlib credit at every width.