Skip to content

Instantly share code, notes, and snippets.

View ravid7000's full-sized avatar
🎯
Focusing

Ravi Dhiman ravid7000

🎯
Focusing
View GitHub Profile
const BREAKPOINTS = {
xs: '0px',
sm: '600px',
md: '960px',
lg: '1280px', // default
xl: '1920px',
}
function up(breakpoint) {
const size = BREAKPOINTS[breakpoint] || BREAKPOINTS['lg'];
const theme = {
zIndex: {
dropdown: 900,
modal: 1000,
tooltip: 1100,
// ... other components
}
}
@ravid7000
ravid7000 / spacing.js
Last active September 17, 2020 19:21
const theme = {
spacing: (...args) => {
const sizes = [0, 4, 8, 16, 32, 64];
let pxs = [];
args.forEach(idx => {
if (sizes[idx] !== undefined) {
pxs.push(`${sizes[idx]}px`);
} else if (typeof idx === 'string') {
pxs.push(idx);
const theme = {
typography: {
fontFamily: 'sans-serif',
fontWeight: '400',
h1: '4rem',
h2: '3rem',
h3: '2rem',
h4: '1.4rem',
h5: '1.2rem',
h6: '0.8rem',
@ravid7000
ravid7000 / theme-colors.js
Created September 17, 2020 19:03
Defining colors for theme
const theme = {
...
colors: {
primary: '#90caf9',
secondary: '#f48fb1',
bodyText: '#000000',
error: '#f44336',
warning: '#ff9800',
info: '#2196f3',
success: '#4caf50',
@ravid7000
ravid7000 / theme.js
Created September 17, 2020 18:51
High Level: Creating a UI Component Design System
const theme = {
colors: {},
typography: {},
spacing: {},
zIndex: {},
breakpoints: {}
}
This file has been truncated, but you can view the full file.
Did you hear about the Native American man that drank 200 cups of tea? He nearly drown in his own tea pee.
What's the best anti diarrheal prescription? Mycheexarphlexin
What do you call a person who is outside a door and has no arms nor legs? Matt
Which Star Trek character is a member of the magic circle? Jean-Luc Pickacard
What's the difference between a bullet and a human? A bullet doesn't miss Harambe
Why was the Ethiopian baby crying? He was having a mid-life crisis
What's the difference between a corn husker with epilepsy and a hooker with dysentery? One shucks between fits...
Who is 2016's biggest sellout? Kevin Durant or Bernie Sanders?
Why is little Annie's shoe floating in the sea? Because the shark burped.
What's the difference between a married man and a bachelor? A bachelor will go to the fridge, sees nothing he wants, and go to bed A married man will go the bed, sees nothing he wants, and go the fridge!
@ravid7000
ravid7000 / class-selector.css
Last active May 8, 2020 07:53
CSS Selectors
.dropdown {
position: absolute;
}
a.link {
text-decoration: none;
}
@ravid7000
ravid7000 / actions.js
Last active March 13, 2020 06:49
Easy-peasy thunk api call actions
export async function fetchCategories(actions, payload) {
const response = await ApiService(payload);
actions.fetched(response.data);
}
export function actionFetched(state, payload) {
state.items = payload;
return state;
}
This file has been truncated, but you can view the full file.
[
[
"1.0.0.0",
"1.0.0.255",
"256"
],
[
"1.1.1.0",
"1.1.1.0",
"1"