uncleflo

profile picture

Some cool dude. Higher order of decision making. Absolute.

Registered since September 28th, 2017

Has a total of 3739 bookmarks.

Showing top Tags within 92 bookmarks

howto   development   information   guide   reference   administration   website   design   software   solution   service   business   linux   online   uk   server   code   web   tool   system   product   application   list   video   company   data   tutorial   blog   description   technology   article   explanation   security   world   create   experience   download   windows   project   free   lookup   build   learn   javascript   network   performance   marine   london   file   control   tools   library   research   technical   support   php   beautiful   programming   boat   example   opensource   html   community   image   computer   course   music   feature   database   youtube   share   browser   dance   quality   user   construction   mobile   install   power   internet   platform   3d   work   hardware   webdesign   purchase   css   standard   money   camera   access   profile   search   installation   source   developer   manage   test   industry   professional   event   management   advice   review   travel   engineering   material   phone   question   documentation   process   digital   speed   communication   cheap   engine   fast   client   story   content   simple   customer   idea   marketing   program   develop   script   api   buy   photography   setup   interface   google   discussion   app   account   usa   device   live   study   startup   resource   operation   market   monitor   package   inspiration   compare   analysis   cloud  


Tag selected: css.

Clear all

Showing 92 results.

Looking up css tag. Showing 92 results. Clear

Bootstrap Magic : Generate your own Bootstrap themes quickly and easily

https://pikock.github.io/bootstrap-magic/app/index.html#!/editor

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

https://sass-lang.com/documentation/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

https://www.developerdrive.com/how-to-easily-use-google-fonts-with-sass/

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

https://semantic-ui.com/

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

https://github.com/yui/yuicompressor/tree/master/src/org/mozilla/javascript

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?

https://www.quora.com/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

https://github.com/css/csso

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?

https://stackoverflow.com/questions/1033156/how-to-write-ahover-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

https://prepros.io/

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

https://testdrive-archive.azurewebsites.net/graphics/svggradientbackgroundmaker/default.html

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

https://css-tricks.com/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

http://www.kaspertidemann.com/how-to-force-word-wrap-using-css/

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

https://meyerweb.com/eric/tools/color-blend/#000A0E:3B4346:1:hex

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

https://www.freeformatter.com/batch-formatter.html

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

https://bootstrapstudio.io/

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

http://v4-alpha.getbootstrap.com/components/card/#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

https://github.com/InterNations/antwort

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

https://www.benchmarkemail.com/resources/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)

https://dcrazed.com/best-responsive-html-email-templates/

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

https://pikock.github.io/bootstrap-magic/app/index.html

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


CSSTidy

http://csstidy.sourceforge.net/

Saved by uncleflo on October 15th, 2016.

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

css tools optimization opensource software web compression tidy solution application tool small code clean parse reliable execute optimise command line control


The Importance (and Ease) of Minifying your CSS and JavaScript and Optimizing PNGs for your Blog or Website - Scott Hanselman

http://www.hanselman.com/blog/TheImportanceAndEaseOfMinifyingYourCSSAndJavaScriptAndOptimizingPNGsForYourBlogOrWebsite.aspx

Saved by uncleflo on October 15th, 2016.

You may feel free to add a comment at the bottom of this post, something like "Um, DUH!" after reading this. It's funny how one gets lazy with their own website. What's the old joke, "those who can't, teach." I show folks how to optimize their websites all the time but never got around to optimizing my own. It's important (and useful!) to send as few bytes of CSS and JS and HTML markup down the wire as possible. It's not just about size, though, it's also about the number of requests to get the bits. In fact, that's often more of a problem then file size.

web css javascript performance optimization development minify howto important administration size storage


Sass Basics

http://sass-lang.com/guide

Saved by uncleflo on October 6th, 2016.

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup.

css project compile precompile basics explanation howto script code development learn setup language coding stylesheet syntax scss sass


Minify your CSS

https://cssminifier.com/

Saved by uncleflo on July 16th, 2016.

Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

css minify minifier compression compress davelopment speed fast download production development cloud tool website software


SVG Fallbacks | CSS-Tricks

https://css-tricks.com/svg-fallbacks/

Saved by uncleflo on June 13th, 2015.

There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.

svg fallback image technical trick css html5 png article information development html technique method behavior support android include download display