Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

2020-06-01

Faster loading googlefonts

Sometimes when you use googlefonts, the external/CDN could be the bottleneck (especially if you live in a country where the hop to next country is slow, like in Indonesia). This article give a good tips how to load your page faster. Just replace the $CSS on this snippet to your googlefont's CSS:

<!-- Preemptively warm up the fonts’ origin -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- Initiate a high-priority, asynchronous fetch for the CSS file. Works in
     most modern browsers -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!--  Initiate a low-priority, asynchronous fetch that gets applied to the page
      only after it’s arrived. Works in all browsers with JavaScript enabled. -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- In the unlikely event that a visitor has intentionally disabled
     JavaScript, fall back to the original method. The good news is that,
     although this is a render-blocking request, it can still make use of the
     preconnect which makes it marginally faster than the default. -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>



2019-12-20

State of Svelte UI Libraries

Awesome list of Svelte component libraries, which is CSS Framework that have Svelte integration. Here's the comparison among them all:

Component SvelteStrap 3.2.8 Svelma Bulma Components Svelte-MUI Svelte-Chota Smelte
Based on https://getbootstrap.com/ https://bulma.io/ https://bulma.io/ https://material.io/ https://jenil.github.io/chota/ https://material.io/
URL https://bestguy.github.io/sveltestrap/ https://c0bra.github.io/svelma/install http://svelte-bulma-components.surge.sh/ https://svelte-mui.ibbf.ru/ https://alexxnb.github.io/svelte-chota/ https://smelte.netlify.com/
Layout Container, Row, Col div.tile

Container, Row, Col
Alert/Flash/Toast Alert, Toast Message, Notification, Snackbar.(), Toast.()
Snackbar
Snackbar
Breadcrumb Breadcrumb




Buttons Button

Button, ButtonGroup Button Button
Card Card article.media

Card Card
Animation Collapse, Fade Collapse
Ripple Details
Dropdown Dropdown
Dropdown

Select
Forms Form, FormGroup, Label, Input Field, Input, Switch
CheckBox, Datepicker, Datefield, Textfield, Radio Input, Field, Radio, Checkbox TextField, SearchBar
Jumbotron/Hero Jumbotron section.hero



List ListGroup



List
Modal/Dialog Modal Dialog.(), Modal Modal Dialog Modal Dialog
Nav/Tabs/Pills/Acordion Nav Tabs TabsContainer ExpansionPanel, Menu Nav, Tabs Tabs, Menu
NavBar with Mobile NavBar
Navbar Sidepanel
NavigationDrawer
Pagination Pagination
Pagination


Progress Progress, Spinner Progress


PorgressLinear, ProgressCircular
Table Table table.table


DataTable
Icon
Icon .fa Icon icon*=mdi*, Icon
Tag/Label



Tag Chip
Media Media



Image
Tooltip




Tooltip
Treeview




Treeview


There's also many CSS Framework that doesn't use Javascript such as: TentCSS, Milligram, Mustard, MiniCSS, Bulma, and Chota (on the table).

Update 2020: there's SvelteMaterialUI and IBM Carbon Svelte

Update 2021: Svelte Materialify

2016-11-24

Bootstrap Alternative

Today we're gonne see more alternative of css framework such as Bootstrap (and JQuery UI)

Semantic UI

Pure.css (by Yahoo)

Foundation

UIKit


How about a nice Editor for CSS?

EnjoyCSS (web based)

Stylizer (mac, 79$)

MacRabbit Expresso (mac, 75$)

Responsive Site Designer (windows, mac, 189$)

SimpleCSS (windows, mac)

Koala (windows, mac, linux)
if you have trouble running, do this:
sudo ln -s /lib64/libudev.so.1 /lib64/libudev.so.0

StyleMaster (windows, mac, 59$)

Rapid CSS Editor (windows, 29$)

EnginSite CSS Editor (windows, 109$)

HTML Pad (windows, 35$)


Forget about bootstrap, how about if I don't know anything about CSS at all?

CSS Reference

CSS Almanac

Flexbox CheatSheet

Learn CSS Layout

How to Learn CSS in 24 Hours


But what if I want more than just CSS Framework? I demand GUI! (warning: mostly slow load)

Qooxdoo

DHTMLX

Dojo Toolkit

KendoUI

WebIX

WinJS

W2UI

ExtJS ($4000+)

VueJS Components

ReactJS Components


B-b-but I like Bootstrap, is there any GUI Builder?

LayoutIt

BootPly

Brix.io (14$)

JetStrap

PineGrow (desktop,  25$+)

Pingendo (desktop)

BootstrapStudio (25$)

Bootstrap Website Builder (windows, mac)

Lavish (customize color theme from a picture)

BootsWatchr or BootstrapMagic or Cluckles (bootstrap realtime preview)

BootUI (mac, windows, 49$)

Frontenda

Mobirise Website Builder (windows, mac, 145$)

BootstrapEditor (templates)

CodePly

BootTheme

well, that's it for now.. btw here's a comic about fullstack~