uncleflo
Registered since September 28th, 2017
Has a total of 4246 bookmarks.
Showing top Tags within 97 bookmarks
howto information development guide reference administration design website software solution service product online business uk tool company linux code server system application web list video marine create data experience description tutorial explanation technology build blog article learn world project boat download windows security lookup free performance javascript technical network control beautiful support london tools course file research purchase library programming image youtube example php construction html opensource quality install community computer profile feature power browser music platform mobile work user process database share manage hardware professional buy industry internet dance advice installation developer 3d search camera access customer material travel test standard review documentation css money engineering webdesign engine develop device photography digital api speed source program management phone discussion question event client story simple water marketing app content yacht setup package fast idea interface account communication cheap compare script study market easy live google resource operation startup monitor training
Tag selected: CSS.
Looking up CSS tag. Showing 97 results. Clear
Free Bootstrap Builder
Saved by uncleflo on November 14th, 2022.
Create Bootstrap 5 themes and templates. Start from scratch or reuse free featured designs. SASS compiler: Use powers of the modern CSS preprocessor to create stunning themes. Variables lookup: Customize 500+ Bootstrap variables categorized by UI component category or available via search. Free Bootstrap themes: Browse hundreds of featured themes & templates and load them into the editor for further customization. Bootstrap the right way: Export a maintanable SASS file with variables and your custom code. Save your work in the cloud: Organize your themes into projects and save them in the cloud for future work and collaboration. Serve from our CDN: Make changes to your theme on the fly and leverage our CDN to serve your CSS.
bootstrap webdevelopment template sass compile online create custom variable categorize expost feature theme export editor build application leverage serve css manage download website tool
Release Dart Sass 1.55.0 · sass/dart-sass · GitHub
Saved by uncleflo on November 14th, 2022.
Dart Sass has replaced Ruby Sass as the canonical implementation of the Sass language. We chose Dart because it presented a number of advantages: It's fast. The Dart VM is highly optimized, and getting faster all the time (for the latest performance numbers, see perf.md). It's much faster than Ruby, and close to par with C++. It's portable. The Dart VM has no external dependencies and can compile applications into standalone snapshot files, so we can distribute Dart Sass as only three files (the VM, the snapshot, and a wrapper script). Dart can also be compiled to JavaScript, which makes it easy to distribute Sass through npm, which the majority of our users use already. It's easy to write. Dart is a higher-level language than C++, which means it doesn't require lots of hassle with memory management and build systems. It's also statically typed, which makes it easier to confidently make large refactors than with Ruby. It's friendlier to contributors. Dart is substantially easier to learn than Ruby, and many Sass users in Google in particular are already familiar with it. More contributors translates to faster, more consistent development.To install Sass 1.55.0, download one of the packages below and add it to your PATH, or see the Sass website for full installation instructions. Most APIs that previously returned num now return double. All APIs continue to accept num, although in Dart 2.0.0 these APIs will be changed to accept only double.
sass dart selector install repository node syntax package browser css style website webdevelopment administration github download source code develop html
Animate Anything Along an SVG Path | Codrops
Saved by uncleflo on November 14th, 2022.
Learn how to code creative animations using SVG paths and the getPointAtLength() function. SVG is a very neat format to display any illustration, icon or logo on a website. Furthermore, they can be animated in CSS or JavaScript to make them more attractive. But SVG can also be used for their data only, without the visual! Let me explain… An SVG is a vector image format, which means it is not made of coloured pixels, but math functions that, once interpreted, can be rendered on screen. Since the browser must convert the file from functions to actual pixels, it also let us access a wide variety of methods to either manipulate, or retrieve data from the math. In today’s article, we will explore the function getPointAtLength() and see how we can use the data of an SVG path for creative use cases such as the demo below.
animating animate path setup predictive browser particles analyze animation bounce geometry dots animated vector illustration element circle beautiful svg path function format logo website css javascript image development howto demonstrate
How to Approach SVG Animations: A CSS Tutorial | Toptal
Saved by uncleflo on January 14th, 2022.
Animations make websites look more polished and exciting, and help improve user experience. Explore how the combined potential of SVG and CSS can be leveraged to create animations without relying on external libraries. Animations are a ubiquitous part of the web. Unlike the flashing GIF images that plagued websites in the internet's earlier days, today's animations are more subtle and tasteful. Designers and front-end specialists use them to make websites look more polished, enhance the user experience, call attention to important elements, and convey information. Web developers can benefit from combining the power of SVG and CSS to create animations without using external libraries. This SVG animation tutorial shows how to build custom animations for real-world projects. Before animating SVGs with CSS, developers need to understand how SVGs work internally. Fortunately, it's similar to HTML: We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.
svg css animation library improve user experience polish excite beautiful interact animate image website internet technology modern tutorial explanation story howto html element xml syntax enhance designer frontend user talent profile experience
Themestr.app - Bootstrap Theme Builder and Customizer
Saved by uncleflo on January 13th, 2022.
The whole idea of Themestr.app is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. For most users it's designed to be point-and-click. Advanced users can delve into the SASS as desired. It's a 4-step process... There are many, many variables. The variable names are self-explanatory, and the more relevant ones are displayed first. The SASS is automatically generated by Themestr.app. The SASS input is sent to a server-side SASS processor, which outputs the custom CSS theme. Save the CSS output as a .css file such as `theme.css`. To keep the theme file separate and smaller in size, the Bootstrap grid classes are not included in the CSS output. This means you'll need to reference the Bootstrap CSS as usual, and then reference the generated custom `theme.css` after the `bootstrap.css` in the HTML. This allows the `theme.css` to override the `bootstrap.css` with the appropriate classes as defined in the custom theme.
bootstrap sass explain explanation theme font default tool generate recommend server styling website webdevelopment easy display html customize online generator output javascript css visualization
Bootstrap Magic : Generate your own Bootstrap themes quickly and easily
Saved by uncleflo on July 11th, 2019.
Bootstrap 4.0: Includes the latest and greatest, Bootstrap 4.0, for fresh and up-to-date templates. SASS Bootstrap themes generator: Bootstrap Magic leverages Sass’s power to make all helper functions available to you. Darken, ligthen and the mixins goodness are just one click way. Colopicker to select your color: For each color variable, you can either go with the Color Picker or use your hex/rgba codes directly. HTML Code preview: You can now insert your own HTML and CSS and get a live preview with your freshly created Bootstrap theme. Magic Typehead Bootstrap variables: Find all Bootstrap variables as you type to create links between variables. Google font for custom design: Create your template with all Google Fonts. They are all included in font magic Typeahead. Simple. SCSS and CSS download: Happy about your template ? Download your full CSS stylesheet or your SCSS variables. Open Source project MIT Licence: Bootstrap Magic is all Open Source and free with the MIT License. Can be reused as you want.
css download typeahead open color sass variables branding styling control development open source code developer typography component create magic theme
Sass: Variables
Saved by uncleflo on July 10th, 2019.
Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they're one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more. A variable declaration looks a lot like a property declaration: it’s written <variable>: <expression>. Unlike a property, which can only be declared in a style rule or at-rule, variables can be declared anywhere you want. To use a variable, just include it in a value.
sass variable repetition compatibility simplicity syntax easier define generate migration development design designer reduce compete declare library configuration property mathematics generation developer code css styling experience howto
How to easily use Google Fonts with Sass - Developer Drive
Saved by uncleflo on July 10th, 2019.
In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google’s servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it’s free. (To learn more and explore the hundreds of fonts available, check out the Google Fonts website.)
sass tutorial responsive beginner typography font empower helpful validation web nesting explore tools integrate tricks tips simplified css bootstrap beautiful howto create server code process easy website bookmark drive collection quick intend read development
Semantic UI - User Interface is the language of the web
Saved by uncleflo on May 24th, 2019.
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic comes equipped with an intuitive inheritance system and high level theming variables that let you have complete design freedom. Develop your UI once, then deploy with the same code everywhere. Semantic UI treats words and classes as exchangeable concepts.
bootstrap responsive browse code layout html system theme variable design freedom develop exchange concept class create control designer developer development practical workflow howto equipment present css website language
Github - yui / yuicompressor - YUI Compressor - The Yahoo! JavaScript and CSS Compressor
Saved by uncleflo on June 1st, 2018.
The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as 'eval' or 'with' (although the compression is not optimal in those cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)
yahoo compressor javascript js remove comment minify compress css commercial recommended development code administration
Quora - What is the best JS, CSS, HTML, and PHP minifier?
Saved by uncleflo on June 1st, 2018.
JavaScript: I’d rate Google’s Closure Compiler as the best, and UglifyJS second. There isn’t much data out there comparing them, especially the current or recent versions of them, but Closure gets lots of attention from talented people and its minification is guided by smart optimizations. In that sense, it’s a true compiler, doing things like dead code elimination and some restructuring. CSS: CSSO and CSS Nano are both good. CSSO was created by Yandex, and I’m generally impressed with Yandex’s talent. (They’re the Google of Russia, sort of.). HTML: As far as I know, there isn’t a good HTML minifier right now. WebMarkupMin might be good, but it’s new and I haven’t tested it. The most popular is HTML Minifier, but it’s buggy, poorly documented, and unsafe – it can easily break your website, and they’re strangely unwilling to fix their bugs (see this bug). A golang minifier deletes the `<html>` and `<head>` tags, which is fascinating. For some reason HTML minifiers seem to be in the hands of people who are willing to take alarming risks with HTML – it’s a weird bubble in the universe. We could really use a focused project to build a reference HTML minifier, and I’ve asked Cloudflare to open-source theirs (but I have no idea if they will).
javascript css html minify optimize howto performance compare lookup document quora discussion article list reference development
Github - css / csso - CSS minifier with structural optimizations
Saved by uncleflo on June 1st, 2018.
CSSO (CSS Optimizer) is a CSS minifier. It performs three sort of transformations: cleaning (removing redundant), compression (replacement for shorter form) and restructuring (merge of declarations, rulesets and so on). As a result your CSS becomes much smaller.
css opensource project minify compress restructure small reduce size administration tool
Stackoverflow: How to write a:hover in inline CSS?
Saved by uncleflo on May 5th, 2018.
Stackoverflow Question: I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor. How can I use a:hover in inline CSS inside the HTML style attribute? E.g. you can't reliably use CSS classes in HTML emails. The answer has lots and lots of varying solutions.
stackoverflow question css class html solution code development hover inline answer community tip howto technical reference list
Compile Sass, Less, Stylus, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload
Saved by uncleflo on April 12th, 2018.
Compile Everything: Prepros can compile almost all preprocessing languages like Sass, Less, Stylus, Cssnext, Jade/Pug, Markdown, Slim, Coffeescript etc. Find Out Errors At a Glance: Forget black screen full of millions of unreadable errors. Live Reload: Prepros reloads your browser automatically every time you save a file in code editor. Minify & Optimize: Prepros can minify and optimize CSS, javascript & images with just one click. Network Preview: Prepros has built in server that can help preview your site in multiple devices like phones and tablets.
css compile pre processing processor language sass less stylus jade markdown slim coffeescript reload software editor file edit development network server preview device phone tablet administration kist html website
SVG Gradient Background Maker
Saved by uncleflo on April 7th, 2018.
Use this demo to create SVG-based CSS background-image gradients. The CSS markup works in browsers which support SVG as a background-image including Internet Explorer 9, Chrome, Safari, and Opera.
demo svg css background image gradient markup browser support make create creativity test tool development
Data URIs
Saved by uncleflo on March 28th, 2018.
Did you know that you don't have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. Basically, a super long string of gibberish characters. It's not gibberish to the browser though of course. This data is interpreted as the type of file you are saying it is.
uri url css type standard image file background character browser encode howto development element link load fast speed snappy webpage js
How to force word wrap using CSS by Kasper Tidemann
Saved by uncleflo on March 28th, 2018.
On this blog, I have several code examples with a grey background like this: some fancy code. All the code examples are contained within <span> tags. But what if a span tag contains a word – say, a path to a file on a Linux server – that is longer than the width of the paragraph (the line width)? How can you force the text inside the span to word wrap? There’s a simple, very useful CSS trick you can use for this: word-wrap: break-word;.
beautiful website minimal newspaper gray wonderful css personal force wrap code development paragraph text trick example howto design designer template brand branding
Color Blender
Saved by uncleflo on March 27th, 2018.
Pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you'd like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors. All numbers are rounded to the nearest integer. Clicking on a square in the "waterfall" display will fill in the appropriate value for whichever input is highlighted. Switching between value formats will translate whatever values are in place. "Clear" removes all values and colors, but does not change the current value format. The URL of the page is updated with each change so you can share or bookmark the colors, blend steps, and value format currently shown. If you'd like to have the Color Blender for offline use, just view source and save to your hard drive.
color blend unique create innovation innovate format number palette request designer design website graphic image css tool development
freeformatter.com - Free Online Tools For Developers
Saved by uncleflo on February 7th, 2018.
Free Online Tools For Developers. I created this website to help developers by providing them with free online tools. These tools include several formatters, validators, code minifiers, string escapers, encoders and decoders, message digesters, web resources and more. I will add new tools on a regular basis, so be sure to add this site to your bookmarks. If you encounter a bug, I would very much appreciate that you send me an email (freeformatter@gmail.com) that explains the nature of your bug. Please include details like which browser version you're using and the steps to reproduce the bug. Other comments are welcome. Please "+1" and/or "Facebook Like" this site if you thought it was useful.
online tool developer development security hacking cracking website format validator formatter escaper minifier decoder resource minify css js javascript validate minimize escape browser bookmark batch administration
Introducing Bootstrap Studio
Saved by uncleflo on December 28th, 2017.
Bootstrap Studio is a powerful desktop app for designing and prototyping websites. Bootstrap Studio is a an app for creating beautiful websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. It is built on top of the hugely popular Bootstrap framework, and exports clean and semantic HTML. The Interface. Bootstrap Studio has a beautiful and powerful interface, which is built around the simplicity of drag and drop. This makes it the perfect tool for prototyping and designing web pages and apps. Beautiful Built-in Components. Bootstrap Studio comes with a large number of pretty components for building responsive pages. We've got headers, footers, galleries, slideshows and even basic elements like spans and divs. See some of them below. Smart Drag & Drop. Bootstrap Studio knows which Bootstrap components can be nested in one another and gives you suggestions. It automatically generates beautiful HTML for you, which looks as if it was written by hand by an expert. Create Your Own Components. You can extract pieces of your designs as Custom Components, and have them ready to be dropped into any design you create. You can also export these components as files and share them. Online Library If you need a component which doesn't exist in our library, just click the Online tab in the Component Panel. There you will find thousands of components built and shared by the community. You can also upload your own. Linked Components. This is a powerful feature which allows you to synchronize components, so changing one will automatically change the other. This is especially useful for things like headers and footers which you need to update across pages. Realtime Preview. Bootstrap Studio has a powerful feature called Preview. With it, you can open your design in multiple web browsers and devices, and every change you make within the app will be shown instantaneously everywhere.
bootstrap studio online tool create innovate app responsive website framework demo purchase cloud service saas design prototype component drag and drop export clean html release features present interface develop designer development automatic expert suggest share realtime preview edit code css javascript js editor markup import advanced animation productivity theme brand manage
Bootstrap v4-alpha: Components: Card columns
Saved by uncleflo on December 27th, 2017.
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.
bootstrap javascript js css class card content container display flexbox howto lookup development website customize masonry wrap properties align order nice layout flow search list
Beautiful responsive email templates with code as beautiful as email templates can be http://www.internations.org
Saved by uncleflo on December 27th, 2017.
Antwort offers responsive layouts for Email that both fits and adapts to client widths. Don't underwhelm desktop users with single column layouts that work for mobile. Antwort offers columns on desktop that automatically become rows on mobile. Works on mobile: Mail on iOS and Email on Android; Works in major clients like AOL, gmail, outlook.com and Yahoo; Even works in Outlook (2000+); Bulletproof layouts: made with dynamic content in mind; Minimalist in design for maximum customizability. Author: Julie Ng (@jng5), Date: October 2014, Version: 1.0.0
email client desktop column layout mobile antwort template css customize dynamic content marketing responsive code minimal bulletproof width development administration github opensource
Free HTML Email Templates
Saved by uncleflo on December 27th, 2017.
Simple HTML email templates for your email marketing campaigns. Let Benchmark Email provide you with expertly crafted HTML email templates! Our templates are completely compatible with Outlook, Gmail, Lotus Notes and other big email clients. Take a look at three simple and convenient templates below – all are guaranteed to help you get started on your email marketing campaigns. Using our templates is easy. Just download each template in ZIP format. Once you've downloaded a template, you can edit it and customize it using your favorite text or HTML editor. The best part? Our templates are absolutely free!
free premium html css editor campaign marketing outlook gmail expert craft template text customize download image control own compatible convenient
35 Best Responsive HTML Email Templates (Free, Premium)
Saved by uncleflo on December 27th, 2017.
Amazing business marketing starts with minimal and simple email templates. Five of the included templates here are free to download and others are premium. Modern day marketing requires modern day templates and techniques as the templates need to be responsive to scale on any device platform like mobile, tablets, laptops etc. Composing a clean, responsive email which can be send from may mail clients is also essentials so i have included premium templates which provides compatibility across multiple mail clients as well. Email marketing has become an important part of the total advertising scheme as it provides an easy way to contact the real customers with their emails. Users who have already subscribed to your website can come back again for the new service you are selling. Here in this article you will find 35+ best responsive html email templates hand picked for you. Since Christmas is nearby you can also take a look at our recent article on 10 Best Responsive Christmas Email Templates for more suitable Holiday templates this winter season.
email template free premium newsletter good beautiful responsive purpose mailchimp business minimal development marketing download compose clean advertise customer customize html css technology notification mail client
Bootstrap Magic : Generate your own bootstrap theme quickly and easily
Saved by uncleflo on July 3rd, 2017.
How to build your theme faster ? We first developed this bootsrap theme editor for our own purpose to create theme a lot faster. Here are some technics to become a bootstrap theme chef with this tool.
bootstrap github theme quickly easily magic generate develop development css editor online parameter purpose fast tool
